How to handle when keyboard display on TextInput in react native

Question

I am new in react native.

I have my form like this

<View style={{flex:1, flexDirection='row'}}>
  <View style={flex:1, flexDirection='column', justifyContent='center}}> //left

    <View style={{flex:1}}>
      <TextInput placeholder='TEST' />
    </View>

  </View>

  <View style={flex:1, flexDirection='column', justifyContent='center' }}> //right

    <View style={{flex:1}}>
      <TextInput placeholder='TEST' />
    </View>

  </View>
</View>

My form has 2 side left and right.

when I run npm start (I started by create-rect-native-app) in simulator.

then I click input tab. iOS's keyboard appear and lap to the input tab.

When I type something, I can't see what happen in input tab.

Is there any solution without using ScrollView?

Thank you

Answer 1

you can wrap all with KeyboardAvoidingView it will take care of moving input when keyboard showed

<KeyboardAvoidingView behavior="padding"  style={{flex:1, flexDirection:'row'}} >
    <View style={{flex:1, flexDirection:'column', justifyContent:'center' }} >

      <View style={{flex:1}}>
        <TextInput placeholder='TEST' />
      </View>

    </View>

    <View style={{flex:1, flexDirection:'column', justifyContent:'center' }}>

      <View style={{ flex:1 }}>
        <TextInput placeholder='TEST' />
      </View>

    </View>
  </KeyboardAvoidingView>