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

I just tried it with SectionList. The padding adjustment is not perfect but it works: https://imgur.com/a/MaioK Check out also: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580 If it still doesn't work please share a full example on Snack: https://snack.expo.io/rk_YwDvuf In your example it's difficult to tell what ds, ListFooterComponent and ListItem are. Therefore it's difficult to debug your code and answer the question. — Martin Konicek, Mar 03 '18 at 00:16

score 20 · Answer 1 · edited Apr 20 '18 at 04:50

20

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>

      )}
    />
  );
}

edited Apr 20 '18 at 04:50

Felix

2,673
3
30
38

answered Mar 04 '18 at 15:53

Rick Lam

246
1
3

3

If you use `KeyboardAwareFlatList`, the outer `KeyboardAwareScrollView` should be removed or strange scroll behavior happens. – Felix Apr 20 '18 at 02:50
This is not memory efficient list, It keeps holding memory and leads toward out of memory – Mohsin Dec 29 '18 at 06:43
I want to render a list and below it show a text input. – quantumpotato Aug 11 '19 at 16:00

Martin Konicek · Answer 2 · 2018-03-03T11:58:57.993

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>

iDevAmit · Answer 3 · 2023-07-17T04:58:02.230

13

This would work, please try on:

<KeyboardAvoidingView behavior='position' keyboardVerticalOffset={x}  >

You can remove the property 'keyboardVerticalOffset' or keep it and play with the value of x, you just find out the value which fits in your case.

edited Jul 17 '23 at 04:58

answered Jul 04 '18 at 11:28

iDevAmit

1,550
2
21
33

GenericJam · Answer 4 · 2020-05-30T17:38:55.013

For anyone on a similar path as mine. I was not able to use KeyboardAvoidingView because it depends on ScrollView which conflicts with Flatlist. I couldn't used the header and footer option in Flatlist as I'm using it as a generated thing in a search selection box so it has to be contained.

For me there is a difference in how Android and iOS calculate absolute position. Android considers the bottom to be the top of the keyboard and iOS it is the bottom of the screen when the keyboard is showing.

It turns out to be not that difficult to just put a View around the content you want to remain above the keyboard and just dynamically set the height of it on iOS. This isn't even really necessary on Android as it follows the keyboard if the View is position: absolute and bottom: 0.

This heavily borrows from here: https://stackoverflow.com/a/60682069/438322 Thanks to Kevin Amiranoff

Here's a basic example using hooks.

function YourComponent(props){
  const onKeyboardWillShow = e => {
    setKeyboardHeight(e.endCoordinates.height);
  };

  const onKeyboardWillHide = () => {
    setKeyboardHeight(0);
  };

  useEffect(() => {
    // These listeners on ios are a little more snappy but not available on Android
    // If you want to use this on Android use keyboardDidShow/Hide
    if (Platform.OS === 'ios') {
      Keyboard.addListener('keyboardWillShow', onKeyboardWillShow);
      Keyboard.addListener('keyboardWillHide', onKeyboardWillHide);
    }

    return () => {
      if (Platform.OS === 'ios') {
        Keyboard.removeListener('keyboardWillShow', onKeyboardWillShow);
        Keyboard.removeListener('keyboardWillHide', onKeyboardWillHide);
      }
    };
  }, []);

  const buttonHeight = 50;

  return(
    <View>
      <Content bla={'bla'}/>

      <View style={{
        height: Platform.OS === 'ios' 
          ? keyboardHeight + buttonHeight : buttonHeight, 
        position: 'absolute', 
        bottom: 0 
      }}>
      {/* Keep this button above the keyboard */}
      <Button style={{ height: buttonHeight }}/>
</View
    </View>
  )
}

score -1 · Answer 5 · answered Apr 07 '22 at 16:50

-1

this is my solution.
inverted={true} is the key

const dummy = [1,2,3,4,5,6,7,8,9,10]

<KeyboardAvoidingView > 
       <FlatList
            data={dummy.reverse()}
            inverted={true}
         />
</KeyboardAvoidingView>

answered Apr 07 '22 at 16:50

JOONGYU HAN

1
2

1

good solution!, but for another problem... – Alex Pacurar Jun 30 '22 at 08:21

How to use KeyboardAvoidingView with FlatList?

5 Answers5

Linked