react-nativeuser-interfacemobileexponative-base

How to change NativeBase button color


So I'm trying to make a Toggle button using NativeBase button. I'm struggling with color settings.

Current code

<HStack space={2}>
<Button
    variant={selectedGender === 'male' ? 'solid' : 'outline'}
    outlineColor="#9747FF"
    colorScheme={selectedGender === 'male' ? '#9747FF' : 'white'}
    onPress={() => handleGenderSelect('male')}
    _text={{ color: selectedGender === 'male' ? 'white' : '#9747FF' }}
>
    남성
</Button>
<Button
    variant={selectedGender === 'female' ? 'solid' : 'outline'}
    outlineColor="#9747FF"
    colorScheme={selectedGender === 'female' ? '#9747FF' : 'white'}
    onPress={() => handleGenderSelect('female')}
    _text={{ color: selectedGender === 'female' ? 'white' : '#9747FF' }}
>
    여성
</Button>
</HStack>```

Solution

  • One way is to use style to override the default theme. Something like this:

    <Button
      variant={selectedGender === 'male' ? 'solid' : 'outline'}
      style={{
        backgroundColor: selectedGender === 'male' ? '#9747FF' : 'white',
        borderColor: '#9747FF',
      }}
      onPress={() => handleGenderSelect('male')}
      _text={{ color: selectedGender === 'male' ? 'white' : '#9747FF' }}>
      Male
    </Button>
    

    Another way is to customize components by extending the theme.