Commit Graph

22 Commits

Author SHA1 Message Date
Peter Argany 490f22ae72 Fix bug with <InputAccessoryView> safe area conformance
Reviewed By: wwalser

Differential Revision: D7507732

fbshipit-source-id: 10bf8d58c65f1353a3e62a27fc74c2dfd73ac2c4
2018-04-04 16:47:16 -07:00
Christian Brevik d4fb87b0b8 Add iOS 10 textContentType for TextInput
Summary:
Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/

Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard

Adding `textContentType` equal to `username` or `password`  should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:

![image](https://user-images.githubusercontent.com/4932625/37848513-b2170490-2ed4-11e8-85bf-895823d4f98a.png)

Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`.
I have only been able to get this to work on device, and not simulator.

Usage:
```jsx
<TextInput
    value={this.state.username}
    onChangeText={this.setUserName}
    textContentType="username"
/>
```

```jsx
<TextInput
    value={this.state.password}
    onChangeText={this.setPassword}
    secureTextEntry={true}
    textContentType="password"
/>
```

To disable:
```jsx
<TextInput
    value={this.state.password}
    onChangeText={this.setPassword}
    secureTextEntry={true}
    textContentType="none"
/>
```

This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

Docs PR coming up.

[IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+.
Closes https://github.com/facebook/react-native/pull/18526

Differential Revision: D7469630

Pulled By: hramos

fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
2018-04-02 02:46:43 -07:00
Peter Argany ff70ecf868 Fixed <TextInput> bug with autocapitalization
Reviewed By: shergin

Differential Revision: D7304936

fbshipit-source-id: ef587db89b64e7111dfdeb049c3a1a334c15430b
2018-03-19 14:20:18 -07:00
Cristiano Santos def789cd7e Wrong height when TextInput has an empty string
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

The caret/cursor did not appear when the TextInput was empty. Found that the cause was because the frame of the TextInput had an height of 0

Just fill and clear a TextInput and the caret/cursor will always appear there.

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
[IOS] [BUGFIX] [TextInput] - This was causing the cursor/caret to not appear since the size of the frame had an height of 0.
Closes https://github.com/facebook/react-native/pull/18355

Differential Revision: D7319723

Pulled By: shergin

fbshipit-source-id: b0249ab5493b6ac310d1898ff20c0bad78cf82c9
2018-03-19 02:46:34 -07:00
Kevin Gozali 1c53471911 iOS OSS: fixed RNTester - missing RCTInputAccessoryShadowView.* in .xcodeproj
Reviewed By: yungsters

Differential Revision: D7317380

fbshipit-source-id: 0a40d62c70cd3c3a875e5a418f4b77fecb0417b1
2018-03-17 22:01:15 -07:00
Peter Argany 139d554c48 Replace js Dimensions with shadow view in InputAccessoryViewExample
Reviewed By: mmmulani

Differential Revision: D7196168

fbshipit-source-id: 031ed5ab24d1075f775ec71e5b78d32e03fe8f6f
2018-03-15 10:14:15 -07:00
Peter Argany c136c54ff0 Refactor RCTInputAccessoryView view hierarchy and names
Reviewed By: shergin

Differential Revision: D7196162

fbshipit-source-id: 07a5c13d4cdb876f5a632d7d53859eab5e235f49
2018-03-13 11:25:12 -07:00
Peter Argany 6d9fe455dc Fixed TVOS test failure caused by input accessory view change
Reviewed By: mmmulani

Differential Revision: D7103353

fbshipit-source-id: 7a1575eff0296017521fc8ca6fe384301849a73e
2018-02-27 17:56:48 -08:00
Alex Hinson 2dd2529b3a Add option to hide context menu for TextInput #17335
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

There is currently no way to disable to context menu that automatically appears over a TextInput. This is especially troublesome if you would like to disable the user from pasting text into certain fields. This PR adds a `contextMenuHidden` property to TextInput that will hide it.

I'm not sure if testing is necessary here. I would be happy to investigate further on how this would be tested, if deemed necessary!

https://github.com/facebook/react-native-website/pull/95

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->

[FEATURE][TextInput] - Added `contextMenuHidden` property
Closes https://github.com/facebook/react-native/pull/18125

Differential Revision: D7101888

Pulled By: hramos

fbshipit-source-id: fe36603a3fbdcefbd644251a7ea894ac7e23e5b8
2018-02-27 17:32:24 -08:00
Peter Argany 38197c8230 Support Input Accessory View (iOS Only) [1/N]
Reviewed By: mmmulani

Differential Revision: D6886573

fbshipit-source-id: 71e1f812b1cc1698e4380211a6cedd59011b5495
2018-02-27 11:09:30 -08:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Mehdi Mulani cff522d283 Dirty text shadow nodes on UIManager queue after multiplier changes
Summary: Letting them fire on whatever queue we get the notification from throws an assert.

Reviewed By: shergin

Differential Revision: D7002789

fbshipit-source-id: 669474af1a07f0df6784b69b54afe0152c1ba3c4
2018-02-16 12:37:42 -08:00
Valentin Shergin 0dbe18375e `base-line` metric exposure for <TextInput>
Summary:
Now <TextInput> (both bersions) exposes base-line metric to Yoga.
Before:
https://cl.ly/0G1Q29450O0y
After:
https://cl.ly/2X103V3O0322

Reviewed By: yungsters

Differential Revision: D6957054

fbshipit-source-id: d76d96f56720d710a4230c53beafdb0b2521e8a9
2018-02-15 17:46:41 -08:00
Valentin Shergin f91f7d91a1 Reimagining of RCTShadowView layout API
Summary:
This is reimagining of interoperability layer between Yoga and ShadowViews (at least in Yoga -> RN part).
Goals:
 * Make it clear and easy.
 * Make clear separation between "what layout what", now parent always layout children, noone layout itself.
 * Make possible to interleave Yoga layout with custom imperative layout (may be used in SafeAreaView, Text, Modal, InputAccessoryView and so on).

Reviewed By: mmmulani

Differential Revision: D6863654

fbshipit-source-id: 5a6a933874f121d46f744aab99a31ae42ddd4a1b
2018-02-12 00:32:43 -08:00
Valentin Shergin d7fa81f181 Fixed double `onChange` event triggering from <TextInput> on iOS
Summary:
The problem was recently introduced in the last refactoring of the Text module.
There are two problem actually:
(1) Compare this current code with stable version.
In the stable version the event is only triggered here:
https://github.com/facebook/react-native/blob/0.52-stable/Libraries/Text/RCTTextField.m#L132-L140
In the new version the event is triggered in two places (which is obviously wrong).

(2) Executing `[_eventDispatcher sendTextEventWithType:RCTTextEventTypeChange:...]` and _onChange() actually do the same thing.
Historically, the single-line <TextInput> used the first approach and multi-line used second one. When we unify the logic, mixed both of them, which was apparenly wrong.
So, we have to remove another call of `[_eventDispatcher sendTextEventWithType:RCTTextEventTypeChange:...]`.
The the future we have to completly remove usage of `_eventDispatcher` from this component.

Depends on D6854770.

Reviewed By: fkgozali

Differential Revision: D6869678

fbshipit-source-id: 6705ee8dda2681ae184ef6716238cc8b62efeff1
2018-02-01 14:16:40 -08:00
Valentin Shergin 74963eb945 Stub for `caretHidden` prop in RCTUITextView
Summary:
Even if we don't support this prop yet, we have to expose this in RCTUITextView to conform the contract between ViewManager and ShadowView.
Same story as D6842304.
Depends on D6842304.

Reviewed By: fmoo

Differential Revision: D6869750

fbshipit-source-id: 9b35f1a38040319ec66f1ec12f97ac739f8b204f
2018-02-01 11:03:27 -08:00
Valentin Shergin ef4214a49a Stub for `clearButtonMode` prop in RCTUITextView
Summary: Even if we don't support this prop yet, we have to expose this in RCTUITextView to conform the contract between ViewManager and ShadowView.

Reviewed By: sahrens

Differential Revision: D6842304

fbshipit-source-id: 7ea26974f595eba6a3c06df06ca01e46af2e63df
2018-01-30 11:30:54 -08:00
Valentin Shergin 46fd864348 Proper attributed strings comparsion in RCTBaseTextInputView
Summary:
Now, in the new model, we transfer text attributes with actual text via attributed text to a native text component,
so previous text-only comparsion is not sufficient anymore.

Depends on D6600685.

Differential Revision: D6809833

fbshipit-source-id: 475b7426cf3c6694781790d99ef32466606da2f2
2018-01-25 13:47:35 -08:00
Valentin Shergin 2716f53220 The New <Text> on iOS
Summary:
This is a complete rewrite of RCTText, the part of React Native which manages Text and TextInput components.

Key points:

* It's understandable now. It follows a simple architectural pattern, and it's easy to debug and iterate. Text flow layout is a first-class citizen in React Native layout system now, not just a wired special case. It also brings entirely new possibilities such as nested interleaving <Text> and <View> components.
* All <Text>-specific APIs were removed from UIManager and co (it's about ~16 public methods which were used exclusively only by <Text>).
* It relies on new Yoga measurement/cloning API and on-dirty handler. So, it removes built-in dirty propagation subsystem from RN completely.
* It caches string fragments properly and granularly on a per-node basis which makes updating text-containing components more performant.
* It does not instantiate UIView for virtual components which reduces memory utilization.
* It drastically improves <TextInput> capabilities (e.g. rich text inside single line <TextInput> is now supported).

Screenshots:
https://cl.ly/2j3r1V0L0324
https://cl.ly/3N2V3C3d3q3R

Reviewed By: mmmulani

Differential Revision: D6617326

fbshipit-source-id: 35d4d81b35c9870e9557d0211c0e934e6072a41e
2018-01-24 00:03:01 -08:00
Semen Zhydenko d2c569795c Typos in comments and log messages
Summary:
No code changes, no testing required.

alligned -> aligned
allignment -> alignment
completly -> completely
conseptually -> conceptually
decendents -> descendants
indefinetly -> indefinitely
dimention -> dimension
doesnt -> doesn't
safegaurd -> safeguard
intialization -> initialization
hierachy -> hierarchy
happend -> happened
gaurd -> guard
programatically -> programmatically
initalized -> initialized
immidiately -> immediately
occured -> occurred
unkown -> unknown
neccessary -> necessary
neccesarily -> necessarily
occuring -> occurring
comoponent -> component
propogate -> propagate
recieved -> received
referece -> reference
perfomance -> performance
recieving -> receiving
subsquently -> subsequently
scoll -> scroll
suprisingly -> surprisingly
targetting -> targeting
tranform -> transform
symetrical -> symmetrical
wtih -> with
Closes https://github.com/facebook/react-native/pull/17578

Differential Revision: D6718791

Pulled By: shergin

fbshipit-source-id: 4ab79c1131ec5971d35a0c7199eba7ec0a0918ad
2018-01-12 22:18:45 -08:00
Valentin Shergin c491b22233 RCTBaseTextInputViewManager: new base class for TextInput view managers
Summary: Bunch or identical code was moved to superclass.

Reviewed By: mmmulani

Differential Revision: D6663772

fbshipit-source-id: 82321f56bbab0e9d17c0227c97dd86904cf5ab30
2018-01-07 18:31:20 -08:00
Valentin Shergin 19a9c5e41d The Great File Renaming in RCTText
Summary:
The previous file/class name convention seemed cool... but now it drives me BANANAS! It makes all this code really hard to maintain.
So, evething were renamed following common modern RN convention.

Reviewed By: mmmulani

Differential Revision: D6605090

fbshipit-source-id: 88ca13d793a5d2adaac2b7922ec6bd4654aacec5
2017-12-19 20:14:00 -08:00