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.

Ron Astle Lobo · Accepted Answer · 2018-12-03 07:25:56Z

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.

edited Dec 3, 2018 at 7:25

answered Dec 3, 2018 at 6:29

Ron Astle Lobo

1,3142 gold badges14 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Water Flower Over a year ago

Hi, Ron. I'm very happy to hear your answer. As u can see my screenshots when tapping the TextInput then this component layout is change and I don't like this. and could u share example code for me?

Ron Astle Lobo Over a year ago

I Edited. Do check

Water Flower Over a year ago

It works well. Thank you very much. I hope you will help me in future.

Ron Astle Lobo Over a year ago

Hey @WaterFlower, as you are a new contributer to Stack Overflow. For answers you are completely satisfied with, It would be great if you could tick mark or upvote for those answers only. This will help to encourage the community to be more involved. Thank you.

Water Flower Over a year ago

Yes. I'm new to StackOverflow. Could you tell me how can I tick mark or upvote for your answer?

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related