Hello All i m working on horizontal listing and i have two horizontal flatlist in my screens ! so what i want is if i scroll first flatlist... it reflects on my second flatlist is this possible in our react native if possible then give me such suggestions

here is my flatlist code

   <FlatList
    data={categories}
    horizontal
    scrollEnabled={true}
    keyExtractor={(item) => item._id}
    renderItem={({ item, index }) => {
      return (
        <Box mr={index === categories.length - 1 ? 0 : "10px"}>
          <CategoryTile category={item} inlineTitle={false} inGrid={true} />
        </Box>
      );
    }}
  />

CodePudding user response：

You can try below code

import React, {useState, useRef} from 'react';
import {SafeAreaView, View, FlatList, Text} from 'react-native';

export default function GroundScreen() {
  const refFlatList1 = useRef(null);
  const refFlatList2 = useRef(null);
  const [arr1, setArr1] = useState(Arr1);
  const [arr2, setArr2] = useState(Arr2);
  const [scrollingRightSideAmount, setScrollingRightSideAmount] = useState(0);

  function renderItemArr1({item, index}) {
    return (
      <View
        style={{
          height: 100,
          width: 300,
          borderWidth: 1,
          borderColor: 'black',
        }}></View>
    );
  }
  function renderItemArr2({item, index}) {
    return (
      <View
        style={{
          height: 100,
          width: 300,
          borderWidth: 1,
          borderColor: 'black',
        }}></View>
    );
  }

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <Text style={{fontSize: 24}}>FlatList 1</Text>
        <FlatList
          ref={refFlatList1}
          data={arr1}
          renderItem={renderItemArr1}
          keyExtractor={(_, index) => String(index)}
          horizontal
          onScroll={e => {
            if (e.nativeEvent.contentOffset.x > 0 && scrollingRightSideAmount > e.nativeEvent.contentOffset.x) {
              setScrollingRightSideAmount(e.nativeEvent.contentOffset.x)
              refFlatList2.current.scrollToOffset({offset:e.nativeEvent.contentOffset.x,animated:true});
            } else {
              setScrollingRightSideAmount(e.nativeEvent.contentOffset.x)
              refFlatList2.current.scrollToOffset({offset:e.nativeEvent.contentOffset.x,animated:true});
            }
          }}
        />
        <Text style={{fontSize: 24}}>FlatList 2</Text>
        <FlatList
          ref={refFlatList2}
          data={arr2}
          renderItem={renderItemArr2}
          keyExtractor={(_, index) => String(index)}
          horizontal
        />
      </View>
    </SafeAreaView>
  );
}

const Arr1 = [1, 2, 3, 4, 5, 6, 7];
const Arr2 = [1, 2, 3, 4, 5, 6, 7];

Hope this helps !!! :)