React-native-snap-carousel: Card does not get rerendered when state changes

[ethanyuwang]

I have a set of cards and the last card displays the user input values from previous cards. These inputs are saved to the class' state and the last card renders the state. From my understanding, if the state changes the last card would get rerendered to display the change. However, the last card only sticks to the original placeholder values.

class state:

export default class New extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "New",
      cardSuit: skillCardSuit,
      activeSlide: 0,
      localAnswers: {
        skillCategory: "Skill Category",
        skills: "Skills",
      }
    }
  }

I just followed the example to render the carousel:

  _assignCard = (card) => {
    switch(card.cardType) {
      case "CardShortAnswer":
        switch(card.cardID) {
          case "skillCategory":
            return (
              <CardShortAnswer 
              data={card.cardData} 
              onChangeText={
                (userInputValue) => this.setState({
                  localAnswers: { ...this.state.localAnswers, skillCategory: userInputValue} 
                })
              }
              onPress={() => { this.refs.carousel.snapToNext(); }}/>
              );
          case "skills":
            return (
              <CardShortAnswer 
              data={card.cardData} 
              onChangeText={
                (userInputValue) => this.setState({
                  localAnswers: { ...this.state.localAnswers, skills: userInputValue} 
                })
              }
              onPress={() => { this.refs.carousel.snapToNext(); }}/>
              );
        }
      case "CardLongQuestion":
        return (<CardShortAnswer data={card.cardData}/>);
      case "CardSkills":
        return (<CardSkills data={this.state.localAnswers}/>);
      default:
        break;
    }
  }


  _renderItem = ({item, index}) => {
    var {height, width} = Dimensions.get('window');
    return (
      <View style={{height: height*0.65, width: width*0.85}}>
        {this._assignCard(item)}
      </View>
    );
  }


  get cardCarousel() {
    const { activeSlide, cardSuit } = this.state;
    var phoneWidth = Dimensions.get('window').width;

    return (
      <View style={styles.containerCentered}>
        <Carousel
          ref={'carousel'}
          data={cardSuit}
          containerCustomStyle={{backgroundColor:'transparent'}}
          renderItem={this._renderItem}
          sliderWidth={phoneWidth}
          itemWidth={phoneWidth*0.85}
          onSnapToItem={(index) => this.setState({ activeSlide: index }) }
        />

[bd-arc]

Hi @ethanyuwang,

Since the Carousel component extends the FlatList one, you can try to use prop extraData={this.state} and see if this solves your issue. You can take a look at RN doc for more info.

[ethanyuwang]

Hi thank you that solved the problem