How can I create multiple image carousels?

Question

I am a little new to React Native, and I am trying to create a list of cards with Flatlist, I want to show several images for each card as a carousel, and I am trying to do it with react-native-snap-carousel, the problem is When I scroll a card, the indexes of all the cards move.

How can I get a separate index for each card?

import React, { useState, useRef } from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const myCarousel = () => {
  const [activeSlide, setActiveSlide] = useState(0);
  const carousel = useRef();
  const entries = [
    {
      title: 'card1',
    },
    {
      title: 'card2',
    },
    {
      title: 'card3',
    },
    {
      title: 'card4',
    },
  ];

  var slides = [];

  const entriesSplitter = () => {
    let size = 1; //Based on the size you want
    while (entries.length > 0) {
      slides.push(entries.splice(0, size));
    }
  };

  // render every single slide
  const _renderItem = ({ item, index }) => {
    return (
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {item.map(item => {
          return <Text key={index}>{item.title}</Text>;
        })}
      </View>
    );
  };

  return (
    <View>
      {entriesSplitter()}
      <Carousel
        ref={carousel}
        data={slides}
        renderItem={_renderItem}
        onSnapToItem={index => setActiveSlide(index)}
        sliderWidth={screenWidth}
        sliderHeight={screenHeight}
        itemWidth={screenWidth}
      />
      <Pagination
        dotsLength={4} // also based on number of sildes you want
        activeDotIndex={activeSlide}
        containerStyle={{ backgroundColor: 'red', borderWidth: 2 }}
        dotStyle={{
          width: 10,
          height: 10,
          borderRadius: 5,
          marginHorizontal: 8,
          backgroundColor: 'black',
        }}
        inactiveDotStyle={{
          backgroundColor: 'pink',
        }}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
      />
      <Carousel
        ref={carousel}
        data={slides}
        renderItem={_renderItem}
        onSnapToItem={index => setActiveSlide(index)}
        sliderWidth={screenWidth}
        sliderHeight={screenHeight}
        itemWidth={screenWidth}
      />
      <Pagination
        dotsLength={4} // also based on number of sildes you want
        activeDotIndex={activeSlide}
        containerStyle={{ backgroundColor: 'red', borderWidth: 2 }}
        dotStyle={{
          width: 10,
          height: 10,
          borderRadius: 5,
          marginHorizontal: 8,
          backgroundColor: 'black',
        }}
        inactiveDotStyle={{
          backgroundColor: 'pink',
        }}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
      />
    </View>
  );
};

export default myCarousel;

The index has a style of circles that when you go to the next, changes colour to indicate how many are left, they all move at the same time

https://github.com/archriss/react-native-snap-carousel#usage At the usage part, you can get the current index with `renderItem` method. What do you mean by all the card indexes are moving? We need a code example to see what is wrong on your code — FreakyCoder, Mar 31 '20 at 11:50
I have edited and put an example similar to my code where I got the same error. — xmi, Mar 31 '20 at 12:17

Pramod · Answer 1 · 2020-03-31T13:56:32.013

You are using two cousel with same refrence and same variable so you need to separate these

Working example: https://snack.expo.io/@msbot01/joyous-carrot
import React, {useState, useRef} from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';
import Carousel, {Pagination} from 'react-native-snap-carousel';

const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const [activeSlide, setActiveSlide] = useState(0);
  const [activeSlide2, setActiveSlide2] = useState(0);

  const entries = [
    { 
      title: 'card1',
    },
    {
      title: 'card2',
    },
    { 
      title: 'card3',
    },
    {
      title: 'card4',
    },
  ];
  const entries2 = [
    {
      title: 'card1',
    },
    {
      title: 'card2',
    },
    { 
      title: 'card3',
    },
    {
      title: 'card4',
    },
  ];

  var slides = [];

  const entriesSplitter = () => {
    let size = 1; //Based on the size you want
    while (entries.length > 0) {
      slides.push(entries.splice(0, size));
    }
  };

  // render every single slide
  const _renderItem = ({item, index}) => {
    return (
          <View style={{backgroundColor:'green', justifyContent:'center', alignItems:'center'}}>
            <Image
                style={{height:screenHeight/2, width:screenWidth-100}}
                source={{
                  uri: 'https://reactnative.dev/img/tiny_logo.png',
                }}
              />
        </View>

    );
  }

  const _renderItem2 = ({item, index}) => {
    return (
          <View style={{backgroundColor:'yellow', justifyContent:'center', alignItems:'center'}}>
            <Image
                style={{height:screenHeight/2, width:screenWidth-100}}
                source={{
                  uri: 'https://reactnative.dev/img/tiny_logo.png',
                }}
              />
        </View>

    );
  }

  return (
    <View style={styles.container}>
      <Carousel
        ref={(c) => { this._carousel = c}}
        data={entries}
        renderItem={_renderItem}
        onSnapToItem={index => setActiveSlide(index)}
        sliderWidth={screenWidth-20}
        sliderHeight={(screenHeight-100)}
        itemWidth={screenWidth-50}
      />
      {<Pagination
        dotsLength={4} // also based on number of sildes you want
        activeDotIndex={activeSlide}
        containerStyle={{backgroundColor: 'red', borderWidth: 2}}
        dotStyle={{
          width: 10,
          height: 10,
          borderRadius: 5,
          marginHorizontal: 8,
          backgroundColor: 'black',
        }}
        inactiveDotStyle={{
          backgroundColor: 'pink',
        }}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
      />}
      <Carousel
        ref={(c) => { this._carousel2 = c}}
        data={entries2}
        renderItem={_renderItem2}
        onSnapToItem={index => setActiveSlide2(index)}
        sliderWidth={screenWidth-20}
        sliderHeight={(screenHeight-100)}
        itemWidth={screenWidth-50}
      />

      {<Pagination
        dotsLength={4} // also based on number of sildes you want
        activeDotIndex={activeSlide2}
        containerStyle={{backgroundColor: 'red', borderWidth: 2}}
        dotStyle={{ 
          width: 10,
          height: 10,
          borderRadius: 5,
          marginHorizontal: 8,
          backgroundColor: 'black',
        }}
        inactiveDotStyle={{
          backgroundColor: 'pink',
        }}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
      />}
    </View>
  );
}

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

That has helped me a lot, but I have a question, if I have 500 carousels, how could I dynamically create activeSlide and setActiveSlide? because that way you would have to create another 500 variables. — xmi, Mar 31 '20 at 17:06

score 0 · Answer 2 · answered Apr 02 '20 at 12:15

In the end I have managed to do what I wanted, although the index moves too slow, I share my code in case it can help someone.

State:

constructor(props) {
  super(props);

  this.state = {
    activeSlide: [],
  };
}

Render:

  render() {
    const {cards} = this.props;
    return (
      <View>
        <FlatList
          data={cards}
          numColumns={2}
          renderItem={({item, index}) => this._renderItemCarousel(item, index)}
        />
      </View>
    );
  }

_renderItemCarousel:

  _renderItemCarousel = (card, index) => (
    <View style={styles.card}>
      <Carousel
        data={card.picks}
        renderItem={this._renderItem}
        onSnapToItem={indexC => this.setIndex(indexC, {index})}
        sliderWidth={screenWidth}
        sliderHeight={screenHeight}
        itemWidth={screenWidth}
      />

      <Pagination
        dotsLength={card.picks.length}
        activeDotIndex={this.getIndex({index})}
        containerStyle={styles.circleDiv}
        dotStyle={styles.whiteCircle}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
      />
    </View>
  );

setIndex, getIndex:

    setIndex = (indexC, indexF) => {
    let activeSlide = [...this.state.activeSlide];
    activeSlide[indexF.index] = indexC;
    this.setState({activeSlide});
  };
  getIndex = index => {
    if (this.state.activeSlide[index.index] == undefined) {
      this.state.activeSlide.push(0);
    }
    return this.state.activeSlide[index.index];
  };

_renderItem:

  _renderItem = ({item, index}) => {
    return (
      <View>
        <Image
          key={item.url}
          source={item.image}
          style={{height: '100%', width: CARD_WIDTH}}
        />
      </View>
    );
  };

score 0 · Answer 3 · answered Apr 01 '21 at 09:39

0

For creating dynamic carousel you can use a map to iterate over an array :

 Array.map((i) =>{
          return <item><img src={i} alt="image"></img></item>
        })

answered Apr 01 '21 at 09:39

Radhika soni

143
1
8

How can I create multiple image carousels?

3 Answers3