Commit Graph

144 Commits

Author SHA1 Message Date
David Vacca 409dbd2057 Fix setMeasureFunction during cloning
Reviewed By: achen1

Differential Revision: D7753602

fbshipit-source-id: 284ec13b4cd784dfc61eeb0205f5779847854aac
2018-04-25 10:11:54 -07:00
David Vacca 660a578aeb Fix cloning for ReactTextInputShadowNode
Reviewed By: shergin

Differential Revision: D7628252

fbshipit-source-id: 034f2d619f716600dde21a5dd43538c261be773b
2018-04-16 14:01:49 -07:00
David Vacca b43afcdde9 Change cloning mechanism for mutableCopyWithNewChildren method
Reviewed By: achen1

Differential Revision: D7239873

fbshipit-source-id: d931e753c3a0b26d439eb450d62af93a672641f4
2018-03-19 18:31:36 -07:00
Khaer Ansori c595509048 Add number-pad keyboardType
Summary:
On Android there's no number-pad but numeric instead, for my use-case I need number only (without decimal and sign, for PIN input)

I write it so there's no breaking change for those already using the `TextInput` Component

None

[ANDROID][ENHANCEMENT][Component] Add number-pad keyboardType
Closes https://github.com/facebook/react-native/pull/18350

Reviewed By: achen1

Differential Revision: D7269721

Pulled By: mdvacca

fbshipit-source-id: 82571dce948e0cf2e4354dc46c69198ec69ba65a
2018-03-14 14:48:10 -07: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
Moti Zilberman 5898817fc1 Implement letterSpacing on Android >= 5.0
Summary:
`letterSpacing` is completely missing from RN Android at the moment.

I've reviewed the `letterSpacing` implementations in #13199, #13877 and #16801 (that all seem to have stalled) and managed to put together an improved one based on #13199, updated to merge cleanly post https://github.com/facebook/react-native/commit/6114f863c3aed826355530bcf404ee5aed2f927b, that resolves the [issues](https://github.com/facebook/react-native/pull/13199#issuecomment-354568863) I've identified with that code.

I believe this is the closest PR yet to a correct implementation of this feature, with a few caveats:

- As with the other PRs, this only works on Android >= 5.0 (silently falling back to no letter spacing on older versions). Is this acceptable for a RN feature, in general? Would a dev mode warning be desirable?
- The other PRs seem to have explored the space of potential solutions to the layout issue ([Android renders space _around_ glyphs](https://issuetracker.google.com/issues/37079859), iOS to the _right_ of each one) and come up empty, so I've opted to merely document the difference.
- I have neither updated nor tested the "Flat" UI implementation - everything compiles but I've taken [this comment](https://github.com/facebook/react-native/issues/12770#issuecomment-294052694) to mean there's no point in trying to wade through it on my own right now; I'm happy to tackle it if given some pointers.
- The implementation in `ReactEditText` is only there to handle the placeholder text, as `ReactBaseTextShadowNode` already affects the input control's contents correctly.
  - I'm not sure whether `<TextInput>` is meant to respect `allowFontScaling`; I've taken my cue here from `ReactTextInputManager.setFontSize()`, and used the same units (SP) to interpret the value in `ReactEditText.setLetterSpacingPt()`.
  - I'm not sure whether `<TextInput>` is even meant to support `letterSpacing` - it doesn't actually work on iOS. I'm not going to be able to handle the Objective-C side of this, not as part of this PR at least.
- I have not added unit tests to `ReactTextTest` - is this desirable? I see that some other props such as `lineHeight` aren't covered there (unless I'm not looking in the right place).
- Overall, I'm new to this codebase, so it's likely I've missed something not mentioned here.

Note comment re: unit tests above; RNTester screenshots follow.

| iOS (existing functionality, amended test) | Android (new functionality & test) |
| - | - |
| <img src=https://user-images.githubusercontent.com/2246565/34458459-c8d59498-edcb-11e7-8c8f-e7426f723886.png width=300> | <img src=https://user-images.githubusercontent.com/2246565/34458473-2a1ca368-edcc-11e7-9ce6-30c6d3a48660.png width=300> |

| iOS _(not implemented, test not in this branch)_ | Android (new functionality & test) |
| - | - |
| <img src=https://user-images.githubusercontent.com/2246565/34458481-6c60a36e-edcc-11e7-9af5-9734dd722ced.png width=300> | <img src=https://user-images.githubusercontent.com/2246565/34458486-8b3cdcf8-edcc-11e7-974b-25c6085fa674.png width=300> |

| iOS _(not implemented, test not in this branch)_ | Android (new functionality & test) |
| - | - |
| <img src=https://user-images.githubusercontent.com/2246565/34458492-d69a77be-edcc-11e7-896f-21212621dbee.png width=300> | <img src=https://user-images.githubusercontent.com/2246565/34458490-b3a1139e-edcc-11e7-88c8-79d4430d1514.png width=300> |

https://github.com/facebook/react-native-website/pull/105 - this docs PR is edited slightly from what's in `TextStylePropTypes` here; happy to align either one to the other after a review.

[ANDROID] [FEATURE] [Text] - Implemented letterSpacing
Closes https://github.com/facebook/react-native/pull/17398

Reviewed By: mdvacca

Differential Revision: D6837718

Pulled By: hramos

fbshipit-source-id: 5c9d49e9cf4af6457b636416ce5fe15315aab72c
2018-02-27 14:53:58 -08:00
Josh Hargreaves b60a727adb Fix crashes onKeyPress Android
Summary:
There appear to be two different types of crashes related to the recent addition of `onKeyPress` on Android introduce in `0.53`. This PR addresses the cause of both of them.

Firstly, it seems possible to get an `indexOutOfBoundsException` with some 3rd-party keyboards as observed in https://github.com/facebook/react-native/issues/17974 & https://github.com/facebook/react-native/issues/17922. I have simplified the backspace determining logic slightly, and also put in an explicit check for zero case so it is not possible to get an indexOutOfBoundsException & it should make sense in the context of the onKeyPress logic.

Secondly, it appears that `EditText#onCreateInputConnection` can return null. In this case, if we set `null` to be the target of our subclass of `ReactEditTextInputConnectionWrapper`, we will see the crashes as seen [here](https://github.com/facebook/react-native/issues/17974#issuecomment-368471737), whereby any of methods executed in the `InputConnection` interface can result in a crash. It's hard to reason about the state when `null` is returned from `onCreateInputConnection`, however I would might reason that any soft keyboard input cannot update the `EditText` with a `null` `input connection`, as there is no way of interfacing with the `EditText`. I'm am not sure, if there is a later point where we might return/set this input connection at a later point? As without the `InputConnection` onKeyPress will not work. But for now, this will fix this crash at least.

I have not managed to reproduce these crashes myself yet, but users have confirmed that the `indexOutOfBounds` exception is fixed with the 'zero' case and has been confirmed on the respective issues https://github.com/facebook/react-native/issues/17974#issuecomment-368471737.

For the `null` inputConnection target case, I have verified that explicitly setting the target as null in the constructor of `onCreateInputConnection` results in the same stack trace as the one linked. Here is also a [reference](https://github.com/stripe/stripe-android/pull/392/files#diff-6cc1685c98457d07fd4e2dd83f54d5bb) to the same issue closed with the same fix for another project on github.

It is also important to verify that the behavior of `onKeyPress` still functions the same after this change, which can be verified by running the RNTesterProject and the `KeyboardEvents` section in `InputText`.
The cases to check that I think are important to check are:
- Cursor at beginning of input & backspace
- Return key & return key at beginning of input
- Select text then press delete
- Selection then press a key
- Space key
- Different keyboard types

This should not be a breaking change.

 [ANDROID] [BUGFIX] [TextInput] - Fixes crashes with TextInput introduced in 0.53.
Closes https://github.com/facebook/react-native/pull/18114

Differential Revision: D7099570

Pulled By: hramos

fbshipit-source-id: 75b2dc468c1ed398a33eb00487c6aa14ae04e5c2
2018-02-27 10:01:40 -08:00
David Vacca 62efff8ab8 Implement cloning for all ReactShadowNodes
Reviewed By: achen1

Differential Revision: D7063509

fbshipit-source-id: 90df8a3d2e6f2a4efa13f5eb0337b191b690bf8f
2018-02-26 09:04:48 -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
Taras Tsugrii 79a63d040f Skylarkify RN defs.
Reviewed By: adamjernst

Differential Revision: D6934209

fbshipit-source-id: 59f50b739482a53473c157f9e0183024dc88dc67
2018-02-08 09:47:28 -08:00
Vishwesh Jainkuniya 09b43e479e textinput: Maintain cursor position when secureTextEntry toggles.
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!

-->

On current [master](https://github.com/facebook/react-native/tree/8235a49a33cc8e84cd4ba1cc15bc09eed6712b4c), text input cursor resets to start when `secureTextEntry` prop toggles on Android. This motivate me to maintain position when `secureTextEntry ` prop toggles for better user experience.

On current [master](https://github.com/facebook/react-native/tree/8235a49a33cc8e84cd4ba1cc15bc09eed6712b4c)
![ezgif com-video-to-gif-3](https://user-images.githubusercontent.com/18511177/35776882-bdc3b182-09ca-11e8-8f4e-218fae0a24a1.gif)

On this PR
![ezgif com-video-to-gif-4](https://user-images.githubusercontent.com/18511177/35776883-be082d94-09ca-11e8-9424-6164110bdf03.gif)

[ANDROID] [BUGFIX] [TextInput] - Fix: cursor positions resets to start on toggling `secureTextEntry` prop.

<!--
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
-->
Closes https://github.com/facebook/react-native/pull/17851

Differential Revision: D6925711

Pulled By: hramos

fbshipit-source-id: 6d53ad2dbed2dca20cd21e5b1b0578be13a91aad
2018-02-07 11:03:31 -08:00
Sergei Dryganets 46cc4907e3 ClassCastException fix: getText() returns CharSequence not Spanned.
Summary:
ClassCastException fix: getText() returns CharSequence not Spanned.
From the other hand, EditTexts getText method returns Editable which extends Spanned.
This commit fixes two similar bugs one in flat TextView and another in standard TextView.
Also, it removes redundant checks in the ReactEditText.

Application without this change sporadically crashes with the following stack trace:
```
java.lang.ClassCastException: java.lang.String cannot be cast to android.text.Spanned
	at com.facebook.react.views.text.ReactTextView.reactTagForTouch(ReactTextView.java:195)
	at com.facebook.react.uimanager.TouchTargetHelper.getTouchTargetForView(TouchTargetHelper.java:269)
	at com.facebook.react.uimanager.TouchTargetHelper.findTargetTagAndCoordinatesForTouch$58866680(TouchTargetHelper.java:101)
	at com.facebook.react.uimanager.JSTouchDispatcher.handleTouchEvent(JSTouchDispatcher.java:77)
	at com.facebook.react.ReactRootView.dispatchJSTouchEvent(ReactRootView.java:151)
	at com.facebook.react.ReactRootView.onInterceptTouchEvent(ReactRootView.java:127)
	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2110)

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

Differential Revision: D6775986

Pulled By: hramos

fbshipit-source-id: 6de929937cbbb3e7bd98a708a40700f883cbaef0
2018-01-22 15:15:23 -08:00
Jonathan Kim 4f2cc42a2d Make xplat react native files buildable
Reviewed By: mzlee

Differential Revision: D6605611

fbshipit-source-id: baa33947319a27b95020924d177a9398a276dabe
2018-01-21 22:05:05 -08:00
Brandon Williams 164f6b6afd Unset phone and visible-password keyboardType flags on Android
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!

-->

Attempted fix for issue #17248

Added unit tests that cover the affected function and manually repeated the reproduction steps found in the issue.

Note: I had to apply the attached patch file to actually *run* the tests because they were not enabled. I didn't include this in the PR because it seemed like a secondary problem with possible ramifications (see comment near patched line) beyond this issue. For example, other, unrelated tests break when that line is uncommented.
[textInputTestEnable.patch.txt](https://github.com/facebook/react-native/files/1565807/textInputTestEnable.patch.txt)

If I should apply the patch to this PR or re-enable the tests in some other fashion, please let me know and I can do so.

(none)

<!--
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
-->

[ANDROID] [BUGFIX] [TextInput] - Fix an issue when swapping to and from the `'visible-password'` or `'phone-pad'` keyboard types.
Closes https://github.com/facebook/react-native/pull/17249

Differential Revision: D6713008

Pulled By: hramos

fbshipit-source-id: 85eeb5398748d48e59d33eb86d851fd02d587a31
2018-01-12 11:32:52 -08:00
Josh Hargreaves c9ff0bc212 Implement onKeyPress Android
Summary:
This implements onKeyPress for Android on TextInputs and addresses https://github.com/facebook/react-native/issues/1882.
**N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs.

I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :).
I think important to test this on the most popular keyboard types; maybe different languages too.
I have not yet added tests to test implementation, but will be happy to do that also.

- Build & run RNTester project for Android and open TextInput.
- Enter keys into 'event handling' TextInput.
- Verify that keys you enter appear in onKeyPress below the text input
- Test with autocorrect off, on same input and validate that results are the same.

Below is a gif of PR in action.
![onkeypressandroid](https://user-images.githubusercontent.com/1807207/27512892-3f95c098-5949-11e7-9364-3ce9437f7bb9.gif)
Closes https://github.com/facebook/react-native/pull/14720

Differential Revision: D6661592

Pulled By: hramos

fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
2018-01-04 12:51:38 -08:00
Shin-Kai Chen 29f3f55298 Do not overwrite the same text in ReactEditText
Differential Revision: D6516674

fbshipit-source-id: 246b8efeff7963912bf6b1c8a004c3103be03246
2017-12-11 21:45:37 -08:00
Jonathan Keljo 71006f74cd Fixes for migrating to Buck's source-only ABI feature
Reviewed By: dreiss

Differential Revision: D6475725

fbshipit-source-id: ac6725bbaaf2dbd78512a67497fbfcc044f59f60
2017-12-05 10:34:12 -08:00
Valentin Shergin 0bef872f3f TextInput: Fixed autoscroll to cursor on Android
Summary:
This feature was disabled for multiline textinputs in D3528202 ... seems without a good reason.
The broken autoscroll-to-cursor feature is terribly harmful and counter-intuitive in ALL cases.
I also add a contentSize tracking in the example app to make sure that it is unaffected by this change.

https://pxl.cl/9RHP

https://github.com/facebook/react-native/issues/12799
https://github.com/facebook/react-native/issues/15778

Special thanks to konradkierus!

Reviewed By: sahrens

Differential Revision: D6405985

fbshipit-source-id: 337a390a9db7b3528200ef66c4a079b87608294e
2017-11-27 16:46:43 -08:00
Gabriel Peal 1e18d907bf Prevent a crash when no cursor drawable is set
Summary:
React Native 0.43 added additional functionality to setSelectionColor that also tints the cursor drawable of the View. However, some views may not have a cursor drawable set in which case, the code will crash when attempting to load a drawable with resource id 0.

We encountered this in our RN 0.45 upgrade in the Airbnb app.

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

Differential Revision: D6386076

Pulled By: shergin

fbshipit-source-id: faa5a1edb3be8d08988f46205c0f22d17b63b5bc
2017-11-21 10:36:10 -08:00
Peter Ruibal 752b68857c Add visible-password for TextInput.keyboardType on Android
Summary:
`visible-password` represents a very basic keyboard, typically only
letters and numbers.  Backed by InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD,
it is useful for things like password and code entry fields. It can also be more
effective than autoCorrect={false} for disabling autocompletion on some keyboards
(like Gboard).

Note `secureTextEntry` also affects `TYPE_TEXT_VARIATION_*` flags internally, so there
may be some undefined behavior when combining `secureTextEntry` with
`keyboardType="visible-password"`

Also, while here, improve the documentation on TextInput to explicitly enumerate
which keyboardType applies to Android vs. iOS (since this is the first android-specific)

Reviewed By: shergin

Differential Revision: D6005353

fbshipit-source-id: 13af90c96353f714c0e106dd0fde90184a476533
2017-10-10 18:18:34 -07:00
Valentin Shergin cdea3c574b Fixed crash in ReactTextInputLocalData
Summary:
Motivation:

(SUDDENLY) There is a thing on Android called SpanWather, and their purpose is to notify "the watcher" about span-related changes in SpannableString. The idea is: some special kind of span can have some logic to prevent or tweak interleaving with some another kind of spans. To do so, it has to implement SpanWather interface.
So, EditText uses this to control internal spannable object (!) and SUDDENLY (#><) calls internal "layout" method as a reaction to adding new spans. So, when we are cloning SpannableString, we are (re)applying same span objects to a new spannable instance, and it causes notifying other spans in the string, and they notify EditText, and the EditText does relayout and... BOOM!
So, the solution is, easy, we should use SpannableStringBuilder instead of SpannableString because it does not notify SpanWather during cloning.

See:
https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/text/SpannableStringBuilder.java#101
(the first argument is `false`).
https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/text/SpannableStringBuilder.java#678
Compare with:
https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/text/SpannableStringInternal.java#43

Why? I believe because SpannableStringBuilder objects are "unfinished" by design, and documentation said: "it is the caller's responsibility to restore invariants [among spans]". As we do an exact clone of the string, that's perfectly okay to assume that all invariants were already satisfied for original string.

Reviewed By: achen1

Differential Revision: D5970940

fbshipit-source-id: 590ca0e3aede4470b809c7db527c5d55ddf5edb4
2017-10-03 17:37:45 -07:00
Valentin Shergin c550f27a4e Intrinsic content size for ReactTextInput (aka autoexpandable <TextInput> on Android)
Summary:
After this diff the intrinsic content size of <TextInput> reflects the size of text inside EditText,
it means that if there is no additional style constraints, <TextInput> will grow with containing text.
If you want to constraint minimum or maximum height, just do it via Yoga styling.

Reviewed By: achen1

Differential Revision: D5828366

fbshipit-source-id: eccd0cb4ccf724c7096c947332a64a0a1e402673
2017-10-02 16:31:18 -07:00
Adam King 4d54b48167 Fix onSubmitEditing dispatch behavior with blurOnSubmit/multiline combinations.
Summary:
Fixes https://github.com/facebook/react-native/issues/15863 on master. Behavior of `onSubmitEditing` is now consistent between iOS and Android. Tapping the submit button in a TextInput dispatches the event precisely when doing so does not make a newline (when blurOnSubmit is true or multiline is false).

1. Run this app on iOS and Android:
```
// flow

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View
} from 'react-native';

type State = {
  toggled: boolean
};

type Props = {
  blurOnSubmit: boolean,
  multiline: boolean
};

class ToggleColorInput extends Component<Props, State> {
  state: State = {
    toggled: false
  };

  props: Props;

  toggle = () => {
    this.setState({
      toggled: !this.state.toggled
    });
  }

  render() {
    return (
      <TextInput
        blurOnSubmit={this.props.blurOnSubmit}
        multiline={this.props.multiline}
        onSubmitEditing={this.toggle}
        style={[styles.textInput, {backgroundColor: this.state.toggled ? 'blue' : 'azure'}]}
        underlineColorAndroid='transparent'
      />
    )
  }
}

export default class App extends Component<{}> {
  render() {
    return (
      <View>
        <ToggleColorInput blurOnSubmit={true} multiline={true} />
        <ToggleColorInput blurOnSubmit={true} multiline={false} />
        <ToggleColorInput blurOnSubmit={false} multiline={true} />
        <ToggleColorInput blurOnSubmit={false} multiline={false} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textInput: {
    height: 75,
    borderWidth: 1,
    borderColor: 'black'
  }
});
```
2. You see four TextInputs, with each combination of the `blurOnSubmit` and `multiline` properties. For each TextInput, type some text and tap the submit button.
3. The TextInputs in this test will toggle background color when they emit an `onSubmitEditing` event. Verify the following behavior on each platform:
 * blurOnSubmit && isMultiline => Submit event emitted, blurred, no newline inserted
 * blurOnSubmit && !isMultiline => Submit event emitted, blurred
 * !blurOnSubmit && isMultiline => Submit event emitted, newline inserted
 * !blurOnSubmit && !isMultiline => Submit event emitted
Closes https://github.com/facebook/react-native/pull/16040

Differential Revision: D5877401

Pulled By: shergin

fbshipit-source-id: 741bcc06d8b69d7025f2cb42dd0bee4fa01cd88e
2017-09-20 16:33:14 -07:00
David Vacca 5180995666 Fix setBackground for Android sdk version 15 and below
Reviewed By: achen1

Differential Revision: D5854430

fbshipit-source-id: 1276f3d7e94b757f9a9dd412a2ef8b72e8427ffb
2017-09-19 09:39:45 -07:00
Brian Vaughn 75c94a8907 Native view manager event types exposed to JS via view config
Differential Revision: D5814210

fbshipit-source-id: 41291f0d6b39af77f66173f6a699d88f9f4ccc74
2017-09-14 18:17:17 -07:00
Ramanpreet Nara adb6646016 Make <TextInput multiline> default blurOnSubmit to false.
Reviewed By: achen1

Differential Revision: D5830633

fbshipit-source-id: 3d0880656f14cfafa0f15c4341021799f20f40ed
2017-09-14 11:30:58 -07:00
Valentin Shergin 80027ce6db ReactRawTextShadowNode does not inherit ReactTextShadowNode anymore
Summary:
ReactRawTextShadowNode represents "raw" text node (aka textContent), so it cannot have layout or styling, it is just a line of text, a pure string.
So, we must not interit it from HUGE ReactTextShadowNode (which represents <Text> node with ReactRawTextShadowNode instance inside).
We need this change to make future fancy (and valuable from product perspective) refactoring possible. Stay tuned!

Reviewed By: achen1

Differential Revision: D5712961

fbshipit-source-id: 009e48046bdf34ddfd40b93175934969af64b98b
2017-09-11 15:49:01 -07:00
Valentin Shergin d2f3a7282b Bikeshedding in ReactTextInputShadowNode, part 2
Reviewed By: AaaChiuuu

Differential Revision: D5712962

fbshipit-source-id: b0cb5dbbd93b661252e5ddcf6c0a34e59cb7f2c6
2017-09-06 17:23:41 -07:00
Valentin Shergin 5f1f0b14f0 Bikeshedding in ReactTextInputShadowNode
Reviewed By: AaaChiuuu

Differential Revision: D5712963

fbshipit-source-id: 87c8394d82e0c206f908fb07eb8b7464b0ecabaf
2017-09-06 17:23:41 -07:00
Rene Weber 94a2ff93db Force original ime option when using multiline with blurOnSubmit in a…
Summary:
…ndroid

Android overrides the original set ime option when the EditText is a multiline one.
This change makes sure to set it back to the original one when blurOnSubmit is true,
which causes the button icon to be conforming to the set returnKeyType as well as
changing the behaviour of the button, such that it will blurOnSubmit correctly.

The reason not do it with blurOnSubmit being false is
because it then would not create new lines when pressing the submit button,
which would be inconsistent with IOS behaviour.

**Note** this change relies on this one #11006 because the app would crash if we don't expllicitly remove the focus (`editText.clearFocus();`)

Fixes #8778

**Test plan (required)**

1. Create view with TextInput with multiline and blurOnSubmit set to true
```javascript
<View>
           <TextInput
                returnKeyType='search'
                blurOnSubmit={true}
                multiline={true}
                onSubmitEditing={event => console.log('submit search')}></TextInput>
</View>
```

2. Input some text and click submit button in soft keyboard
3. See submit event fired and focus cleared / keyboard removed
Closes https://github.com/facebook/react-native/pull/11125

Differential Revision: D5718755

Pulled By: hramos

fbshipit-source-id: c403d61a8a879c04c3defb40ad0b6689a2329ce1
2017-08-28 12:15:30 -07:00
Kevin Luvian e6941990ef Fixed new line and prioritise blurOnSubmit in multiline text input
Summary:
What existing problem does the pull request solve?
this fixes #13506 and #12717 where:
- there are some issues when pressing enter with some keyboard
- blurOnSubmit is not working with multiline

I think this should be in stable branch as this is pretty critical, isn't it?

- just create a TextInput with multiline and press enter with samsung keyboard
before, it won't create a new line, now it will.

- just create a TextInput with multiline and blurOnSubmit true and press enter
before, it won't blur, and wont create a new line (on some keyboard, it will create a new line), now it will blur only
Closes https://github.com/facebook/react-native/pull/13890

Reviewed By: achen1

Differential Revision: D5333464

Pulled By: shergin

fbshipit-source-id: a0597d1b1967d4de1486e728e03160e1bb15afeb
2017-07-09 15:34:10 -07:00
Alexander Komissarov 1ab96fd077 Converting android support library dependencies to be provided_deps in React Native.
Reviewed By: bestander

Differential Revision: D5326236

fbshipit-source-id: 3f2ca43a78c4c868ed6665b4d9f61630631f9502
2017-07-05 19:15:22 -07:00
Wenjia Ma f954f3d9b6 Add velocity to onScrollEndDrag event
Reviewed By: achen1

Differential Revision: D5330215

fbshipit-source-id: e45a302b325c38294324f4f384a5604355dc05aa
2017-06-27 15:57:00 -07:00
Andrew Y. Chen 076eaec805 Revert D5238126: Add velocity to onScrollEndDrag event
Differential Revision: D5238126

fbshipit-source-id: a8b5f9445fa15a0ef0851303961dbf63b5d46623
2017-06-23 19:02:27 -07:00
Wenjia Ma d4cda7168f Add velocity to onScrollEndDrag event
Summary:
1. Calculated the fling slow down velocity using OnScrollDispatchHelper
2. Calculated the END_DRAG velocity using velocity tracker in VelocityHelper.
3. Change the interface of ReactScrollViewHelper to pass velocity on x & y.

Pending future work:
Calculate the velocity of BEGIN_DRAG, MOMENTUM_BEGIN and MOMENTUM_END
Add threshold in ScrollResponder.js instead of checking x & y velocity equal zero

Reviewed By: achen1

Differential Revision: D5238126

fbshipit-source-id: 35fb70dda8ab66cd152413cb9c1c041354f1c061
2017-06-23 14:00:57 -07:00
Valentin Shergin bac84ce207 BREAKING: Better TextInput: contentSize property was removed from <TextInput>.onChange event (Second attempt)
Summary:
`contentSize` was removed from both iOS and Android, tests was updated.
USE `onContentSizeChange` INSTEAD.

Why?
 * It always was a hack;
 * We already have dedicated event for it: `onContentSizeChange`;
 * `onChange` has nothing to do with layout actually;
 * We have to maintain `onChange` handler as fast and simple as possible, this feature complicates it a lot;
 * It was undocumented feature;
 * We already have native auto-expandable <TextInput>, so it illuminates 99% current use cases of this feature.

Reviewed By: mmmulani

Differential Revision: D4989881

fbshipit-source-id: 674bb98c89ada1fca7b3b20b304736b2a3b8304e
2017-05-28 20:16:04 -07:00
Valentin Shergin 35393524a9 Fixed <TextInput>.onContentSizeChange on Android
Summary:
Previously <TextInput>'s onContentSizeChange event fires very rearly, usually just once after initial layout. This diff fixed that.
I also considered to a bunch of another things to get the native notification, but I found that overriding `onTextChanged` is the most reliable, easy and effitient way to implement this.

I tried/considered:
 * onLayout (does not fire)
 * OnPreDrawListener (fires to often)
 * OnGlobalLayoutListener (does not fire)
 * OnLayoutChangeListener (does not fire)
 * isLayoutRequested (too hacky)

(I also fixed the <AutoExpandingTextInput> demo to illustrate the fix.)

And just heads up, we will remove `contentSize` info from `onChange` event very soon.

GH issue: https://github.com/facebook/react-native/issues/11692

Reviewed By: achen1

Differential Revision: D5132589

fbshipit-source-id: e7edbd8dc5ae891a6f4a87b51d9450b8c6ce4a1e
2017-05-25 19:31:31 -07:00
Andrew Y. Chen 864c9f5248 Revert D5080735: [rn] Fix copy paste second attempt
Differential Revision: D5080735

fbshipit-source-id: 1783dddcf467c0103007db35643dc42bf8c526f4
2017-05-25 18:49:10 -07:00
Valentin Shergin f085d2bac0 Fixed small bag in computing contentSize of TextInput
Reviewed By: AaaChiuuu

Differential Revision: D5091491

fbshipit-source-id: ece8ac30b930aafc32a7994057d305025e4b032e
2017-05-19 11:37:27 -07:00
Andrew Y. Chen 6c4e8d74cd Fix copy paste second attempt
Reviewed By: AaaChiuuu

Differential Revision: D5080735

fbshipit-source-id: c76fb204c114b8a8fc884aa208ad5fa9bba01fcb
2017-05-18 09:46:04 -07:00
Ravi Bhoraskar bf0a95d338 Backed out changeset 8841a5719494 (D4944482)
Reviewed By: sahrens

Differential Revision: D4981286

fbshipit-source-id: 5b17ba93ee43a0a46f98f47b6fb8a779180ab4b6
2017-05-02 12:16:00 -07:00
Valentin Shergin f73464851b Revert D4680300: [RN] BREAKING: Better TextInput: contentSize property was removed from <TextInput>.onChange event.
Differential Revision: D4680300

fbshipit-source-id: 20f7299c53cc54215fb333e97d7e11de087e303d
2017-05-01 21:15:44 -07:00
Valentin Shergin 99e24ecc67 BREAKING: Better TextInput: contentSize property was removed from <TextInput>.onChange event.
Summary:
`contentSize` was removed from both iOS and Android, tests was updated.
USE `onContentSizeChange` INSTEAD.

Why?
 * It always was a hack;
 * We already have dedicated event for it: `onContentSizeChange`;
 * `onChange` has nothing to do with layout actually;
 * We have to maintain `onChange` handler as fast and simple as possible, this feature complicates it a lot;
 * It was undocumented feature;
 * We already have native auto-expandable <TextInput>, so it illuminates 99% current use cases of this feature.

Reviewed By: mmmulani

Differential Revision: D4680300

fbshipit-source-id: 337836deef0767e5f26350f5a8ce73adb4146a02
2017-04-30 23:02:25 -07:00
Andrew Y. Chen 86dd77f924 Fix copy paste
Reviewed By: andreicoman11

Differential Revision: D4944482

fbshipit-source-id: 8841a57194943ced489a2d8b0c634b3befcce1d7
2017-04-25 11:35:33 -07:00
Emil Sjolander 2030c78355 Remove references to CSSLayoutDEPRECATED
Reviewed By: marco-cova

Differential Revision: D4859822

fbshipit-source-id: 2588c1b3334f28332ae43e6c0bdec65934ca84c4
2017-04-13 12:52:38 -07:00
Andy Street dfe09db990 Safely fix underline TextInput
Summary: Resubmit of https://github.com/facebook/react-native/pull/12493 factoring in the AOSP bug here: https://code.google.com/p/android/issues/detail?id=191754

Reviewed By: achen1

Differential Revision: D4627575

fbshipit-source-id: 8a984852db54be98bd6e781a4d00854d7d0dca68
2017-03-03 03:49:47 -08:00
Andy Street 0884c3e3d1 Revert D4620034: [react-native][PR] Fix: set underlineColorAndroid properly
Differential Revision: D4620034

fbshipit-source-id: edb589ace310008866d8d4df5fbf00e785976402
2017-02-28 03:32:55 -08:00
Swordsman-Inaction 8b01508410 Fix: set underlineColorAndroid properly
Summary:
This PR fixes #6332

The issue is that Android Framework will return the same drawable instance for all requests if they request for the same resource. So the changes on the drawable instance will affect all users(`TextInput` in this case). The solution is very easy, call `mutate()` before change it will get a new drawable instance which make sure the change doesn't affect other users.
Closes https://github.com/facebook/react-native/pull/12493

Differential Revision: D4620034

Pulled By: astreet

fbshipit-source-id: a7b10fbc7447e01132b7ca0e1f78413796493e07
2017-02-27 14:04:57 -08:00
Michael Bolin 48cb932c6e Apply auto-formatter for BUCK files in fbandroid.
fbshipit-source-id: 278ce6f67f5df830b2218e3aca69be103d3c56a6
2017-02-27 14:04:56 -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