CODEWITHSUNDEEP
javascriptreactjsreact-native
Sander
Sander

Reputation: 132

React Native. While component props changed, one depended element re-renders but another - not

CardItem receives the cardIsLocked prop, which changes frequently and depends on user actions.

TouchableOpacity, that affected by this prop, reflects all app state correctly all the time. I can or can't press on it accordingly to my expectations. That is why I know that its disabled prop re-renders well. But prop style of top View component - doesn't.

So, all interaction works as demanded but styles not re-renders. How could this difference be possible during usage of the same prop cardIsLocked?

Thanks for ideas.

const CardItem = (props) => {
    const card = props.card;
    const cardIsLocked = props.cardIsLocked;
    const handler = props.handler.bind(this, { card });

    return (
        <View style={cardIsLocked        //  <-- not causes re-renders
                     ? styles.cardLocked
                     : styles.cardActive}>
            <TouchableOpacity
                disabled={cardIsLocked}  //  <-- causes re-renders
                style={styles.innerCardSpace}
                onPress={handler}
            >
                <View style={styles.card}>
                    <Text style={styles.text}>{card.cardName}</Text>
                </View>
            </TouchableOpacity>
        </View>
    );
};
export default CardItem;

const styles = StyleSheet.create({
    cardActive: {
        padding: 1,
        borderWidth: 1,
        borderRadius: 3,
        maxWidth: 30,
        minWidth: 30,
        height: 50,
        borderColor: "#00ee00",
    },
    cardLocked: {
        padding: 1,
        borderWidth: 1,
        borderRadius: 3,
        maxWidth: 30,
        minWidth: 30,
        height: 50,
        borderColor: "#black",
    },

    innerCardSpace: {
        flex: 1,
        justifyContent: "center",
        alignContent: "center",
        flexDirection: "column",
        margin: 1,
    },
    card: {
        height: 26,
        width: 46,
        alignItems: "center",
        backgroundColor: "#white",
    },

    text: { fontWeight: "700", fontSize: 10 },
});

Upvotes: 0

Views: 57

Answers (1)

ayelsew
ayelsew

Reputation: 156

Just to formalize the answer.

The error is the # at the beginning of the color's name.

The # must be used when declaring code RGB like #eeff00. For colors declared as names the # isn't necessary

So the re-rendering is occurring. But the problem is when any attribute of style has an unacceptable format, React doesn't apply it, and tries to keep the last identical attribute or will do nothing.

The code fixed

const styles = StyleSheet.create({
cardActive: {
    padding: 1,
    borderWidth: 1,
    borderRadius: 3,
    maxWidth: 30,
    minWidth: 30,
    height: 50,
    borderColor: "#00ee00",
},
cardLocked: {
    padding: 1,
    borderWidth: 1,
    borderRadius: 3,
    maxWidth: 30,
    minWidth: 30,
    height: 50,
    borderColor: "black",
},

innerCardSpace: {
    flex: 1,
    justifyContent: "center",
    alignContent: "center",
    flexDirection: "column",
    margin: 1,
},
card: {
    height: 26,
    width: 46,
    alignItems: "center",
    backgroundColor: "white",
},

text: { fontWeight: "700", fontSize: 10 },
});

Upvotes: 1

Related Questions