How to conditionally overwrite a style with a different style in React Native?-CodePudding

I have a PrimaryButton element that has 3 variants - primary, secondary and tertiary. As you can see in the style of the Pressable component, I set the default style based on the variant like this styles[variant] . Now I also want to make the backgroundColor of that Pressable component to turn red while it is being pressed if the button variant is tertiary. I already have access to isPressed boolean that tells me if the Pressable is pressed, however, I couldn't figure out how to change the backgroundColor to red only if the variant is tertiary.

const PrimaryButton = ({ title, variant = 'primary', wide = false, style, ...rest }) => {
    const width = wide ? '100%' : undefined;
    const textColor = variant === 'primary' ? colors.white : colors.primary600;

    return (
        <Pressable
            style={({ pressed: isPressed }) => [
                styles.button,
                styles[variant],
                {
                    width,
                    elevation: isPressed ? 5 : 0,
                },
                style,
            ]}
            {...rest}
        >
        </Pressable>
    );
};

const styles = StyleSheet.create({
    button: {
        paddingVertical: 12,
        paddingHorizontal: 24,
        borderRadius: 100,
        borderWidth: 1.5,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
    },
    primary: {
        backgroundColor: colors.primary600,
        borderColor: colors.primary600,
    },
    secondary: {
        backgroundColor: colors.white,
        borderColor: colors.primary600,
    },
    tertiary: {
        backgroundColor: 'transparent',
        borderColor: 'transparent',
    },
    text: {
        textAlign: 'center',
    },
});

CodePudding user response：

See if the following helps you. If not please do tell me what went wrong.

style = {({ pressed: isPressed }) => [
    styles.button,
    styles[variant],
    {
        width,
        elevation: isPressed ? 5 : 0,
        ...(variant === 'tertiary') ? { backgroundColor: 'red' } : {}
    },
    style,
]}

CodePudding user response：

check this package, very useful for this stuff. Styles directly on field level isn't recommended anymore. https://www.npmjs.com/package/isomorphic-style-loader Good luck

CodePudding user response：

In order to overwrite a style of a component, in this case, to change the backgroundColor to red only if the variant is tertiary, you can use the ternary operator.

It may be useful to access the defined styles to retrieve the background colors of the other buttons. To do that, you can use StyleSheet.flatten so that you do not override the previous color style applied.

style = {
    ({
        pressed: isPressed
    }) => [
        styles.button,
        styles[variant],
        {
            width,
            elevation: isPressed ? 5 : 0,
        },
        {
            backgroundColor: isPressed && variant === 'tertiary' ?
                'red' :
                StyleSheet.flatten(styles[variant]).backgroundColor
        },
        style,
    ]
}

As seen in this example.