How to change text color when Pressable pressed

2.4k Views Asked by At

I have a Pressable with a Text inside and i want to change the color of the text when the pressable is pressed (it is ok for Pressable's backgourndcolor but not for Text) I tried something like :

<Pressable
                    style={({ pressed }) => [
                        {
                            backgroundColor: pressed
                                ? colors.PRIMARY_COLOR_DARK
                                : colors.MAIN_BACKGROUND,
                        },
                        styles.playVideosButton,
                    ]}
                    onPress={() => console.log("Dossier")}>
                    {({ pressed }) => {
                        <Text
                            style={[
                                {
                                    color: pressed
                                        ? colors.WHITE_TEXT
                                        : colors.PRIMARY_COLOR_DARK,
                                },
                                styles.buttonText,
                            ]}>
                            Lancer les vidéos
                        </Text>;
                    }}
                </Pressable>

With this code Text desappears

1

There are 1 best solutions below

0
On

Apologies after more thorough testing the original script worked - as long as there are no color changes inside styles.buttonText.

{({ pressed }) => (
                    <Text
                        style={[
                            {
                                color: pressed
                                    ? colors.WHITE_TEXT
                                    : colors.PRIMARY_COLOR_DARK,
                            },
                            styles.buttonText,
                        ]}>
                        Dossier
                    </Text>
                )}