There is an issue for using TextInput on android in react native

Question

I have a issue for using the TextInput on android in react native I have use following code.

export default class App extends Component { render() { return (

  </View>
);

} }

then screen is follow:

screenshot before tap TextInput

When I tap TextInput view then screen is comes up like using keyboardavoidingview.

screenshot after tap TextInput

it's on android, but on ios there is no any effect. I have no use any other component.

My package.json is following:

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-native-gesture-handler": "^1.0.10",
    "react-native-indicators": "^0.13.0",
    "react-native-maps": "^0.22.1",
    "react-native-maps-directions": "^1.6.0",
    "react-native-modal": "^7.0.1",
    "react-navigation": "^3.0.4"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

On Android why there is an effect like as using KeyboardAvoidingView although I never use that component? And why it is ok on ios? I'm very happy to hear your advance. Thanks.

Answer 1

Whenever you use TextInput it is recommended you use a Scrollview as a parent view of it with a prop keyboardShouldPersistTaps="always" . This will create uniformity whenever keyboard pops up.

Edited :

<View style={{flex:1}}>
    <ScrollView keyboardShouldPersistTaps="always">
      <View style={{paddingTop:20}}> //Inside ScrollView flex doesn't work so use padding to control spacing 

          // Add your <TextInput> Tag here !!

       </View>
     </ScrollView>
</View>

I Hope I could help you.