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 :)

score 1 · Accepted Answer · answered Jan 26 '16 at 20:37

1

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

Thanks!

answered Jan 26 '16 at 20:37

JV Lobo

5,526
8
34
55

score 0 · Answer 2 · answered Sep 24 '22 at 17:03

This is my solution:

const [keyboardHeight, setKeyboardHeight] = useState("10%");

 useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        setKeyboardHeight("15%"); // or some other action
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardHeight("10%"); // or some other action
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

And in the view:

<View style={[globalStyles.footer, {height: keyboardHeight}]}>
//PUT YOUR VIEW FOOTER HERE

</View>

Slide up fixed footer with input text when keyboard appears

2 Answers2