Changing style of a component with each swipe of Swiper Library

[Jay-Bruh]

Currently I have a swiper component that holds my main images and below that I have a thumbnail gallery for each of those images with a borderWidth:1. What I want is that only the border for the current slide should be active while the others show no borderWidth.

App.js

  export default function App() { 
  
  const [activeBorder, setActiveBorder] = useState();
        const [activeIndex, setActiveIndex] = useState();
        const fishMapping = ["Fish Azure", "Fish Salmon", "Fish Another"];
        const onIndexChanged = (index) => setActiveIndex(index);

  return (
    <View style={{ flex: 1 }}>
      <ImageBackground
        style={globalStyles.backgroundImage}
        source={require('./resource/images/bg1080.jpeg')}
      >
      <Fish onIndexChanged={onIndexChanged}/>
      <BottomImages />
      { activeIndex && <Text>`Fish` ${fishMapping[activeIndex]}</Text> }
      </ImageBackground>
    </View>
  );
}

BottomImages.js

export default class BottomImages extends Component { 

state = {
    columns: 3,
  };

  render() {
    const { columns } = this.state;
    return (
      <View style={styles.container}>
        <FlatList
          numColumns={columns}
          data={[
            require('../resource/images/AzureDamsel.png'),
            require('../resource/images/BicolourAngelfish.png'),
            require('../resource/images/ClownTriggerfish.png'),
          ]}
          renderItem={({ item }) => {
            return (
              <ListItem
                itemWidth={(ITEM_WIDTH - 10 * columns) / columns}
                image={item}
              />
            );
          }}
          keyExtractor={(index) => {
            return index;
          }}
        />
      </View>
    );
  }
}

ListItem.js which holds my thumbnail images as well as the borderbox for the images:

 const ListItem = (props) => {  

  const { itemWidth } = props;

  return (
    <TouchableWithoutFeedback>
      <Animated.View
        style={{
          margin: 5,
        }}>
        <Image
          style={{
            width: itemWidth,
            height: 50,
            borderWidth: 1,
            borderColor: '#000',
          }}
          source={props.image}></Image>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

Fish.js:


<Swiper style={styles.wrapper} height={10} horizontal={true} >
      <View style={styles.slide1}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/AzureDamsel.png')}
        />
      </View>
      <View style={styles.slide2}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/BicolourAngelfish.png')}
        />
      </View>
      <View style={styles.slide3}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/ClownTriggerfish.png')}
        />
      </View>
 </Swiper> 

I have attached my sandbox for better reference: https://snack.expo.dev/@jay_m/paranoid-carrot