javascript - React Native - FlatList unable to reach bottom - Stack Overflow

admin管理员组

文章数量:1022793

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?

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?

• javascript
• react-native
• keyboard
• scrollview

Share Improve this question Follow edited Mar 9, 2019 at 23:18 EDJ asked Mar 5, 2019 at 23:08 EDJEDJ 1,03344 gold badges2121 silver badges4343 bronze badges 2

• Can you tried to add android:windowSoftInputMode="adjustPan" to your activity tab into your androidManifest.xml ? – Alexandre Nicolas Commented Mar 5, 2019 at 23:36
• @Kornflexx I am experiencing this on iOS. – EDJ Commented Mar 5, 2019 at 23:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +100

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

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.

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?

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?

• javascript
• react-native
• keyboard
• scrollview

Share Improve this question Follow edited Mar 9, 2019 at 23:18 EDJ asked Mar 5, 2019 at 23:08 EDJEDJ 1,03344 gold badges2121 silver badges4343 bronze badges 2

• Can you tried to add android:windowSoftInputMode="adjustPan" to your activity tab into your androidManifest.xml ? – Alexandre Nicolas Commented Mar 5, 2019 at 23:36
• @Kornflexx I am experiencing this on iOS. – EDJ Commented Mar 5, 2019 at 23:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +100

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

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.

本文标签： javascriptReact NativeFlatList unable to reach bottomStack Overflow