How to switch radio button and title in react native paper radio button

Question

i use react native paper radio button but it shows the text on the left and the radio button on the right like: "Text ✓", i want the button to be on the left and the text on the right i want it to be: "✓ Text"

this is my code below

                  <RadioButton.Group
                    onValueChange={handleChange('i_am')}
                    value={values.i_am}
                  >
                    <RadioButton.Item
                      label="1"
                      value="1"
                      color="#1E6DAD"
                    />
                    <RadioButton.Item
                      label="2"
                      value="2"
                      color="#1E6DAD"
                    />
                  </RadioButton.Group>

Answer 1

The solution is by using flexDirection =>

                    <RadioButton.Item
                      label="1"
                      value="1"
                      color="#1E6DAD"
                      style={{ flexDirection: 'row-reverse', alignSelf: 'flex-start' }}
                    />

Answer 2

 <RadioButton.Group onValueChange={()=>handleChange(//here set the value of "1" or "2")} value={values.i_am} > <RadioButton.Item label="1" value="1" color="#1E6DAD" /> <RadioButton.Item label="2" value="2" color="#1E6DAD" /> </RadioButton.Group>

Answer 3

You can customize it like this by using your own custom views.

Here is the code example.

import * as React from "react";
import { View, StyleSheet } from "react-native";
import { RadioButton, Text } from "react-native-paper";

const MyComponent = () => {
  const [value, setValue] = React.useState(1);

  return (
    <RadioButton.Group
      onValueChange={(newValue) => setValue(newValue)}
      value={value}
    >
      <View style={styles.buttonContainer}>
        <RadioButton value={1} />
        <Text style={styles.label}>1</Text>
      </View>
      <View style={styles.buttonContainer}>
        <RadioButton value={2} />
        <Text style={styles.label}>2</Text>
      </View>
    </RadioButton.Group>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  label: { flex: 1, textAlign: "right", marginRight: 16 },
});

export default MyComponent;

It will be shown like this

I hope this help you out