Limited Items Displayed in KeyboardAwareScrollView with FlashList

[AradSharafi]

Describe the bug When using the KeyboardAwareScrollView component in conjunction with FlashList, only a subset of the total items is displayed. For instance, if there are 100 items, only the first 30 items are rendered instead of all 100. By the way I pass KeyboardAwareScrollView to renderScrollComponent prop.

Code snippet

import React from 'react';
import { View, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { FlashList } from '@shopify/flash-list';

const items = Array.from({ length: 100 }, (_, index) => `Item ${index + 1}`);

const MyComponent = () => {
  return (
    <View>
      <FlashList
        data={items}
        renderItem={({ item }) => (
          <View style={{ height: 50, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
            <Text>{item}</Text>
          </View>
        )}
        estimatedItemSize={50}
         renderScrollComponent={(props) => (
          <KeyboardAwareScrollView {...props} />
        )}
      />
    </View>
  );
};

export default MyComponent;

Expected behavior All 100 items should be displayed within the FlashList when scrolling through the list. The KeyboardAwareScrollView should handle keyboard events appropriately without interfering with the rendering of all items in the FlashList.

Screenshots https://github.com/kirillzyusko/react-native-keyboard-controller/assets/88803340/933812c6-9a04-4a73-8e79-869af83ce74c

Smartphone (please complete the following information):

• Desktop OS: MacOS Sonoma 14.3
• Device: iPhone Xs
• OS: 17.2
• Expo version: 51.0.17
• RN version: 0.74.2
• RN architecture: old
• JS engine: Hermes
• Library version: 1.11.4

[kirillzyusko]

@AradSharafi why do you use KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view?

This code snippet works fine in my example app:

import React from 'react';
import { View, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
import { FlashList } from '@shopify/flash-list';

const items = Array.from({ length: 100 }, (_, index) => `Item ${index + 1}`);

const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <FlashList
        data={items}
        renderItem={({ item }) => (
          <View style={{ height: 50, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
            <Text>{item}</Text>
          </View>
        )}
        estimatedItemSize={50}
         renderScrollComponent={(props) => (
          <KeyboardAwareScrollView {...props} />
        )}
      />
    </View>
  );
};

export default MyComponent;

[AradSharafi]

Oh Sorry my bad. You're right about react-native-keyboard-aware-scroll-view.

but it remains the bug for me.

[kirillzyusko]

@AradSharafi I'm using the 1.12.5 version - can you try this one? If the bug remains, then please, create a reproduction example because I cannot reproduce this problem in my example app

[AradSharafi]

@kirillzyusko I tried the 1.12.5 version and a new error has arisen.

I just updated and didn't change anything.

[kirillzyusko]

@AradSharafi I can not help here as I haven't seen a similar error in my project 🤷‍♂️ Please, create a reproduction example 🙏

Or you can try 1.11.6 version - this version had a fix for missing onScroll handler.