CODEWITHSUNDEEP
reactjsstylesnativereact-props
Kikoanno
Kikoanno

Reputation: 111

React Native change text color if prop is true or false

I need to use my variant prop and change the Text color with default to "dark" I have tried two methods, with inline styles and with stylesheet, but the colors do not change... What am i doing wrong and how to do it properly?

type LabelProps = {
        variant?: "dark" | "light"; // Defaults to "dark"
        label: string;
        style?: StyleProp<ViewStyle>;
    };
    
    export function Label({ variant, label, style }: LabelProps) {
        return (
            <View>
                <Text
                    // style={[styles.labelStyle, style, { color: variant ? "light" : "dark" }]}
                    style={[styles.labelStyle, style, variant ? styles.light : styles.dark]}
                      >
                    {label}
                </Text>
            </View>
        );
    }
    
    const styles = StyleSheet.create({
        labelStyle: {
            lineWeight: "700",
        },
        light: {
            color: "#ededed",
        },
        dark: {
            color: "#ff0000",
        },
    });

Upvotes: 0

Views: 736

Answers (1)

Nishad Cp
Nishad Cp

Reputation: 101

You are curently checking that the variant exists.Change the condition to variant==='dark'

style={[styles.labelStyle, style, variant === 'dark' ? styles.dark : styles.light ]}

Upvotes: 1

Related Questions