Slide up fixed footer with input text when keyboard appears

Question

I'm trying to slide up some part of my app.

I searched for some info and I found out this post here in Stackoverflow -> How to auto-slide the window out from behind keyboard when TextInput has focus?

The thing is that my app is a little bit different and I don't know where to put the Scrollview tags.

I got this distribution:

<View style={ styles.container }>
  <View style={ styles.header }>
    <View style={ styles.headerTextContainer }>
      <Text style={ styles.headerText } onPress={() => this.refs.listView.getScrollResponder().scrollTo(0) }>Parte { this.props.partNumber } - { this.state.totalComments } comentarios</Text>
    </View>
  </View>

  <ListView 
        dataSource={this.state.dataSource} 
        renderRow={this.renderComment}
        style={ styles.content } 
        ref="listView" />

  <View style={ styles.footer }>
    <View style={ styles.footerTextInputContainer }>
      <TextInput
        style={ styles.footerTextInput }
        onChangeText={(text) => console.log(text) }
        placeholder="Escribe un comentario" />
    </View>

    <TouchableHighlight onPress={() => console.log("SEND COMMENT") } underlayColor="#ffffff">
      <View style={ styles.footerSendButtonContainer }>
        <Text style={ styles.footerSendButton }>Enviar</Text>
      </View>
    </TouchableHighlight>
  </View>
</View>

The only thing I want to slide up when keyboard appears is the footer View.

I hope someone can help me out.

Thank you :)

JV Lobo JV Lobo · Accepted Answer · 2016-01-26T20:37:30

I was be able to do it by using this component: react-native-keyboard-spacer

Thanks!

Slide up fixed footer with input text when keyboard appears

1 Answers