CODEWITHSUNDEEP
javascriptreact-nativeradio-buttonreact-native-paper
Shady Hakim
Shady Hakim

Reputation: 415

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

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"

enter image description here

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>

Upvotes: 1

Views: 4362

Answers (3)

Shady Hakim
Shady Hakim

Reputation: 415

The solution is by using flexDirection =>

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

Upvotes: 3

Hamas Hassan
Hamas Hassan

Reputation: 941

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

enter image description here

I hope this help you out

Upvotes: 0

Mohad Jillani
Mohad Jillani

Reputation: 11

                  <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>

Upvotes: 0

Related Questions