Commit Graph

193 Commits

Author SHA1 Message Date
Summer Kitahara 21b1ed3115 autoGrow for RN TextInput
Reviewed By: sahrens

Differential Revision: D5527855

fbshipit-source-id: 1dad11851495a0b8b432903537a5a281840dc681
2017-08-10 18:47:35 -07:00
Seth Fitzsimmons 9afb71fde8 Replace React.createClass with create-react-class
Summary:
This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style.

Fixes #14620
Refs #14712
Closes https://github.com/facebook/react-native/pull/14729

Differential Revision: D5321810

Pulled By: hramos

fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585
2017-07-07 14:36:01 -07:00
Justin Stanley bc718fd729 Fixed an incorrect word in the blurTextInput() documentation.
Summary:
In `TextInputState`'s `blurTextInput()` documentation, the parameter description`id of the text field to focus` should be `id of the text field to unfocus`, since this is `blurTextInput` and not `focusTextInput`.

N/A (just documentation fix).
Closes https://github.com/facebook/react-native/pull/14367

Differential Revision: D5200263

Pulled By: shergin

fbshipit-source-id: b3e9ab60e555ad9050474b59a728761180618190
2017-06-20 19:31:29 -07:00
Valentin Shergin 4e40521620 Forcing to `alignSelf: stretch` was removed from <TextInput>
Summary:
Because it introduces inconsistency in RN layout model, confuses people and hurts dev experience.
The original problem was introduced in D1611014 as an attempt to address the intrinsic size issue.
So, now <TextInput> has intrinsic size (D5069971) and we don't need this hack anymore.

GH issues:
https://github.com/facebook/react-native/issues/11892
https://github.com/facebook/react-native/issues/9646

Reviewed By: javache

Differential Revision: D5072833

fbshipit-source-id: d9a60ab09b728e6de89bfa53eda07069377f1369
2017-05-29 16:01:08 -07:00
Adam Perry ca2d57c744 Update examples in docs and address version lag of CRNA
Summary:
cc hramos

Pretty sure I've hit all of the places where AppRegistry is called in CRNA-pastable examples. Let me know whether you think we need to approach the version lag differently, I figure a caveat is as natural a place to call it out as any.

If you end up finding anything else that needs tweaking before cherry picking, I'm happy to push that up here too.
Closes https://github.com/facebook/react-native/pull/13744

Differential Revision: D5071038

Pulled By: hramos

fbshipit-source-id: 4a4a6f2a73079aca627f17d75a4e4b395ecbd4a8
2017-05-16 23:51:28 -07:00
Brian Vaughn 6564edce5e Ran PropTypes -> prop-types codemod against Libraries/FBReactKit/js/react-native-github
Reviewed By: acdlite

Differential Revision: D4876709

fbshipit-source-id: 3a5e92bfc74287b7a9054546c438580bed0147af
2017-04-12 16:15:15 -07:00
Andrew Y. Chen 909af08f24 Add a nativeID prop to allow native code to reference react managed views
Reviewed By: sahrens

Differential Revision: D4786713

fbshipit-source-id: af9cef0737c010b429d52d00181c00bd81f13f5b
2017-04-07 12:00:40 -07:00
Brian Vaughn de8ce45258 Ran codemod to replace View.propTypes with ViewPropTypes
Reviewed By: yungsters

Differential Revision: D4764838

fbshipit-source-id: 0b47a0fdd6793dab9333bb73bb93053fccc27dae
2017-03-24 00:30:48 -07:00
Brian Vaughn 9344f3a95b Support string return type from RN createReactNativeFiberComponentClass()
Reviewed By: sebmarkbage

Differential Revision: D4607283

fbshipit-source-id: 466d2373dd570f77ebcced306d2f20a3f72d79c6
2017-03-20 13:07:06 -07:00
Valentin Shergin 1b013cd30c Better TextInput: Fixing multiline <TextInput> insets and prepare for auto-expanding feature
Summary:
Several things:
 * The mess with insets was fixed. Previously we tried to compensate the insets difference with `UITextField` by adjusting `textContainerInset` property, moreover we delegated negative part of this compensation to the view inset. That was terrible because it breaks `contentSize` computation, complicates whole insets consept, complicates everything; it just was not right. Now we are fixing the top and left inset differences in different places. We disable left and right 5pt margin by setting `_textView.textContainer.lineFragmentPadding = 0` and we introduce top 5px inset as a DEFAULT value for top inset for common multiline <TextInput> (this value can be easilly overwritten in Javascript).
 * Internal layout and contentSize computations were unified and simplified.
 * Now we report `intrinsicContentSize` value to Yoga, one step before auto-expandable TextInput.

Depends on D4640207.

Reviewed By: mmmulani

Differential Revision: D4645921

fbshipit-source-id: da5988ebac50be967caecd71e780c014f6eb257a
2017-03-20 00:02:55 -07:00
Bin Yue c53404a688 Fix TextInput 'defaultValue' propTypes to 'string'
Summary:
Because `TextInput` only render the `defaultValue` of `string`, when using other types of values, it will render empty('') without any Warnings.
Closes https://github.com/facebook/react-native/pull/11478

Differential Revision: D4340132

Pulled By: lacker

fbshipit-source-id: aedb96d49277836000c0adc53007c97db6363253
2017-03-15 18:08:22 -07:00
Jeff Morrison 59257d6976 fbobjc
Reviewed By: gabelevi

Differential Revision: D4652687

fbshipit-source-id: 6069c8bc24f0b88da3537ada877cdb7d1d4eccfd
2017-03-04 19:30:34 -08:00
Henrik Raitasola bb1f85183b Add TextInput's prop caretHidden implementation for Android and add the prop to docs
Summary:
This PR will:
- add missing documentation for `caretHidden` prop to the docs
- add `caretHidden` prop implementation for Android

I noticed this by accident when looking at `RCTTextFieldManager.m` and there is `RCT_EXPORT_VIEW_PROPERTY(caretHidden, BOOL)` which hides caret on iOS. Then I realised that the docs were missing for this prop and implementation on Android side :)

Render `TextInput` with prop `caretHidden`. After this caret is not visible anymore.
`<TextInput style={styles.input} caretHidden />`

If you omit the prop then caret is visible again
`<TextInput style={styles.input} />`
Closes https://github.com/facebook/react-native/pull/11863

Differential Revision: D4448402

fbshipit-source-id: 456e1df3e2cbb8af32540d2c7a8f4e7da219f5c3
2017-02-23 17:17:39 -08:00
Janic Duplessis ae57b25134 Change cursor color when using selectionColor on Android
Summary:
This matches the behavior on iOS, there was no way before to change the cursor color per input, it was only possible to change it globally via the theme. Ideally cursor color and selection color would be 2 different props but I think this is better than what we have (and matches iOS).

Sadly there is no api to change it pragmatically (only possible via xml) so this uses reflection and can easily break so it is wrapped in a try catch to avoid crashes. I think it is better to just silently fail in this case. Definetly not super happy about the solution but I think it's worth adding since it is possible to do it natively using xml so it would suck not to be able to do it in RN.

**Test plan**
Tested that the cursor has the same color as before the change when not setting the prop and that it gets the selectionColor color when set.
Closes https://github.com/facebook/react-native/pull/12280

Differential Revision: D4571858

Pulled By: astreet

fbshipit-source-id: 7dca2db33a0a4eecb6115b45155549b1265ffbed
2017-02-16 04:45:35 -08:00
Naman Goel 908ec178fc Don't allow 0 in the Bid Optimization Amount
Reviewed By: zjj010104

Differential Revision: D4540231

fbshipit-source-id: 87347ec95483e4414da0ac58399aa343d342e7d5
2017-02-14 18:30:02 -08:00
Adam Comella 69e98cfc75 Android: Add onScroll event to TextInput
Summary:
Corresponding iOS PR: https://github.com/facebook/react-native/pull/11002

This adds an onScroll event to TextInput which is useful when a multiline TextInput has so much content that it is scrollable.

**Test plan (required)**

Verified the event works properly in a test app. Also, my team uses this event in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/11001

Differential Revision: D4220941

Pulled By: mkonicek

fbshipit-source-id: 7e420579946f2ae840c9e1fcdc8afab68007da17
2017-02-06 07:28:28 -08:00
Michal Srb 5938e16248 Document arguments to onSelectionChange
Summary:
To update the documentation. Works on iOS, so I assume this is the same on Android.
Closes https://github.com/facebook/react-native/pull/11575

Differential Revision: D4494464

Pulled By: mkonicek

fbshipit-source-id: c7480d39ed0849401efaa080948c14fa0cb7a08d
2017-02-02 04:58:38 -08:00
Paul Mestemaker 8378f0f9f7 Ensure documentation has consistent relative links
Summary:
Explain the **motivation** for making this change. What existing problem does the pull request solve?

I had tried fixing a broken link in a previous commit (#11453). My commit was merged, but it did not resolve the underlying problem. I have looked into how links should be formed for the docs and have fixed the original problem as well as updated all other links to be consistent.

Previous link formats:

- /docs/sample.html <-- broken link
- sample.html <-- broken link
- https://facebook.github.io/react-native/docs/sample.html <-- works
- /react-native/docs/sample.html <-- works
- docs/sample.html <-- works (permalink format)

This PR updates all links to the permalink format.

**Test plan (required)**
I ran the website locally and manually tested half of the links in each category. They all worked.
```
$ cd website
$ npm install && npm start
```
Closes https://github.com/facebook/react-native/pull/12064

Differential Revision: D4489153

Pulled By: mkonicek

fbshipit-source-id: bf0231d941ba147317595c3b3466dc579a887169
2017-01-31 12:13:31 -08:00
Alex Kotliarskyi 5a09b2861a Guard against empy _inputRef in TextInput
Reviewed By: cpojer

Differential Revision: D4420532

fbshipit-source-id: 6912c11b5a6f5d8efaa07dc7a09a9bc1cda0658a
2017-01-20 16:43:42 -08:00
Michal Srb 5df227f42c Fix onKeyPress documentation of TextInput
Summary:
Only tested on iOS.
Closes https://github.com/facebook/react-native/pull/11621

Differential Revision: D4374415

Pulled By: mkonicek

fbshipit-source-id: b686d0480b8db181dae46a94e9d1b88eab488074
2016-12-29 16:58:33 -08:00
Michal Srb 1b694f43ba Update docs on TextInput:style to point to relevant issue
Summary:
Bandaid for #7070. Until this is fixed, the docs should at least be honest the state they're in, so people don't have to go search and wonder.
Closes https://github.com/facebook/react-native/pull/11626

Differential Revision: D4366925

Pulled By: mkonicek

fbshipit-source-id: 082a8a9916ad0f8fbb2955cffbf61142fa2a98a1
2016-12-26 03:58:30 -08:00
Adam Comella c0ea23cfb0 Android: Expose textBreakStrategy on Text and TextInput
Summary:
Android has a text API called breakStrategy for controlling how paragraphs are broken up into lines. For example, some modes support automatically hyphenating words so a word can be split across lines while others do not.

One source of complexity is that Android provides different defaults for `breakStrategy` for `TextView` vs `EditText`. `TextView`'s default is `BREAK_STRATEGY_HIGH_QUALITY` while `EditText`'s default is `BREAK_STRATEGY_SIMPLE`.

In addition to exposing `textBreakStrategy`, this change also fixes a couple of rendering glitches with `Text` and `TextInput`. `TextView` and `EditText` have different default values for `breakStrategy` and `hyphenationFrequency` than `StaticLayout`. Consequently, we were using different parameters for measuring and rendering. Whenever measuring and rendering parameters are inconsistent, it can result in visual glitches such as the text taking up too much space or being clipped.

This change fixes these inconsistencies by setting `breakStrategy` and `hyphenat
Closes https://github.com/facebook/react-native/pull/11007

Differential Revision: D4227495

Pulled By: lacker

fbshipit-source-id: c2d96bd0ddc7bd315fda016fb4f1b5108a2e35cf
2016-12-16 01:28:45 -08:00
Adam Comella 0e55f5b26d iOS: Introduce spellCheck prop to TextInput
Summary:
This exposes iOS's spellCheckingType functionality to JavaScript. The native functionality is a three state enum. It gets exposed to JavaScript as a boolean. The initial value and JS null map to the third state.

An alternative design for this API would have been to expose a three state enum to JavaScript:
  - "on" which maps to UITextSpellCheckingTypeYes
  - "off" which maps to UITextSpellCheckingTypeNo
  - "auto" (default) which maps to UITextSpellCheckingTypeDefault

For consistency, I decided to use the same API design as spellCheck. We don't have many options for fixing spellCheck in #11055 without introducing a breaking change.

**Test plan (required)**

Verified that switching `spellCheck` between `true`, `false`, and `null` all work correctly in single line and multiline `TextInputs`.
Closes https://github.com/facebook/react-native/pull/11056

Differential Revision: D4232802

Pulled By: javache

fbshipit-source-id: 79e03307fa6a30a169f7e2fd0ec5ac826663e7c1
2016-11-25 04:28:28 -08:00
Adam Comella 1b870d2019 Android: Add disableExtractUI prop to TextInput on Android
Summary:
On Android, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), Android may choose to have the user edit the text inside of a full screen text input mode. This behavior isn't always desirable. For example, if your app offers some UI controls for controlling the formatting of the text, you want the controls to be visible while the user is editing the text. This Android feature conflicts with that desired experience because the UI controls would be hidden while the text is being edited.

The `disableExtractUI` prop enables developers to choose whether or not Android's full screen text input editing mode is enabled. When this prop is true, Android's `IME_FLAG_NO_EXTRACT_UI` flag is passed to the `setImeOptions` method.

**Test plan (required)**

Verified `disableExtractUI` works for both `true` and `false` values in a test app.

My team is also using this change in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/10900

Differential Revision: D4226483

Pulled By: mkonicek

fbshipit-source-id: 8f1055f6e612b05bafabe6f07a3705dd8788e3da
2016-11-23 06:43:50 -08:00
Adam Comella c609aee733 iOS: Add onScroll event to TextInput
Summary:
Corresponding Android PR: https://github.com/facebook/react-native/pull/11001

This adds an onScroll event to TextInput which is useful when a multiline TextInput has so much content that it is scrollable.

**Test plan (required)**

Verified the event works properly in a test app. Also, my team uses this event in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/11002

Differential Revision: D4203565

Pulled By: ericvicenti

fbshipit-source-id: 7cb5e10325c3b03c6b395cce0f1bacb0528db40a
2016-11-22 11:58:37 -08:00
David Aurelio 3683beb88a RN: Update React (2/2)
Reviewed By: kentaromiura

Differential Revision: D4026114

fbshipit-source-id: 67808af91454d95941fea01eef58a4d9086f46e1
2016-11-04 05:43:44 -07:00
aybb 68c61203ac Texinput documentation improvement
Summary:
To my mind this feature should be documented as here lots of issues can happen potentially.
Closes https://github.com/facebook/react-native/pull/10706

Differential Revision: D4119506

fbshipit-source-id: 54f9738ea2308144a05678fd1897f529f260966c
2016-11-02 13:58:53 -07:00
Tim Yung efcdef711e RN: Stop Deep Linking `ReactChildren`
Reviewed By: sebmarkbage

Differential Revision: D4025469

fbshipit-source-id: 311f9d741101133155395355d8468938435063f7
2016-10-14 18:59:10 -07:00
Tim Yung 7263c349c7 RN: Stop Deep Linking `ReactPropTypes`
Reviewed By: sebmarkbage

Differential Revision: D4025448

fbshipit-source-id: 4e9b6ee002a86f638fc57a4bbeb45bf35fabf74c
2016-10-14 18:59:10 -07:00
Tim Yung 331c13d4dc RN: Require {react/lib/ => }ReactNative
Reviewed By: sebmarkbage

Differential Revision: D4024375

fbshipit-source-id: cd2226a3580a7a4ff319d6a93b67b68f2942eb00
2016-10-14 18:59:10 -07:00
Jeff Morrison 1a9853da37 fbobjc
Reviewed By: gabelevi

Differential Revision: D3949455

fbshipit-source-id: 1cbce4a85fe5b8798496752863bbca64b078aa9c
2016-10-01 11:16:21 -07:00
Janic Duplessis 3c1b69c1a9 Add TextInput controlled selection prop on Android
Summary:
Android PR for TextInput selection, based on the iOS implementation in #8958.

** Test plan **
Tested using the text selection example in UIExplorer.
Closes https://github.com/facebook/react-native/pull/8962

Differential Revision: D3819285

Pulled By: andreicoman11

fbshipit-source-id: 9a2408af2a8b694258c88ab5c46322830c71452a
2016-09-05 07:13:46 -07:00
m3vaz 61832b4323 _getText defaults to blank string when no default value set
Summary:
One of the potential fixes that grabbou suggested was to make _getText return an empty string in the worst case of null value and null defaultValue.
Closes https://github.com/facebook/react-native/pull/9553

Differential Revision: D3800913

fbshipit-source-id: 30d9c0a7384d39477a71947714eec3340ba5380f
2016-08-31 16:14:03 -07:00
Janic Duplessis f0a3c56048 Add TextInput controlled selection prop on iOS
Summary:
This adds support for a controlled `selection` prop on `TextInput` on iOS (Android PR coming soon). This is based on the work by ehd in #2668 which hasn't been updated for a while, kept the original commit and worked on fixing what was missing based on the feedback in the original PR.

What I changed is:
- Make the prop properly controlled by JS
- Add a RCTTextSelection class to map the JS object into and the corresponding RCTConvert category
- Make sure the selection change event is properly triggered when the input is focused
- Cleanup setSelection
- Changed TextInput to use function refs to appease the linter

** Test plan **
Tested using the TextInput selection example in UIExplorer on iOS.
Also tested that it doesn't break Android.
Closes https://github.com/facebook/react-native/pull/8958

Differential Revision: D3771229

Pulled By: javache

fbshipit-source-id: b8ede46b97fb3faf3061bb2dac102160c4b20ce7
2016-08-25 17:28:37 -07:00
Andrei Coman 9840ced929 Reverted commit D3735237
Summary:
Currently, text inputs do not scroll when inside other components like scroll
views. This fixes it by blocking any parent native component from taking the
responder when the text input is focused and is being scrolled. This fixes the
previous implementation, where the scroll view was not able to scroll on top of
other text inputs, even though they were not focused.
This makes the component similar to it's ios counterpart.

Reviewed By: foghina

Differential Revision: D3735237

fbshipit-source-id: 724f94a6e7332d03261a80f63ffa60d0e5846932
2016-08-24 08:43:42 -07:00
Andrei Coman 0082517a6c Scroll multiline textinputs when focused
Summary:
Currently, text inputs do not scroll when inside other components like scroll
views. This fixes it by blocking any parent native component from taking the
responder when the text input is focused and is being scrolled. This fixes the
previous implementation, where the scroll view was not able to scroll on top of
other text inputs, even though they were not focused.
This makes the component similar to it's ios counterpart.

Reviewed By: foghina

Differential Revision: D3735237

fbshipit-source-id: 0e56b2bbd3f5636540b4c3cc7cc13aa0f4d2737e
2016-08-19 09:43:41 -07:00
Andrei Coman 959c8b170e Refactor text input props
Summary: Just cleaning the props for android rendering, similar to iOS

Reviewed By: foghina

Differential Revision: D3735324

fbshipit-source-id: aaf222543701409710a2cd217cc580e79f23bf7b
2016-08-19 07:28:40 -07:00
yueshuaijie 15bf2c57b8 Add TextInput.dataDetectorTypes prop.
Summary:
On iOS, if `TextInput` is used with prop `multiline={true}`, the backend view is `UITextView`. Sometimes we need `UITextView.dataDetectorTypes` to detect clickable url in the text view. The PR add this prop to `TextInput`, so we can use it like this:

`<TextInput`
`    defaultValue="Detect phone number: 88888888."`
`    editable={false}`
`    multiline={true}`
`    dataDetectorTypes="all"`
`    />`

Similar as #8743 .
Closes https://github.com/facebook/react-native/pull/8863

Differential Revision: D3648027

fbshipit-source-id: 987bd4f46fb5be74099b62988135a32115d9269c
2016-07-31 14:28:28 -07:00
Antoine Rousseau 2ca2f87a82 Fix onLayout support in <TextInput> for Android (same than iOS fix: #8042)
Summary:
See #8042: exactly the same bug and fix on Android

**Test plan**

```jsx
<TextInput onLayout={function(e) { console.log(e.nativeEvent); }} />
```
Closes https://github.com/facebook/react-native/pull/9113

Differential Revision: D3647808

Pulled By: mkonicek

fbshipit-source-id: 252a610e26a72a73411c3407faedea0477bee54e
2016-07-31 07:58:24 -07:00
Hugo Dozois 90c2605950 Change TextInput prop check to print instead of throw
Summary:
Follow up of https://github.com/facebook/react-native/pull/8499! Open to discussion

Motivation:

See https://github.com/facebook/react-native/pull/8499#issuecomment-230004068

Goal is to have the same failure mode in dev and prod.

/cc ide
Closes https://github.com/facebook/react-native/pull/8757

Differential Revision: D3558991

fbshipit-source-id: c7d133f958e67ab23da486b1ffcb8f9963509b79
2016-07-13 16:43:38 -07:00
Janic Duplessis 2537157d99 Implement TextInput onContentSizeChange
Summary:
This adds proper support for tracking a TextInput content size as discussed in #6552 by adding a new callback that is called every time the content size changes including when first rendering the view.

Some points that are up for discussion are what do we want to do with the onChange callback as I don't see any use left for it now that we can track text change in onChangeText and size changes in onContentSizeChange. Also a bit off topic but should we consider renaming onChangeText to onTextChange to keep the naming more consistent (see [this naming justification](https://twitter.com/notbrent/status/709445076850597888)).

This is split in 2 commits for easier review, one for iOS and one for android.

The iOS implementation simply checks if the content size has changed everytime we update it and fire the callback, the only small issue was that the content size had several different values on initial render so I added a check to not fire events before the layoutSubviews where at this point the value is g
Closes https://github.com/facebook/react-native/pull/8457

Differential Revision: D3528202

Pulled By: dmmiller

fbshipit-source-id: fefe83f10cc5bfde1f5937c48c88b10408e58d9d
2016-07-07 09:00:01 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
ianlin e1497ce2b6 improve TextInput docs
Summary:
Add `phone-pad` as one of cross-platform values to `keyboardType`.
Closes https://github.com/facebook/react-native/pull/8555

Differential Revision: D3515002

Pulled By: JoelMarcey

fbshipit-source-id: 4f30dd72e8e30905a8a5fb90d3f361fb58eb825e
2016-07-04 08:13:22 -07:00
Hugo Dozois 508cc06565 Add __DEV__ around textInput prop check
Summary:
**Motivation**

The prop validation was run on every render, even in prod which seems odd to me. This adds a dev check to make sure prod build skips the validation.

**Test plan (required)**

There are no changes to the ui.
Closes https://github.com/facebook/react-native/pull/8499

Differential Revision: D3508805

Pulled By: javache

fbshipit-source-id: 68c6a1224e33997f9df93481426daff790ef5bcd
2016-07-01 04:13:24 -07:00
Joel Marcey 5c31ba5098 Fix TextInput API update nits
Summary:
Ref: 7e7c2b5d57 (r68444537)

Ref: 7e7c2b5d57 (r68444442)
Closes https://github.com/facebook/react-native/pull/8476

Differential Revision: D3494641

Pulled By: JoelMarcey

fbshipit-source-id: 9a75ff66ccb895deb2f5027bdffe5d5bfe898e41
2016-06-28 14:58:17 -07:00
Martín Bigio eafc5dac62 Add support for `drawableLeft` and `drawablePadding` props
Summary: Add support inlining images into text inputs. For now this is only available on Android.

Reviewed By: andreicoman11

Differential Revision: D3470805

fbshipit-source-id: 14db05ec4d5af549bf314b903654314f39bf73ea
2016-06-28 14:13:48 -07:00
Joel Marcey 91134d16c9 Update TextInput API
Summary:
- Make the examples runnable (both copy/paste and with the web player)
- Add a bit more information in props where needed.
Closes https://github.com/facebook/react-native/pull/8392

Differential Revision: D3482747

Pulled By: caabernathy

fbshipit-source-id: 8f2d812efc1efb3f14db45b5c054ce0d5c14f5f5
2016-06-24 11:58:53 -07:00
Pieter De Baets d29e8ae0ca Implement onTextInput events for RCTTextView
Reviewed By: blairvanderhoof

Differential Revision: D3475581

fbshipit-source-id: df2fb8e1e898dfe6af455db0f96ecb23b4aa0721
2016-06-24 06:43:37 -07:00
Héctor Ramos 0c9dba46bb Move everything out of Known Issues and into more appropriate locations.
Summary:
Two of the known issues have been moved to the issue tracker:

* #8315
* #8316

Others have been moved into more appropriate locations, such as the `TextInput` issue to the API doc itself, and the React debugging issue to the Debugging doc.

The Android-specific compatibility concerns have been dropped entirely as it does not seem like people would find these in the docs.
Closes https://github.com/facebook/react-native/pull/8321

Differential Revision: D3477999

Pulled By: JoelMarcey

fbshipit-source-id: dfffc9910ebf5514eb14c6aa8a9a3e70761db874
2016-06-23 14:13:37 -07:00
Eric Kreutzer 7fc51c8cea use ColorPropType everywhere there is a color prop on TextInput
Summary:
If using colors that are not strings react native would warn you of the problem. I made some changes so color props use `ColorPropType` instead of `PropTypes.string`.
Closes https://github.com/facebook/react-native/pull/8325

Differential Revision: D3475516

Pulled By: javache

fbshipit-source-id: b7e40a0de5e665fc5f41a975650bbba0ec210814
2016-06-23 03:13:28 -07:00
Paul Shen 92926f9858 Fix onLayout support in <TextInput>
Summary:
The `onLayout` prop is overridden by `<TouchableWithoutFeedback>` and thus does not work on `<TextInput>` components. fb0007d853/Libraries/Components/Touchable/TouchableWithoutFeedback.js (L176)

This makes it so the following works.

```javascript
<TextInput onLayout={...} />
```

I only tested on iOS but I assume a similar fix might be needed for Android. fb0007d853/Libraries/Components/TextInput/TextInput.js (L575)

**Test Plan**

https://rnplay.org/apps/euIZtg (confirm bug)
With fix, set `onLayout` on `<TextInput>` and see it is fired correctly.

```javascript
<TextInput onLayout={function(e) { console.log(e.nativeEvent); }} />
```
Closes https://github.com/facebook/react-native/pull/8042

Differential Revision: D3417192

fbshipit-source-id: 536ec81d3479e6bda474ac766b27afb39242c01a
2016-06-10 03:28:44 -07:00
Dave Miller f3507f99f1 Remove support for password property and only use secureTextEntry
Summary:
Reduce the public surface area of TextInput.  It only exposes a secureTextEntry property, but on Android was also accepting password as a prop.
This removes that.

Reviewed By: javache

Differential Revision: D3392223

fbshipit-source-id: 67c36fbe16fe493e2841d5d9deb78e3be2209ebd
2016-06-06 10:13:28 -07:00
Adam Comella 26aa27da63 Fix TextInput autocorrect (#7496)
Summary:
Autocorrect was broken for controlled TextInput components by a change to batch event handling in React Native:
9f11f8c263

For example, a TextInput like this would be affected by this bug:

```javascript
<TextInput
  autoCorrect={true}
  style={{height: 26, width: 100}}
  onChangeText={(text) => this.setState({ text })}
  value={this.state.text}
/>
```
This fix uses the same approach as
0cd2904b23

The problem is that TextInput's _onChange handler relied on this.props.value being updated synchronously when calling this.props.onChangeText(text). However, this assumption was broken when React Native event handling started being batched.

The fix is to move the code that relies on this.props.value being up-to-date to componentDidUpdate.

**Test plan (required)**

Tested autocorrect now works on iOS in a small app and a large app. Also tested t
Closes https://github.com/facebook/react-native/pull/7676

Differential Revision: D3346221

Pulled By: nicklockwood

fbshipit-source-id: 715df3e8a03aa58cb0a462de4add02289d42782f
2016-05-26 07:28:18 -07:00
Jimmy Mayoukou dd8caf4cf2 Implement returnKeyType/returnKeyLabel on Android
Summary:
This PR implements [`returnKeyType`](http://facebook.github.io/react-native/docs/textinput.html#returnkeytype) on Android.

It is implemented with [`EditText.setImeOptions()`](http://developer.android.com/reference/android/widget/TextView.html#setImeOptions(int)) that allows us to specify options on an input, in this case change the return button icon. To be noted that it is also possible to specify a string instead of an icon with [`EditText.setImeActionLabel()`](http://developer.android.com/reference/android/widget/TextView.html#setImeActionLabel(java.lang.CharSequence, int)) while being 2 different things I added both of these behaviors in this PR since it was mostly at the same place/component.

**Problems encountered :**

- All the `ReactEditText`s were set to `IME_ACTION_DONE` by default ([reference](a2157dbbe0/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java (L78))). I'm not sure
Closes https://github.com/facebook/react-native/pull/6905

Differential Revision: D3264755

Pulled By: dmmiller

fb-gh-sync-id: 4a090e31b620a245847c06ba1895cfea02e88d0f
fbshipit-source-id: 4a090e31b620a245847c06ba1895cfea02e88d0f
2016-05-05 10:22:19 -07:00
Ben Nham 91dcc9ac8e Fix autocomplete in rich-text editing mode for CJK text input
Summary:This fixes autocomplete for CJK text input by making sure that the `<Text>` nodes that JS controls to produce attributed text matches the text view's attributed text as much as possible. This is done by giving the disconnected `<Text>` child the same style as the `<TextInput>` parent.

This works because `-[RKTextView performPendingTextUpdate]` avoids setting the attributedText property on textView if the JS attributedText and textView attributedText are equal. This is important because setting attributedText on a text view clears the autocomplete state (markedText property) on a text view, breaking autocomplete for multistage input styles like CJK with a phonetic keyboard.

Reviewed By: nicklockwood

Differential Revision: D3207513

fb-gh-sync-id: 02e582ea5f15191974f15a65ebc1820401715f8d
fbshipit-source-id: 02e582ea5f15191974f15a65ebc1820401715f8d
2016-04-21 12:10:25 -07:00
Janic Duplessis 49fdd99633 Display component methods on the website and tweak the documentation
Summary:The website now displays public methods on components. This was implemented mostly in react-docgen via #66. This adds a <Method> component that is used by the component and API doc pages to display documentation for a method.

It also adds some missing documentation and tweak some existing one to integrate with this feature. I also prefixed some component methods with an '_' so they don't show up in the doc.

**Test plan (required)**

Tested every component page locally to make sure the methods doc was displayed properly.
Tested an API page to make sure it still worked properly.
Closes https://github.com/facebook/react-native/pull/6890

Differential Revision: D3159911

Pulled By: vjeux

fb-gh-sync-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
fbshipit-source-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
2016-04-09 11:13:28 -07:00
Sebastian Markbage 613ca14612 React.findNodeHandle -> ReactNative.findNodeHandle
Summary:Since the React 0.14 split of modules, the findNodeHandle feature is part of the
renderer and not the generic React API.

This just greps for React.findNodeHandle and replace them with ReactNative.findNodeHandle. I fixed up the imports manually.

I also found two callers each of ReactNative.createClass and React.render with the exception of downstream and examples will fix them separately.

I'll need to find more things like `var { PropTypes } = ReactNative;` separately. I think this is a good start though.

Reviewed By: vjeux

Differential Revision: D3149356

fb-gh-sync-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
fbshipit-source-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
2016-04-07 19:44:31 -07:00
Dmitry Gladkov b5106a8fca Implement TextInput.selectTextOnFocus for Android
Summary:Uses native Android `TextView.setSelectAllOnFocus` method. Triggers TextInput's `onSelectionChanged` event on focus as expected.
Closes https://github.com/facebook/react-native/pull/6654

Differential Revision: D3126354

Pulled By: mkonicek

fb-gh-sync-id: faa64314c0ddc87296277ccd707f18effef8f407
fbshipit-source-id: faa64314c0ddc87296277ccd707f18effef8f407
2016-04-01 07:16:20 -07:00
Charles Pletcher f5a1600a20 Fixes #1509 -- Add note about side-specific properties on TextInput
Summary:Add note about side-specific properties not being applied to `TextInput`s if `multiline=false`.

Fix formatting of docs describing other `multiline={true/false}` quirks.
Closes https://github.com/facebook/react-native/pull/2240

Differential Revision: D3037154

Pulled By: andreicoman11

fb-gh-sync-id: d64db906c2ab0054f2357b8e218725414d9868d6
shipit-source-id: d64db906c2ab0054f2357b8e218725414d9868d6
2016-03-10 13:44:23 -08:00
AbilashK ab12189f87 Enable blurOnSubmit for text input in android
Summary:PR for https://github.com/facebook/react-native/issues/6098, Added tests to UIExplorer based on existing iOS example.

Before:
![blur_true](https://cloud.githubusercontent.com/assets/11550281/13401854/cd66117a-df33-11e5-875d-e1f132e2fc82.gif)

After:
![blur_false](https://cloud.githubusercontent.com/assets/11550281/13401874/de1dd1ce-df33-11e5-8210-e6bee80240fb.gif)
Closes https://github.com/facebook/react-native/pull/6215

Differential Revision: D3000042

Pulled By: mkonicek

fb-gh-sync-id: 7f01270580b198498505d92e38a456c0b3a01488
shipit-source-id: 7f01270580b198498505d92e38a456c0b3a01488
2016-03-02 07:07:32 -08:00
David Aurelio ad8a335864 Remove knowledge of fbjs from the packager
Summary:Follow-up to https://github.com/facebook/react-native/pull/5084

This…
- changes all requires within RN to `require('fbjs/lib/…')`
- updates `.flowconfig`
- updates `packager/blacklist.js`
- adapts tests
- removes things from `Libraries/vendor/{core,emitter}` that are also in fbjs
- removes knowledge of `fbjs` from the packager

Closes https://github.com/facebook/react-native/pull/5084

Reviewed By: bestander

Differential Revision: D2926835

fb-gh-sync-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
shipit-source-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
2016-03-02 04:28:38 -08:00
fangmobile 33d8db599e added accessibility props for touchables
Summary:
accessibilityLabels are missing in these touchable*.js files.
for #5322
ide This is not tested yet. I will update with test.
Closes https://github.com/facebook/react-native/pull/5346

Reviewed By: svcscm

Differential Revision: D2882061

Pulled By: gkassabli

fb-gh-sync-id: dff0ef373e5f5895027cb1cc08c8887a6ace8eee
2016-02-04 05:13:32 -08:00
Dave Miller 0c91931adf Add support for selectionColor on Android TextInput
Summary:
public
This adds support to set the highlight color on TextInput on Android.  See https://github.com/facebook/react-native/pull/5678 for the iOS implementation.

Note : We will merge these two properties with one name 'selectionColor' in a follow on diff, and may move it to a style.

Reviewed By: nicklockwood

Differential Revision: D2895253

fb-gh-sync-id: 6f2c08c812ff0028973185356a8af285f7dd7969
2016-02-03 05:49:32 -08:00
joranz c2233ef7e6 Add iOS tintColor prop to TextInput
Summary:
In response to https://github.com/facebook/react-native/issues/5595

Adds tintColor property to TextInput component for iOS:

<img width="375" alt="screen shot 2016-01-28 at 1 39 35 pm" src="https://cloud.githubusercontent.com/assets/3868826/12730689/eae58a36-c8e1-11e5-9453-70716617bfab.png">

Usage:

<img width="454" alt="screen shot 2016-01-28 at 1 42 37 pm" src="https://cloud.githubusercontent.com/assets/3868826/12730711/fedeed8e-c8e1-11e5-87d0-1621d19a0418.png">
Closes https://github.com/facebook/react-native/pull/5678

Reviewed By: svcscm

Differential Revision: D2895115

Pulled By: nicklockwood

fb-gh-sync-id: bfb52b992d5e02754fe47f409f6e8df426514718
2016-02-03 00:22:34 -08:00
Aleksei Androsov 65b0913210 TextInput should call blur and focus methods of selectionState
Summary:
DocumentSelectionState returns anchor and focus offsets only in focused state. So TextInput should set proper state to selectionState when blur and focus.
Closes https://github.com/facebook/react-native/pull/5354

Reviewed By: svcscm

Differential Revision: D2890277

Pulled By: andreicoman11

fb-gh-sync-id: 84f96504e218cf7c70d7e24865ab074d882f3bea
2016-02-02 05:22:08 -08:00
Andrei-Ovidiu Coman 729c04b58b Revert "TextInput should call blur and focus methods of selectionState" 2016-02-02 13:19:58 +00:00
Andrei-Ovidiu Coman f3ffafb756 Merge pull request #5354 from doochik/textinput-selectionstate-focus-blur
TextInput should call blur and focus methods of selectionState
2016-02-02 10:39:56 +00:00
Huang Yu f453e14c8f Fix StyleSheet 'textAlign' for AndroidTextInput. Closes #2702
Summary:
change `setTextAlign` and `setTextAlignVertical` to receive argument of type `String` (the same as in `StyleSheet`), so that native props and stylesheet props are calling the same ReactMethod

- add demo (may not be necessary)
Closes https://github.com/facebook/react-native/pull/4481

Reviewed By: svcscm

Differential Revision: D2823456

Pulled By: mkonicek

fb-gh-sync-id: 349d17549f419b5bdc001d70b583423ade06bfe8
2016-01-21 11:08:34 -08:00
Aleksei Androsov 5ea4d397a9 TextInput should call blur and focus methods of selectionState
DocumentSelectionState returns anchor and focus offsets only in focused state. So TextInput should set proper state to selectionState when blur and focus.
2016-01-16 14:49:40 +03:00
Andrei Coman 25c3dd140f Add phone-pad keyboard
Summary:
With the numeric keyboard now being an actual numeric keyboard (before
it was actually phone-pad), we need a proper phone-pad keyboard as well.

public

Reviewed By: dmmiller

Differential Revision: D2830707

fb-gh-sync-id: 80a1d314eac730e691de73a31342c014a2fa5ba6
2016-01-14 11:42:34 -08:00
Andrei Coman cc449b394e Refactor text input keyboards
Reviewed By: foghina

Differential Revision: D2807491

fb-gh-sync-id: e7e5fb8c235f3637f619b2f44053749c51f379f0
2016-01-07 13:40:33 -08:00
Dave Miller 6dc6794881 Add onSelectionChange for Android TextInput
Summary:
public

Add an onSelectionChange method to TextInput that works on Android same as iOS

Reviewed By: andreicoman11

Differential Revision: D2780131

fb-gh-sync-id: 9b3b8fbd9ea653d43e3107a338e4bc08bde2e8c6
2016-01-07 12:02:06 -08:00
Hedger Wang 53d18c83c8 Fix app crash caused by TextInput.
Reviewed By: zjj010104

Differential Revision: D2761644

fb-gh-sync-id: 89241de2f8c84d569ec452871f740a0d655cc95e
2015-12-15 17:32:27 -08:00
Brent Vatne c8108bdbe1 Fixed controlled component on iOS and remove unnecessary code
Summary:
Closes #4290

`mostRecentEventCount` was always being set after `text` on iOS, so let's be really explicit about the order here as we were doing on Android: always call `setNativeProps` providing the `mostRecentEventCount` before we call `onChange` or `onChangeText`.

I also ripped out storing `mostRecentEventCount` in the state, which isn't necessary since we're always doing it through `setNativeProps`.
Closes https://github.com/facebook/react-native/pull/4588

Reviewed By: svcscm

Differential Revision: D2754565

Pulled By: nicklockwood

fb-gh-sync-id: a1401f39b4e19248095517c2a3503cd2af59fa47
2015-12-14 06:46:31 -08:00
Nick Lockwood 37042573b8 Added blurOnSubmit support to multine TextInput (aka RCTTextView)
Summary:
public

Setting `blurOnSubmit=true` on a multiline `<TextInput>` now causes it to behave like a single-line input with respect to the return key:

With the default value of `false`, pressing return will enter a newline character into the field. If you set the value to `true`, pressing return will now blur the field and trigger the onSubmitEditing event. The newline character will *not* be added to the text.

(See associated github task for dicussion: https://github.com/facebook/react-native/pull/2149)

Reviewed By: javache

Differential Revision: D2710448

fb-gh-sync-id: c9706ae11f8b399932d3400ceb4c7558e455570d
2015-12-02 08:16:27 -08:00
Gabe Levi 892dd5b86a Fix errors uncovered by v0.19.0
Reviewed By: mroch

Differential Revision: D2706663

fb-gh-sync-id: 017c91bab849bf18767cacd2ebe32d1a1b10c715
2015-12-01 20:11:26 -08:00
Nick Lockwood 60db876f66 Wrapped UIManager native module for better abstraction
Summary: public

RCTUIManager is a public module with several useful methods, however, unlike most such modules, it does not have a JS wrapper that would allow it to be required directly.

Besides making it more cumbersome to use, this also makes it impossible to modify the UIManager API, or smooth over differences between platforms in the JS layer without breaking all of the call sites.

This diff adds a simple JS wrapper file for the UIManager module to make it easier to work with.

Reviewed By: tadeuzagallo

Differential Revision: D2700348

fb-gh-sync-id: dd9030eface100b1baf756da11bae355dc0f266f
2015-11-27 07:00:32 -08:00
Krzysztof Magiera e6093cff04 Use requireNativeComponent with propTypes for Android components.
Reviewed By: davidaurelio

Differential Revision: D2663502

fb-gh-sync-id: 550e7b7c783ec0463a6beb052c09a768a8086056
2015-11-18 06:36:28 -08:00
Nick Lockwood 7aa789ad57 Fix onSelectionChange "this" binding
Reviewed By: tadeuzagallo

Differential Revision: D2660071

fb-gh-sync-id: 3fc50c0af8566dd7db5a56b220df979625673d07
2015-11-16 14:09:23 -08:00
Nick Lockwood 5a34a097f2 Open sourced the onSelectionChange event
Summary: public

Open-sourced the onSelectionChange event for RCTTextView, and also added onSelectionChange support for RCTTextField.

Reviewed By: javache

Differential Revision: D2647541

fb-gh-sync-id: ab0ab37f5f087e708a199461ffc33231a47d2133
2015-11-14 09:44:30 -08:00
Christopher Dro f407211131 Add keyboardAppearance prop to TextInput component.
Summary: Resolves #3649.
Closes https://github.com/facebook/react-native/pull/4012

Reviewed By: javache

Differential Revision: D2636538

Pulled By: nicklockwood

fb-gh-sync-id: 022e79d8f8fa684cad43af1a51f728d60ac652a8
2015-11-11 05:38:35 -08:00
Harry Moreno 4386a3664d Note onSubmitEditing is invalid with multiline={true}
Summary: Repeat onSubmitEditing is invalid if mutliline is set to true. Closer to the method's documentation.
Closes https://github.com/facebook/react-native/pull/4008

Reviewed By: svcscm

Differential Revision: D2639710

Pulled By: nicklockwood

fb-gh-sync-id: b7a169f0d21ac53f092278bdd32ee2d79779aa14
2015-11-10 17:34:45 -08:00
Adrov Igor b6340ee2b0 implement android maxlength prop
Summary: Fixes https://github.com/facebook/react-native/issues/3864
But I don't sure that this code is correct.

But it works and works same as in iOS.
Closes https://github.com/facebook/react-native/pull/3873

Reviewed By: mikearmstrong001

Differential Revision: D2626122

Pulled By: andreicoman11

fb-gh-sync-id: 316915c99b218ed5f32ca90fd72ce9810571383a
2015-11-06 13:25:34 -08:00
Brent Vatne 0da2004e88 Expose additional private modules
Summary: - TextInputState as TextInput.State
- Touchable
- flattenStyle as StyleSheet.flatten
- ReactNativeART as ART

Original discussion in #1821
Closes https://github.com/facebook/react-native/pull/3308

Reviewed By: sebmarkbage

Differential Revision: D2527152

Pulled By: javache

fb-gh-sync-id: 19d4ef9d4c0e6587b9f0793e1ca624aebb034f3b
2015-11-05 03:35:18 -08:00
Dave Sibiski 7af752403e Implements `blurOnSubmit`
Summary: The default value (to retain current behavior) is set to `true`. Setting the value to `false` will prevent the textField from blurring but still fire the `onSubmitEditing` callback. However, the `onEndEditing` callback will not be fired.

Addresses issue: https://github.com/facebook/react-native/issues/2129
Closes https://github.com/facebook/react-native/pull/2149

Reviewed By: svcscm

Differential Revision: D2619822

Pulled By: nicklockwood

fb-gh-sync-id: 9a61152892f4afb5c6c53e7b38dffae13bc7e13f
2015-11-04 21:05:42 -08:00
Nick Lockwood d799558db5 Fix Groups text input
Reviewed By: javache

Differential Revision: D2590712

fb-gh-sync-id: 453e20970460c703230547d8fd649383ba7d4c4a
2015-11-04 04:09:27 -08:00
Dave Sibiski 6c7c845145 Implements `onKeyPress`
Summary: - When a key is pressed, it's `key value` is passed as an argument to the callback handler.
 - For `Enter` and `Backspace` keys, I'm using their `key value` as defined [here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Key_values). As per JonasJonny & brentvatne's [suggestion](https://github.com/facebook/react-native/issues/1882#issuecomment-123485883).

- Example
```javascript
 _handleKeyPress: function(e) {
      console.log(e.nativeEvent.key);
  },

  render: function() {
    return (
      <View style={styles.container}>
        <TextInput
            style={{width: 150, height: 25, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
        />
        <TextInput
            style={{width: 150, height: 100, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
            multiline={true}
        />
      </View>
    );
  }
```
- Implements [shouldChangeCharactersInRange](https://developer.apple.com/library/prerelease/ios/documentat
Closes https://github.com/facebook/react-native/pull/2082

Reviewed By: javache

Differential Revision: D2280460

Pulled By: nicklockwood

fb-gh-sync-id: 1f824f80649043dc2520c089e2531d428d799405
2015-11-02 09:15:31 -08:00
Jihyun Yu 79e33078f2 Fix minor typos on documentation
Summary: Closes https://github.com/facebook/react-native/pull/2742

Reviewed By: @​svcscm

Differential Revision: D2549690

Pulled By: @javache

fb-gh-sync-id: 84cb3aa78c2c75bae24a8cc7c1b96e219c9a0552
2015-10-16 03:49:25 -07:00
Harry Moreno 90fc8a30dd Format Code in TextInput Comment
Summary: * wrap code snippet in TextInput Comment in backticks ```
* unless there is a way to omit portions of comments from reaching the
docs this is less confusingCloses https://github.com/facebook/react-native/pull/3085

Reviewed By: @​svcscm

Differential Revision: D2495630

Pulled By: @frantic
2015-09-30 21:02:44 -07:00
Andrei Coman d1e316fce3 Remove text input warnings
Reviewed By: @mkonicek

Differential Revision: D2471396
2015-09-23 19:29:04 -07:00
Alexsander Akers 9a2d05d9b2 Move color processing to JS
Reviewed By: @vjeux

Differential Revision: D2346353
2015-09-17 17:20:45 -07:00
Nacho Lopez Sais 551815c1cf Adapted changes from android repo for TextInput numberOfLines 2015-09-08 10:25:13 -08:00
Andrei Coman 327f84b967 [ReactNative] Sync [react_native] Implement TextInput editable 2015-08-06 11:07:06 -08:00
Andrei Coman 0d981c06de [ReactNative] Sync [react_native] Text Input missing letters fix 2015-08-06 04:59:09 -08:00
Krzysztof Magiera b807c51bbe [ReactNative] Fix TextInput Focus issue 2015-07-31 11:03:41 -08:00
Martin Konicek c3d194d1f8 [ReactNative] TextInput docs 2015-07-27 06:45:13 -08:00
Matej Hamas 000ab1139f [ReactNative] Adding clear function to the react native TextInput component. 2015-07-24 09:46:01 -08:00
Spencer Ahrens cec5360f1b [RN] Introduce initialValue prop to fix TextInputExamples
Summary:
Some of the examples relied on the fact that TextInput wasn't a controlled
component before.  This introduces a new `initialValue` prop which behaves the
way the `value` prop used to - that is, you could type without updating it and
it wouldn't get reset, thus acting as just an initial value - and switches the
examples to use it where appropriate.
2015-07-22 14:21:16 -08:00
Spencer Ahrens 961c1eb429 [ReactNative] TextInput bug fixes and features
Summary:
This introduces event counts to make sure JS doesn't set out of date values on
native text inputs, which can cause dropped characters and can mess with
autocomplete, and obviates the need for the input buffering which added lag and
complexity to the component.  Made sure to test simulated super-slow JS text
event processing to make sure characters aren't dropped, as well as typing
obviously correctable words and making sure autocomplete works as expected.

TextInput is now a controlled input by default without causing any issues for
most cases, so I removed the `controlled` prop.

Fixes selection state jumping by restoring it after setting new text values, so
highlighting the middle of some text in the new ReWrite example and hitting
space will replace that selection with an underscore and keep the cursor at a
sensible position as expected, instead of jumping to the end.

Ads `maxLength` prop to support the most commonly needed syncronous behavior:
preventing the user from typing too many characters.  It can also be used to
prevent users from continuing to type after entering special characters by
changing it to the current length after a regex match.  Made sure to verify it
works well with pasted input (including in the middle of existing text),
truncating it and collapsing the selection the same way it does on the web.

Fixes bug in TextEventsExample where it wouldn't show the submit and end events,
even though there were firing correctly.
2015-07-21 12:45:07 -08:00
Christopher 5006eca4a8 [TextInput] Remove focus on TextInput if property `editable` is …
Summary:
Clicking on a TextField with editable set to false still would trigger a keyboard event.
In this case that the TextField was a multiline, it would scroll you down to the bottom.

Closes https://github.com/facebook/react-native/pull/1855
Github Author: Christopher <hello@blick-labs.com>
2015-07-15 08:37:22 -08:00