CODEWITHSUNDEEP
cssreactjsreact-native
blue
blue

Reputation: 7375

React Native paper - how to style this radio button?

Alright, I'm trying to achieve this look where my options are left aligned and Paper radio buttons are right aligned:

enter image description here

To do this, I tried wrapping the RadioButton and the answer Text in the same TouchableOpacity:

                                <TouchableOpacity
                                  style={[styles.answer, {flexDirection:'row'}]}
                                  key={index}
                                  onPress={() => handleOptionPress(answer.id, index)}>
                                  <Text style = {styles.bodyText}>{answer.value}</Text>
                                  <RadioButton.Android
                                    style={{height: 100}}
                                    uncheckedColor={"#F0F0F0"}
                                    color={'black'}
                                    value="first"
                                    status={
                                      answer.id === selectedAnswer ? 'checked' : 'unchecked'
                                    }
                                    onPress={() => handleOptionPress(answer.id, index)}
                                  />
                                </TouchableOpacity>

But the buttons are still left justified and slightly too low:

enter image description here

Theyre also too small. I tried upping the height in the style property as mentioned by the docs, but this did not work.

How can I up the size of the buttons and right align them?

Upvotes: 3

Views: 17664

Answers (3)

Leo N
Leo N

Reputation: 164

Some users also had commented here: https://github.com/callstack/react-native-paper/issues/1229

If you want to change size of this, can use transfer

<View style={{ justifyContent: "center", transform: [{ scale: 1.5 }] }}>
    <RadioButton.Android
       uncheckedColor={"white"}
       color={"white"} />
</View>

Upvotes: 0

user13563549
user13563549

Reputation:

rishikesh_07 answer was close, but text and radio button were not aligned properly, adding alignContent: center to the View that wraps the text did it.

<View style={{ flexDirection: 'row', alignContent: 'center' }}>
                <View style={{ flex: 4, alignSelf: 'center' }}>
                  <Text>First</Text>
                </View>
                <View style={{ flex: 1 }}>
                  <RadioButton
                    value="first"
                    status={checked === 'first' ? 'checked' : 'unchecked'}
                    onPress={() => setChecked('first')}
                  />
                </View>
</View>

There's also RadioButton.Item, which does all of this without needing to write boilerplate code like the one above.

Example from docs:

<RadioButton.Group onValueChange={value => setValue(value)} value={value}>
      <RadioButton.Item label="First item" value="first" />
      <RadioButton.Item label="Second item" value="second" />
</RadioButton.Group>

Upvotes: 4

rishikesh_07
rishikesh_07

Reputation: 1039

Do this

   <View style={{flexDirection:"row",alignItems:'center'}}>
      <View style={{flex:4}}>
      //Add Text component here
      </View>
      <View style={{flex:1}}>
      //your RadioButton compnent here
      </View>
    </View>

Don't wrap the entire thing with TouchableOpacity since RadioButton handling things for you.

Upvotes: 2

Related Questions