1

I'm trying to create an iMessage like sticky text input where the ScrollView content moves up when the keyboard is shown and down when the keyboard is dragged closed. In the React Native repository on Github, there is an example InputAccessoryViewExample.js that is almost exactly what I want, except when the keyboard is shown, ScrollView's content (the messages) are covered by the keyboard.

I've tried a few permutations of the following with no success.

      <>
        <KeyboardAvoidingView style={{flex: 1}} behavior="padding">
          <ScrollView style={{flex: 1}} keyboardDismissMode="interactive">
            {Array(15)
              .fill()
              .map((_, i) => <Message key={i} />)}
          </ScrollView>
        </KeyboardAvoidingView>
        <InputAccessoryView backgroundColor="#fffffff7">
          <TextInputBar />
        </InputAccessoryView>
      </>
Courtney Pattison
  • 1,596
  • 2
  • 19
  • 27
  • KeyboardAvoidingView is notoriously janky. It might be easier to just build your own native implementation – Kai Mar 05 '19 at 23:04
  • Can you tried to add android:windowSoftInputMode="adjustPan" to your activity tag into androidManifest.xml ? (you need to rebuild your app, not only the js) – Alexandre Nicolas Mar 05 '19 at 23:37
  • I have been using [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view), hope it helps you too – wicky Mar 06 '19 at 04:15
  • 1
    @Kai I have tried my own implementation that works for other cases, but it uses the same idea as KeyboardAvoidingView (I just add a few Keyboard listeners and adjust the padding bottom). – Courtney Pattison Mar 06 '19 at 17:46
  • @Kornflexx Sorry, I should have mentioned that I'm just doing this for ios. – Courtney Pattison Mar 06 '19 at 17:46
  • @wicky That package doesn't seem to work in this case: I want the text input to be stuck to the keyboard, not become the focus after the keyboard is shown. – Courtney Pattison Mar 06 '19 at 17:49

0 Answers0