[Android]The video in the row jumps after I move to 5 videos in React native

Question

Horizontal scrollView with pagination are not work properly as video in mention that somehow i don't know that how to solve this issue How to manage item position like we normal use in vertical position. In horizontal position i have to move two or more position when new data load so How to solve this issue

This issue is specific for only face Android side. IOS work perfect.

I have mention video for what is problem i have to face https://drive.google.com/file/d/1Vx21ab0NZob7ZM2pbhyzJcH-uoCg1sff/view?usp=drive_link

 const topicRenderItem = useCallback((topicItem: Topic) => (
    <View style={styles.topic_container} key={topicItem.id.toString() + "_t"}>
      {topicItem.title && <Text style={styles.title_text}>{topicItem.title}</Text>}
      <View style={{flexDirection: 'row',flex:1}}>
        <ScrollView
        nestedScrollEnabled={true}
          ref={scrollViewRef}
          removeClippedSubviews
          style={styles.topic_list}
          decelerationRate={"fast"}
          disableIntervalMomentum={false}
           snapToInterval={platform.width * 0.8 + 10}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          overScrollMode={"never"}
          scrollEnabled={true}
          scrollEventThrottle={100}
          bounces={false} 
          onContentSizeChange={() => {
           _onContentSizeChange();
        }}  

          onScrollEndDrag={(e) =>  loadMore(e, topicItem)}
        >
          {
            topicItem.videos.map((e, index) => (
              renderHorizontalTopicRenderItem(e, index)
            ))
          }
          
              {topicItem.isLoading&&<View
                style={
                  styles.listHeader
                }
              >
                <ActivityIndicator
                  color={PRIMARY_COLOR}
                  size={"large"}
                />
              </View>}

        </ScrollView>
        {
            topicItem.isLoading && topicItem.videos.length == 0 && (
              <View
                style={
                  styles.fs_indicator
                }
              >
                <ActivityIndicator
                  color={PRIMARY_COLOR}
                  size={"large"}
                />
              </View>
            )
          }
      </View>
    </View>
  ), [renderHorizontalTopicRenderItem, loadMore, topicKeyExtractor]);

// second function 

 const loadMore = useCallback(async (event: NativeSyntheticEvent<NativeScrollEvent>, topic: Topic) => {
    const currentOffset = event.nativeEvent.contentOffset.x;
    const contentWidth = event.nativeEvent.contentSize.width;
    const scrollViewWidth = event.nativeEvent.layoutMeasurement.width;
    const threshold = platform.width * 0.8 * 2;
    if (Platform.OS === 'android') {
      if (currentOffset > threshold) return
    } else {
      if (contentWidth - currentOffset - scrollViewWidth  > threshold) return
    }
    if (topic.canLoadMore && !topic.isLoading) {
      if (topic.id === favouritesTopic.id) {
        setFavouritesTopic({ ...topic, isLoading: true });
        const favouriteVideos = !!selectedChannel
          ? await channelService.getChannelVideos(
              selectedChannel.id,
              topic.videos.length,
              loadLimit,
              selectedChannel
            )
          : await feedService.getVideoFeed(
              favouritesTopic.videos.length,
              loadLimit
            );
        setFavouritesTopic((prev) => ({
          ...prev,
          isLoading: false,
          videos: topic.videos.concat(favouriteVideos),
          canLoadMore: favouriteVideos.length === loadLimit,
        }));

        
        StorageService.storeLastFeedUpdatedSession(new Date().getTime());
        return;
      }

      if (topic.id === popularTopic.id) {
        setPopularTopic({ ...topic, isLoading: true });
        const popularVideos = await feedService.getFeedRecommended(
          popularTopic.videos.length,
          loadLimit
        );
        setPopularTopic((prev) => ({
          ...prev,
          isLoading: false,
          videos: topic.videos.concat(popularVideos),
          canLoadMore: popularVideos.length === loadLimit,
        }));
        StorageService.storeLastFeedUpdatedSession(new Date().getTime());
        return;
      }
      topic.isLoading = true;
      const newBeforeCustomTopics = customTopics.map((ct) => {
        if (ct.id === topic.id) {
          return topic
        } 
        return ct
      });
      setCustomTopics(newBeforeCustomTopics);

      const lastVideoId = topic.videos.length > 0 ? (topic.videos[topic.videos.length - 1].id) : undefined;

      const response = await feedService.getVideoFeedByCategory(
        Number(topic.id),
        topic.videos.length,
        loadLimit,
        lastVideoId
      );

      topic.videos = topic.videos.concat(response);
      topic.canLoadMore = response.length === loadLimit;
      topic.isLoading = false;
      const newAfterCustomTopics = customTopics.map((ct) => {
        if (ct.id === topic.id) {
          return topic
        } 
        return ct
      });
      setCustomTopics(newAfterCustomTopics);
   
    }
    
  }, [favouritesTopic, selectedChannel, popularTopic, customTopics]);