React Native: Keyboard blocks multiline textInput when adjusting its view's height

Question

I've been trying to make a growing textinput with multiple lines now for a while, and is now finding my app in a situation where the keyboard blocks the text when entering a new line on the textinput. I've tried solutions ranging from KeyboardAwareScrollView-based solutions to ScrollView solutions, but alas nothing I've tried yet have worked.

I would really appreciate if someone could provide me with a solution that works for both android and iOS.

What I have now is a view with a textinput with multiline prop

<View style={{ height: this.state.height, flex: 1 }}>
  <TextInput
    {...otherProps}
    placeholder="Skriv här"
    placeholderTextColor="rgba(0,0,0,0.3)"
    blurOnSubmit={false}
    multiline
    onContentSizeChange={this._onContentSizeChange}
    style={[styles.textInputStyle, { height: this.state.height }]}
  />
</View>

with the _onContentSizeChange function as follows:

_onContentSizeChange = (event): void => {
  const height = event.nativeEvent.contentSize.height;
  this.setState({ height });
}

Problem illustrated with pictures: imgur album

Answer 1

KeyboardAvoidingView seems to be the solution for you. You can set the distance between your view and the keyboard and calculate it with the height of your input. In the docs you find all properties: https://facebook.github.io/react-native/docs/keyboardavoidingview.html

You can also try using KeyboardAvoidingScrollView, then when your input is high enough you just scroll down the screen.

Here's an awesome article with great examples of keyboard avoids: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

Hope it helps.