How to use KeyboardAvoidingView with FlatList?

Question

I have a FlatList component with an Input inside each row. When I select the input I want it to scroll up above the keyboard.

My code:

return (   <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} >     <FlatList       style={{ flex: 1, backgroundColor: '#fff' }}       data={ds}       renderItem={({ item }) => <ListItem data={item} />}       ListFooterComponent={this.renderButton}     />   </KeyboardAvoidingView> ); 

In this scenario, the FlatList is never loaded. When I delete flex:1 from both components, FlatList renders properly but selecting an Input does not make it scroll up

Answer 1

You can trying using react-native-keyboard-aware-scroll-view

https://github.com/APSL/react-native-keyboard-aware-scroll-view

It comes with KeyboardAware[ScrollView, ListView, SectionView, FlatList] which accepts the same props as their corresponding components from RN. I have used that and it worked for me.

render() {   return (   <KeyboardAwareFlatList       style={{flex: 1}}       data={this.state.data}       renderItem={({item}) => (         <View style={{flex: 1}}>         <Image           source={item.v}           style={{height:200, width: 200}}         />         <TextInput           placeholder="enter text1"         />         </View>        )}     />   ); } 

Answer 2

You could try using the library react-native-keyboard-spacer as an alternative to KeyboardAvoidingView.

Install:

npm install --save react-native-keyboard-spacer 

Use it like this:

import KeyboardSpacer from 'react-native-keyboard-spacer'  ...  <View style={{flex: 1}}>   <FlatList     style={{flex: 1}}     data={ds}     renderItem={({ item }) => <ListItem data={item} />}   />    {/* The view that will expand to match the keyboard height */}   <KeyboardSpacer /> </View>