Creating reusable Button on React Native

Manorath D. • Jan 06, 2024

export default function FormButton({title, color = 'green', marginX = 0, marginY=3, paddingX = 20, paddingY = 8}){

  const [btnColor, setBtnColor] = useState('');
    const [btnPressedColor, setBtnPressedColor] = useState('');
    const [btnTextColor, setBtnTextColor] = useState('');

    useEffect(() => {
        setBtnColor(theme.css[`button_${color}`])
        setBtnPressedColor(theme.css[`button_${color}_hover`])
        setBtnTextColor(theme.css[`button_text_${color}`])
    }, [])

    return (
        <Pressable 
            style={({ pressed }) => [
            theme.css.button, { marginHorizontal: marginX, 
            marginVertical: marginY, paddingHorizontal: paddingX, paddingVertical: paddingY},
            pressed ? btnPressedColor : btnColor,
          ]}>
            <Text style={[btnTextColor, {textAlign: 'center'}]}>{title}</Text>
        </Pressable>
    )
}