React Native a component being only rendered once

Question

I'm using both librarys import SwipeCards from 'react-native-swipe-cards'; and import AutoTypingText from 'react-native-auto-typing-text';

In each card I have I use AutoTypingText, The problem is that it uses the same text in all of them, The only thing that does change is this.props.Nickname

Which is not part of the text prop for AutoTypingText

Child Card Component:

render() {
    return (
        <View style={styles.viewStyle}>
            <Text style={styles.titleText}>{this.props.Nickname}</Text>
            <AutoTypingText
                text={"\nAge: " + this.props.Age + "\n"
                    + "City: " + this.props.City + "\n"
                    + "Recent Login: " + this.props.RecentActivity + "\n"
                    + "Points: " + this.props.Points + "\n"
                    + "About: \"" + this.props.About + "\"\n"
                }
                charMovingTime={0}
                style={textStyle}
                delay={0}
                onComplete={() => {
                    console.log('done');
                    console.log(this.state)
                }}
            />

            <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                <Button style={styles.buttonStyle} textStyle={styles.buttonText}>
                    Exploit !
                </Button>
                <Button style={styles.buttonStyle} textStyle={styles.buttonText}>
                    Spare
                </Button>
            </View>
        </View>
    );
    }
}

Parent Cards List

const Cards = [
{
    Nickname: "S4nr0",
    Age: 25,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "I <3 Kittenz",
    Points: 1337
},
{
    Nickname: "Sr00lik",
    Age: 23,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "If Internet explorer is brave\nenough to ask you to be your\n default browser, you're brave \nenough to ask that girl out",
    Points: 1337
},
{
    Nickname: "Bomba",
    Age: 24,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "I'm Awesome !",
    Points: 1337
}
];

export default React.createClass({
    getInitialState() {
    return {
      cards: Cards
    }
  },
render() {
    return (
      <SwipeCards
        cards={this.state.cards}
        renderCard={(cardData) => <Card {...cardData} />}
      />
    )
    }
})

To clarify: It's as if AutoTypingText is like a singleton (I know it's not), Because the results of it are the same in all of the cards

score 0 · Accepted Answer · answered Jul 17 '17 at 21:52

This is not the proper answer but in react native, usually helps providing a key attribute to elements that repeat to make sure the "virtual DOM" detects changes.

So you could do something like:

<AutoTypingText
            key={this.props. Nickname}
            text={"\nAge: " + this.props.Age + "\n"
                + "City: " + this.props.City + "\n"
                + "Recent Login: " + this.props.RecentActivity + "\n"
                + "Points: " + this.props.Points + "\n"
                + "About: \"" + this.props.About + "\"\n"
            }
            ...

Give it a try ; )

React Native a component being only rendered once

1 Answers1