Custom Radio Button In React Native

Question

I am trying to create a custom button using View and Radio Group But unable to overlap on another. Basically I am to create something like this :

I did check the reactive paper but still not luck.

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

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

  return (
    <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
      <View>
        <Text>First</Text>
        <RadioButton value="first" />
      </View>
      <View>
        <Text>Second</Text>
        <RadioButton value="second" />
      </View>
    </RadioButton.Group>
  );
};

export default MyComponent;

I am trying with this code.

Can someone help me with this?

Answer 1

You can add styles for the view and also add an icon. The code would be like below, You can change the styles based on your requirement

import * as React from 'react';
import { View, StyleSheet,TouchableOpacity } from 'react-native';
import { RadioButton, Text } from 'react-native-paper';
import { Ionicons,Fontisto } from '@expo/vector-icons';

const styles = StyleSheet.create({
  mainWrapper: {
    backgroundColor: '#c36e01',
    borderRadius: 10,
    padding: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent:'space-between',
    marginVertical:5
  },
});

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

  return (
    <RadioButton.Group
      onValueChange={(newValue) => setValue(newValue)}
      value={value}>
      <TouchableOpacity style={styles.mainWrapper} onPress={()=>setValue('first')}>
       <Fontisto name="date" size={24} color="white" />
        <Text style={{ color: 'white' }}>First</Text>
        <RadioButton value="first" color="white"/>
      </TouchableOpacity>
      <TouchableOpacity style={styles.mainWrapper} onPress={()=>setValue('second')}>
       <Ionicons name="alarm" size={24} color="white" />
        <Text style={{ color: 'white' }}>Second</Text>
        <RadioButton value="second" color="white"/>
      </TouchableOpacity>
    </RadioButton.Group>
  );
};

export default MyComponent;

You can tryout the snack https://snack.expo.io/X53aqaaCH

Answer 2

Use the Following code as a component:

import React from 'react';
import { TouchableOpacity, Image, Text, StyleSheet } from 'react-native';

export default function Radio({ value, changeValue, leftImage, text }) {
    return <TouchableOpacity
        style={radioStyle.btn}
        onPress={changeValue}
    >
        <Image source={leftImage} style={radioStyle.leftImg} />
        <Text style={radioStyle.txt}>{text}</Text>
        {value ? <Image source={require("../assets/images/check-mark.png")} style={radioStyle.tick} /> : null}
    </TouchableOpacity>
}

const radioStyle = StyleSheet.create({
    btn: {
        flexDirection: 'row', alignItems: 'center', backgroundColor: '#c36e02', borderRadius: 15, padding: 15
    },
    leftImg: { height: 40, width: 40, marginRight: 30, tintColor: 'white', resizeMode: 'contain' },
    txt: { fontSize: 30, color: 'white' },
    tick: { position: 'absolute', right: 0, height: 30, width: 30, marginRight: 30, tintColor: 'white' }
});

import this in the page you want to use:

import React, { useState } from 'react';
import Radio from '../../components/Radio';
import { View } from 'react-native';
export default function parent() {
  const [radioValue, setRadioValue] = useState(false);
  return <View style={{ flex: 1, paddingVertical: 70, paddingHorizontal: 20 }}>
    <Radio
      value={radioValue}
      changeValue={() => setRadioValue(!radioValue)}
      leftImage={require('../../assets/images/wallet-bottom.png')}
      text="Monthly Basis"
    />
  </View>
}

In leftImage pass an image that will be shown at left.

In text pass a text that will display as the title of the radio.

In value pass a state of boolean type.

In changeValue pass a function that changes that boolean state.

Output