Search code examples
react-nativekeyboardtextinput

React native textinput multiline is not being pushed up by keyboard


I have a TextInput with multiLine true. However, after two lines the text disappear behind the keyboard. I have tried wrapping the TextInput in KeyboardAvoidingView, but it doesn't work.

The keyboard does push up the TextInput when I unfocus the TextInput and then click on the bottom line. Any idea how I can make the last line of the TextInput stay on top of the keyboard?

The code:

<View style={styles.descriptionFlexStyle}>
    <Text
       style={[
         styles.headerTextStyle,
         { marginTop: Window.height * 0.04 }
        ]}> Please fill in a reason </Text>
        <ScrollView>
          <TextInput
            style={styles.reasonTextInput}
            placeholder="Reason"
            value={reasonText}
            multiline={true}
            onChangeText={input =>
               this.setState({
                   reasonText: input
               })
            }
            underlineColorAndroid="transparent"
            ref="reasonTextInput"
            />
    </ScrollView>
</View>

Solution

  • Ok i have finally solved it using "KeyboardAvoidingView". I did two things. First i removed the height on my TextInput and then i set the behavior attribute on the "KeyboardAvoidingView" to "padding". Works perfect for me now. Let me know if this help! :)