React Native - Changing Color of Custom Component Button with Prop

Question

I created a custom component. onPress and title have prop method but I also want to add another prop for setting color. The structure I try to make is like below

<TextButton color="red" onPress=... title=... />

My custom TextButton component file is here.

const TextButton = ({ onPress, title, color }) => {

    return (<TouchableOpacity onPress={onPress}><Text style={[styles.helpButton]}>{title}</Text></TouchableOpacity>
    );
}
const styles = StyleSheet.create({
    logButton: {
        fontSize: 18,
        fontWeight: 'bold',
        padding: 25,
        color: {color}
    },
});

I couldn't find how to add prop to change one specific style. How can I add color as prop?

You can use it like `style={[styles.helpButton, { color }]}`. — Dan, Jun 11 '21 at 13:55
So, how should color prop be fullfiled? I mean what's the rest steps? — nogabemist, Jun 11 '21 at 13:57

score 1 · Accepted Answer · answered Jun 11 '21 at 14:24

You can achieve that by creating a new object based on the default style object.

const TextButton = ({ onPress, title, color }) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <Text style={{...styles.helpButton, color: color || "black"}}>{title}</Text>
        </TouchableOpacity>
    );
};

It's good to add a default case, like, if you forget to pass a color, it just uses "black" as your text color. If you feel like this line is too big, you can extract that into a function, it would look something like that:

const TextButton = ({ onPress, title, color }) => {
    const addColor = (style, color) =>{
        return {
            ...style,
            color: color || "black"
        }
    }

    return (
        <TouchableOpacity onPress={onPress}>
            <Text style={addColor(styles.helpButton, color)}>{title}</Text>
        </TouchableOpacity>
    );
};

I did like style={[styles.logButton,{color:color}]} and called as this.pressHandler()} color='#15DCA2' title='Button' /> I think same way. — nogabemist, Jun 11 '21 at 14:33
It also works that way. But I prefer my approach because it's easier to add more logic, properties or default values. It has more readibility and mantainbility in my opinion — Tramonta, Jun 11 '21 at 16:38

React Native - Changing Color of Custom Component Button with Prop

1 Answers1