CODEWITHSUNDEEP
reactjsreact-nativereact-state-management
Jay Modi
Jay Modi

Reputation: 629

Changing content of a component with each swipe of Swiper Library

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.

Upvotes: 0

Views: 1455

Answers (2)

Dan
Dan

Reputation: 8784

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.

Upvotes: 1

Prerna Budhraja
Prerna Budhraja

Reputation: 206

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

Upvotes: 0

Related Questions