Changing content of a component with each swipe of Swiper Library - reactjs

Question

I am new to React Native and am not completely familiar with state management. Currently I am using react-native-swiper library to hold my swipable images. Each swipe takes me to the next image. Code below
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>
And I am importing this in my App.js where I have some Text component below this like so:
<View style={{ flex: 1 }}>
<ImageBackground
style={globalStyles.backgroundImage}
source={require('./resource/images/bg1080.jpeg')}
>
<Fish />
<Text> Fish 1</Text>
<Text> Fish 2</Text>
</ImageBackground>
</View>
But I want the respective Text to show with each swipe. Example at image 1 the Text says Fish 1, then when I swipe the image and go to the second slide, the Text changes to Fish 2 and so on. Any help would be appreciated.

Answer 1

You can maintain the active slide index in state and then render that index.
Inside of App.js
const [activeIndex, setActiveIndex] = useState();
const onIndexChanged = (index) => setActiveIndex(index);
return (
<View>
<Fish
onIndexChanged={onIndexChanged}
/>
{ activeIndex && <Text>`Fish ${activeIndex}`</Text> }
</View>
)
Inside of Fish.js you need to pass the onIndexChanged prop into Swiper.
const Fish = ({ onIndexChanged }) => (
<Swiper onIndexChange={onIndexChanged}>
// Rest of your code.
</Swiper>
)
Checking your Snack, I can see some output but as you mentioned it's not what you are expecting.
Start the activeIndex state variable to 0.
const [activeIndex, setActiveIndex] = useState(0);
Pass setActiveIndex straight into Fish via the onIndexChanged prop. Now you will be able to remove the unnecessary onIndexChanged function from App.js
<Fish onIndexChanged={setActiveIndex} />
Change your string interpolation to just render the text from fishMapping. Because activeIndex is no longer undefined, you do not need the additional check (activeIndex &&)
<Text>{fishMapping[activeIndex]}</Text>
Here's an updated version of your Snack.

Answer 2

I went through the snack provided by you and the issue is in the Fish.js file.
Replace onIndexChange with onIndexChanged. The updated code:
const Fish = ({ onIndexChanged }) => (
<Swiper onIndexChanged={onIndexChanged}>
// Rest of your code.
</Swiper>
)
Link to updated snack : https://snack.expo.dev/BToSGo1z6