HomeScreen Flashlist

function HomeScreen(): JSX.Element {
  const HomeScreen = useNavigationState(state => state);
  console.log({
    HomeScreen,
  });

  const {data: videos} = useFeedQuery();
  const navigation = useNavigation<StackNavigationProp<HomeParams>>();
  const ref = useRef<FlashList<IVideo>>(null);
  const activeVideo = useActiveVideoStore(state => state.activeVideo);
  const isSliceActive = useSelector(
    (state: RootState) => state.videoListSliceHome.isSliceActive,
  );
  const index = useSelector(
    (state: RootState) => state.videoListSliceHome.currentListIndex,
  );
  const dispatch = useDispatch();
  const viewConfig = useRef<ViewabilityConfig>({
    itemVisiblePercentThreshold: 40,
    waitForInteraction: false,
  });

  const onViewableItemsChanged = ({
    viewableItems,
  }: {
    viewableItems: ViewToken[];
  }) => {
    if (viewableItems.length && viewableItems[0].index !== undefined) {
      const {item, index} = viewableItems[0];
      item !== null &&
        dispatch(
          setActiveVideo({
            video_id: item.title,
            duration: item.duration,
          }),
        );
      index !== null && dispatch(setIndex(index));
    }
  };

  useEffect(() => {
    ref.current &&
      ref.current.scrollToIndex({
        animated: true,
        index,
      });
  }, [index, ref]);

  const content = (
    <FlashList
      ref={ref}
      data={videos}
      automaticallyAdjustContentInsets={false}
      automaticallyAdjustsScrollIndicatorInsets={false}
      contentInsetAdjustmentBehavior="automatic"
      automaticallyAdjustKeyboardInsets={false}
      estimatedItemSize={Dimensions.get('screen').height}
      estimatedListSize={{
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height,
      }}
      viewabilityConfig={viewConfig.current}
      onViewableItemsChanged={onViewableItemsChanged}
      keyExtractor={item => String(item.video_id)}
      renderItem={item => (
        <View
          style={{
            height: Dimensions.get('screen').height,
            width: '100%',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'green',
          }}>
          <Text>{item.item.title}</Text>
        </View>
      )}
    />
  );
  return <GenericScreen style={Style.container} content={content} />;
}

const Style = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
});

export default HomeScreen;