CODEWITHSUNDEEP
javascriptreact-nativekeyboardscrollview
EDJ
EDJ

Reputation: 1023

React Native - FlatList unable to reach bottom

I have a panel in which the keyboard is always up since I do not wish the users to dismiss it. In that panel I have a FlatList which looks like this:

<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?

Upvotes: 7

Views: 3012

Answers (2)

diogenesgg
diogenesgg

Reputation: 2859

I've been to a similar situation. I had a bottom Floating Action Button at the lower right corner, hiding the last item a bit.

So, I added a fake blank item to the end of the list so that I could scroll it up a bit more.

It's simple and tricky. I hope it works for you as well, if you add a few blank itens or one wide enough blank item.

EDIT 1:

Suppose your data array is something like this: [{title: "Item 1"}, {title: "Item 2"}]

You have to concat the new blank item to the data array while passing it to the <FlatList>, like this:

<FlatList
   keyboardShouldPersistTaps="handled"
   data={this.state.examples.concat({title:"\n\n\n\n\n"})}
   keyExtractor={(item, index) => index.toString()}
   renderItem={this._renderItem}
   contentContainerStyle={{ flex: 1}}/>

Adjust the amount of "\n" until you can scroll the list to be visible. There must be a minimum amount. And make sure your _renderItem don't set the item hight to a fixed value.

Upvotes: 1

zhou Dai
zhou Dai

Reputation: 341

You can add a keyboard listener event to get the height of the keyboard.

this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
  this.setState({ keyboardHeight: e.endCoordinates.height, keyboardShow: true })
  Animated.timing(this.visibleHeight, {
    duration: e.duration,
    toValue: 1,
    easing: Easing.inOut(Easing.ease)
  }).start()
})

View code like this

<Animated.View style={Platform.OS === 'android' ? { flex: 1 } : {
      height: this.visibleHeight.interpolate({
        inputRange: [0, 1],
        outputRange: [height - this.NavHeaderHeight, height - this.state.keyboardHeight - this.NavHeaderHeight]
      })
    }
    } >
     /*Your FlatList*/
</Animated.View>

I hope it works for you

Upvotes: 4

Related Questions