Как использовать KeyboardAvoidingView с FlatList?

Вы можете попробовать использовать react-native-keyboard-aware-scroll-view

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

Он поставляется с KeyboardAware [ScrollView, ListView, SectionView, FlatList], который принимает те же реквизиты, что и соответствующие компоненты от RN. Я использовал это, и это сработало для меня.

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>

      )}
    />
  );
}

Вы можете попробовать использовать библиотеку react-native-keyboard-spacer в качестве альтернативы KeyboardAvoidingView.

Установить:

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

Используйте это так:

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>

Попробуй это:

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

Вы можете удалить свойство 'keyboardVerticalOffset' или поиграть со значением xyz, просто найдите лучшее значение, которое подходит для вашего случая.

Для тех, кто идет по тому же пути, что и мой. Я не смог использовать KeyboardAvoidingView, потому что он зависит от ScrollView, который конфликтует с Flatlist. Я не мог использовать опцию верхнего и нижнего колонтитула в Flatlist, поскольку я использую ее как сгенерированную вещь в поле выбора поиска, поэтому ее нужно содержать.

Для меня есть разница в том, как Android и iOS вычисляют абсолютную позицию. Android считает нижнюю часть верхней частью клавиатуры, а iOS — нижней частью экрана, когда отображается клавиатура.

Оказывается, не так сложно просто поместить View вокруг содержимого, которое вы хотите оставить над клавиатурой, и просто динамически установить его высоту на iOS. Это даже не обязательно на Android, поскольку оно следует за клавиатурой, если представление равно position: absolute и bottom: 0.

Это сильно заимствовано отсюда: https://stackoverflow.com/a/60682069/438322 Благодаря Кевин Амиранофф

Вот базовый пример использования хуков.

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>
  )
}