CODEWITHSUNDEEP
react-nativeradio-group
MeLean
MeLean

Reputation: 3451

React-native set colour to radio button's label

I am usingreact-native-radio-buttons-group for radio buttons in my app. I have a bit of difficulty to paint the labels of the radio buttons in some colors. I tried the example:

 {
    label: 'option one',
    color: '#FFFFFF',
 },

but only the bullets were painted. I want to paint the labels as well.

Now I got this:

enter image description here

Upvotes: 1

Views: 3221

Answers (3)

TaGy
TaGy

Reputation: 1

The labelStyle you want is added to the RadioGroup.

      <RadioGroup
        radioButtons={radioButtons}
        onPress={handleOnPress}
        selectedId={value}
        containerStyle={styles.radioGroup}
        labelStyle={styles.labelStyle}
        layout='row'
      />

Upvotes: 0

MeLean
MeLean

Reputation: 3451

I found a solution to my problem. It is a bit hacky but works. I wrapped the labels in <Text> tags whit inline style as follows:

deliveryRadioData: [
    {
      id: 1,
      label: (
        <Text style={{color: '#FFFFFF'}}>{'option one'}</Text>
      ),
      selected: true,
      color: '#FFFFFF',
      size: 16,
    },
    {
      id: 2,
      label: (
        <Text style={{color: '#FFFFFF'}}>
          {'option two'}
        </Text>
      ),
      selected: false,
      color: '#FFFFFF',
      size: 16,
    },
  ],
};

Now the radio buttons look like this:

enter image description here

Upvotes: 2

Tan Dat
Tan Dat

Reputation: 3117

Check if there is labelStyle prop.

Otherwise, try react-native-btr

NOTE: This package is updated and actively maintained in react-native-btr library. Hence, we recommend you to use this component from react-native-btr library.

Upvotes: 1

Related Questions