states not updating inside card

[mitesh-db]

Hello @lhandel ,
I really appreciate your work, but I'm having one issue when I update some states it is NOT being updated inside card.

Can you please guide me here

For example, I have one state loading: true in constructor,
In componentDidMount I set to loading: false,
But this.state.loading never gets updated value and always returns (It is custom component - Which shows loader)

following is my code:

<CardStack
        style={styles.cardstack}
        verticalSwipe={false}
        ref={(swiper) => {
          this.swiper = swiper;
        }}
        renderNoMoreCards={() => (
          <Text style={{fontWeight: '700', fontSize: 18, color: 'gray'}}>
            No more cards :(
          </Text>
        )}
        onSwiped={() => console.log('onSwiped')}
        onSwipedLeft={() => console.log('onSwipedLeft')}>
        <Card style={styles.card}>
        {this.state.loading ? <Loader /> : null}

        </Card>
</CardStack>

Here loader always keep loading even if state changes to false

[mitesh-db]

Also if I set something like this inside <Card>,

<Text style={styles.name_title}>{this.state.f_name}</Text>

f_name never gets updated value

[ethans333]

@mitjnextt did you ever solve this?

[mitesh-db]

@ethans333 I found using this.swiper.initDeck(); right after setState will reload the card. But it have another issue it will bring you all the card that was swiped/removed from the stack.

[Coci0AlexMeew]

It is because CardStack is comparing the keys of its children (Card) and it only updates the state if they are different. Look into componentDidUpdate in CardStack. Since you only have one Card i guess you can just add 'isLoading' as the key which would make the key change when isLoading changes resulting in a re-render of the Card component.

[sanketk478]

same issue can you please give more details...