How can I connect 2 different flatlist with same data?

Question

I'm trying to achieve when I scroll bigger image, green border on smaller ones will go to the next one. I have 2 different flatlist for this. Tried to write item.key to state with onMomentumScrollEnd but didnt work. Here is my

<FlatList
   data={this.state.productImage}
   horizontal
   pagingEnabled
   showsHorizontalScrollIndicator={false}
   onMomentumScrollEnd={item => { this.setState({ active: item.key }); 
   console.log(item.key) }}
   renderItem={({ item }) =>
     <View>
        <Image source={item.source} style={{ width: 
           Dimensions.get('window').width, height: 
           Dimensions.get('window').height / 2 }} />
     </View>}
   keyExtractor={item => item.key}
/>
<FlatList
   data={this.state.productImage}
   horizontal
   showsHorizontalScrollIndicator={false}
   contentContainerStyle={{ flexDirection: "row", alignItems: "center", 
   marginHorizontal: theme.SIZE.pageMargin, marginVertical: 20 }}
   renderItem={({ item }) =>
      <TouchableOpacity >
        <Image source={item.source} style={[this.state.active === item.key 
          && styles.activeImage, styles.productImages]} />
      </TouchableOpacity>}
   keyExtractor={item => item.key}
/>

Edit: After fighting with this I've solved

onMomentumScrollEnd={(event) => {
let xPosition = Math.round(event.nativeEvent.contentOffset.x)
let imageWidth = Math.round(Dimensions.get('window').width)
let keyOfShownImg = (Math.round((xPosition + imageWidth) / imageWidth))
this.setState({ active: keyOfShownImg })
}}

Answer 1

Actually you nearly got the solution. Here you can use onViewableItemChanged prop to achieve this.

I tried out the solution. Take a look here

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibleIndex: 0,
      data: [
        'https://homepages.cae.wisc.edu/~ece533/images/airplane.png',
        'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
        'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
        'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
      ],
    };
    this.onViewableItemsChanged = this.onViewableItemsChanged.bind(this);
  }

  renderBigList = ({ item, index }) => {
    return (
      <Image
        style={{ width: 300, height: 300, resizeMode: 'contain' }}
        source={{ uri: item }}
      />
    );
  };

  renderSmallList = ({ item, index }) => {
    return (
      <View
        style={{
          borderColor:
            index === this.state.visibleIndex ? 'green' : 'transparent',
          borderRadius: 10,
          borderWidth: 2,
          margin: 3,
        }}>
        <Image
          style={{ width: 100, height: 100, resizeMode: 'contain' }}
          source={{ uri: item }}
        />
      </View>
    );
  };

  onViewableItemsChanged = (viewableItemData, changed) => {
    //console.log(viewableItemData);
    if (viewableItemData.viewableItems.length) {
      let keyOfVisibleItem = viewableItemData.viewableItems[0].index;
      console.log(keyOfVisibleItem);
      this.smallListRef.scrollToIndex({
        index: keyOfVisibleItem,
        animated: true,
      });
      this.setState({ visibleIndex: keyOfVisibleItem });
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          keyExtractor={(item, index) => '' + index}
          style={{ height: '50%' }}
          data={this.state.data}
          extraData={this.state}
          renderItem={this.renderBigList}
          horizontal={true}
          onViewableItemsChanged={this.onViewableItemsChanged}
          viewabilityConfig={{
            itemVisiblePercentThreshold: 90,
          }}
          showsHorizontalScrollIndicator={false}
        />
        <FlatList
          ref={ref => (this.smallListRef = ref)}
          keyExtractor={(item, index) => '' + item}
          style={{ height: 50 }}
          data={this.state.data}
          extraData={this.state}
          renderItem={this.renderSmallList}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    padding: 8,
    backgroundColor: 'white',
  },
});