10

The problems statement is similar to this question

But I am looking for some pointers to implement the same with react-native.

I am building a chat window (like iMessage, whatsapp) where messages(ListView) come on top with a sticky footer containing a TextInput.

I am able to get a sticky footer, but when someone tries to enter text with TextInput in footer, the keyboard hides the TextInput. I tried approaches mentioned in this post, but none seem to work because of presence of ListView above.

Here is what my current layout code looks like:

<View style={styles.container}>
          <ListView
            automaticallyAdjustContentInsets={false}
            keyboardDismissMode="on-drag"
            keyboardShouldPersistTaps={true}
            showsVerticalScrollIndicator={false}
          />
          <View style={styles.textContainer}>
                 <TextInput/>
          </View>
  </View>
Community
  • 1
  • 1
Aakash Bapna
  • 333
  • 3
  • 9
  • have another view below the view with the text input. on focus on text input, increase the height of the the bottom view equal to the height of the keyboard. – boredgames Oct 08 '15 at 10:07
  • Will absolute positioning work or would the ListView have to move up as well? – Joshua Pinter Apr 30 '16 at 16:18
  • I would like to see if there's any best practice on doing this which cover both IOS and Android platform too! – TeYoU Oct 07 '16 at 08:27
  • Maybe will be helpful after you read this https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/InputToolbar.js#L25 You can see the input component is not always position absolute. And this library works perfectly in iOS and Android. – Tyreal Gray Dec 15 '17 at 12:19

0 Answers0