Search code examples
react-nativekeyboard

React-Native how to use KeyboardAvoidingView

Both the header and the chat container move-up when I start typing some message.

I have tried to use KeyboardAvoidingView inside my view container, however, it did not work, I'm not sure if the KeyboardAvoidingView is the best solution to control the keyboard inside the view and not familiar with it.

Below is my code:

render() {
const { myName, user, nome, message } = this.props;
return (
  <View style={STYLES.main}>

    <Animatable.View
      style={STYLES.container}
      animation={FADEIN}
      easing='ease-in'
      duration={1000}
    >
      <RenderHeader3 press={() => Actions.detalhes()} hcolor={'#298CFF'} color={'#FFF'} text={nome} icon={null} isize={null} />

      <ScrollView contentContainerStyle={{ paddingHorizontal: 10, paddingTop: 5 }}>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={null}
          keyboardVerticalOffset={60}
        >
          <ListView
            enableEmptySections
            dataSource={this.dataSource}
            renderRow={this.renderRow}
          />
        </KeyboardAvoidingView>
      </ScrollView>

      <View style={{ flexDirection: 'row', backgroundColor: '#1A1C27', padding: 10 }}>
        <View style={{ flex: 4 }}>
          <TextInput
            style={[STYLES.titleTxt, { color: '#000', backgroundColor: '#FFF', borderRadius: 40, paddingLeft: 13, paddingRight: 10 }]}
            multiline
            value={message}
            onChangeText={(texto) => this.props.modificaMensagem(texto)}
          />
        </View>
        <View style={{ justifyContent: 'center', alignItems: 'center', paddingLeft: 10 }}>
          <TouchableOpacity
            style={{
              height: 40,
              width: 40,
              borderRadius: 40,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#298CFF',
              paddingRight: 2
            }}
            activeOpacity={0.5}
            onPress={() => this.props.createChat(myName, user, nome, message)}
          >
            <CustomIcon
              name='paper-plane'
              size={25}
              color='#FFF'
            />
          </TouchableOpacity>
        </View>
      </View>

    </Animatable.View>

  </View>
);

} }

Component before start typing The Header and the chat scrollView moved-up result with behavior='height'

Solution

  • make this changes

    <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior="height"
          keyboardVerticalOffset={60}
        >

    source