React Native – FlatList scroll to bottom with keyboard up

user_8816232 0
Viewed 2684
<KeyboardAvoidingView style={{ flex: 1 }}>
  <FlatList
     // This keeps the keyboard up and disables the user's ability to hide it.
     keyboardShouldPersistTaps="handled"
     data={this.state.examples}
     keyExtractor={(item, index) => index.toString()}
     renderItem={this._renderItem}
     contentContainerStyle={{ flex: 1}}
  />
</KeyboardAvoidingView>

So far so good, I have achieved what I wanted. However, when the keyboard is up – it hides the bottom part of the items rendered by the FlatList. And users cannot scroll up and view the last items because they stay behind the keyboard. How can I preserve the Keyboard opened (and disable the ability to be dismissed) whilst being able to view and scroll through the whole content of the FlatList?

react-native-flatlist react-native
1 Answers

I believe you are facing this problem in ios. For keyboard handling with flat list, you can try react-native-keyboard-aware-scroll-view.

you can preserve keyboard from closing by adding this property with keyboard-aware-scroll-view.

keyboardShouldPersistTaps={"handled"}

Try this property with KeyboardAwareScrollView

refer the below snippet

 <KeyboardAwareScrollView
            keyboardShouldPersistTaps={"handled"}
            extraScrollHeight={Platform.OS == "ios" ? hp("4%") : hp("0%")}
            extraHeight={Platform.OS == "ios" ? hp("9%") : 0}
            style={{ flex: 1, backgroundColor: "white" }}
            behavior={Platform.OS == "ios" ? "position" : null}
            resetScrollToCoords={{ x: 0, y: 0 }}
            scrollEnabled={false}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            keyboardOpeningTime={1}
            enableOnAndroid={true}
            contentContainerStyle={{ flex: 1 }}
          >
       <View style = {{
          flex: 1,
          height: .. }}>
          <FlatList 
            ... />
      </View >

</KeyboardAwareScrollView>

Still facing the issue, don't hesitate to revert back to me.

user_89803760
Related