Fix TextInput Cursor jumping to the right when the placeholder null (#…

…28995)

Summary:
This issue fixes #28794 fixes #27658
Flow type ?Stringish allows to set the placeholder value to null. The null value causes the cursor to jump to the right in a TextInput. The fix replaces the placeholder null value with an empty string which avoid calling setHint(null) as causes the placeholder to jump to the right.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - avoid calling setHint with a null parameter causing cursor to jump to the right

Pull Request resolved: #28995

Test Plan:
**<details><summary>CLICK TO OPEN TESTS RESULTS (28 May 2020 20a9473)</summary>**
<p>

More videos and information included in issue #28794
The below test cases are from the [following repository](https://github.com/fabriziobertoglio1987/AwesomeProject)

| **BEFORE** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/83123470-3e2f8000-a0d5-11ea-8718-11e6a0575a0c.gif" />|

| **AFTER** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/83123554-599a8b00-a0d5-11ea-9701-6557f0d76044.gif" />|

Extensive testing on `RNTester` did not identify any regression.

| **AFTER** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/83123586-628b5c80-a0d5-11ea-92eb-449d499dcc7d.gif" />|

</p>
</details>

**<details><summary>CLICK TO OPEN TESTS RESULTS (15 February 2021 https://github.com/facebook/react-native/pull/28995/commits/20a9473aaa330ad9b6e7a0b42ebd9c4ed41ce60b)</summary>**
<p>

| **BEFORE** |
|:-------------------------:|
| <video src="https://user-images.githubusercontent.com/24992535/107960803-5d44a980-6fa5-11eb-90e2-f0d665e35291.mp4" />|

| **AFTER** |
|:-------------------------:|
| <video src="https://user-images.githubusercontent.com/24992535/107960602-1f478580-6fa5-11eb-8f39-b985fafa6a6c.mp4" />|

</p>
</details>

Reviewed By: charlesbdudley

Differential Revision: D30095877

Pulled By: lunaleaps

fbshipit-source-id: 38a3e788443a22d48a4335063cd4315638bd8e97

Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -23,7 +23,6 @@ import type {
   ViewStyleProp,
   ColorValue,
 } from '../../StyleSheet/StyleSheet';
-import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
@@ -415,7 +414,7 @@ export type NativeProps = $ReadOnly<{|
   /**
    * The string that will be rendered before text input has been entered.
    */
-  placeholder?: ?string,
+  placeholder?: ?Stringish,
 
   /**
    * The text color of the placeholder string.

Libraries/Components/TextInput/TextInput.js

@@ -1163,6 +1163,7 @@ function InternalTextInput(props: Props): React.Node {
   } else if (Platform.OS === 'android') {
     const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
+    const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
     invariant(
@@ -1205,6 +1206,7 @@ function InternalTextInput(props: Props): React.Node {
          * to get fixed */
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
+        placeholder={placeholder}
         selection={selection}
         style={style}
         text={text}

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

@@ -459,7 +459,7 @@ public void setAllowFontScaling(ReactEditText view, boolean allowFontScaling) {
   }
 
   @ReactProp(name = "placeholder")
-  public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
+  public void setPlaceholder(ReactEditText view, String placeholder) {
     view.setHint(placeholder);
   }