Button works but cards doesnt changed

first of all thanks for this library,

I am making a survey application with react native. I get the questions from the database with their answers, so my buttons are in the card.

https://github.com/3DJakob/react-tinder-card/issues/86#issuecomment-1362504484

When I made the changes written in this comment, the buttons started working. However, although the buttons work, the card does not change. I can transfer the answers of the two questions to the database, but the card does not change in the application.

How can I resolve this situation?

this is my code;

<View style={styles.container}>
      <View style={styles.cardContainer}>
        {surveyQuestions.map((item, key) => (
          <TinderCard
            preventSwipe={['up', 'down']}
            className={'pressable'}
            key={item.id}
            onSwipe={dir => swiped(dir, item.SurveyQuestionOptions, item.id)}>
            <View style={styles.card}>
              <Text style={styles.text}>{item.question}</Text>
              <View
                style={{
                  justifyContent: 'space-around',
                  flexDirection: 'row',
                  paddingTop: 50,
                }}>
                <Button
                  style={styles.buttonStyle}
                  onPress={() =>
                    swiped('left', item.SurveyQuestionOptions, item.id)
                  }
                  color={'black'}>
                  <Text style={styles.buttonText}>
                    {item.SurveyQuestionOptions[1].options}
                  </Text>
                </Button>
                <Button
                  style={styles.buttonStyle}
                  onPress={() =>
                    swiped('right', item.SurveyQuestionOptions, item.id)
                  }
                  color={'black'}>
                  <Text style={styles.buttonText}>
                    {item.SurveyQuestionOptions[0].options}
                  </Text>
                </Button>
              </View>
            </View>
          </TinderCard>
        ))}
      </View>
    </View>

this is my style codes;

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#C91623',
    alignContent: 'center',
    flexDirection: 'column',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardContainer: {
    width: '100%',
    maxWidth: 320,
    height: 300,
  },
  card: {
    width: 320,
    height: 300,
    borderRadius: 20,
    borderWidth: 2,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    resizeMode: 'cover',
    fontSize: 25,
    color: 'white',
    backgroundColor: '#CDC0B9',
    flex: 1,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 12,
    },
    shadowOpacity: 0.7,
    shadowRadius: 16.0,
    elevation: 24,
  },
  text: {
    textAlign: 'center',
    fontSize: 25,
    color: 'black',
    fontWeight: '600',
  },
  buttonText: {
    fontSize: 18,
    color: '#170C06',
    alignItems: 'center',
    fontWeight: '700',
    fontFamily: 'Courier',
    textAlign: 'center',
  },
  buttonStyle: {
    width: 100,
    height: 50,
    margin: 5,
    borderWidth: 2,
    borderRadius: 50,
    textAlign: 'center',
    alignSelf: 'center',
    backgroundColor: '#CDC0B9',
  },
});

3DJakob / react-tinder-card

Button works but cards doesnt changed #141