Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-custom-radio-group with all npm packages installed. Try it out:

var reactNativeCustomRadioGroup = require("react-native-custom-radio-group")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-custom-radio-group v1.0.1

React native radio group with custom component


A react native radio group component with custom radio button. The component enables single select radio button behaviour with default select option and customization of the button styles.

Example uses default styles by RadioGroup

Demo gif


npm install react-native-custom-radio-group --save


  • radioGroupList (Required) : An array of object; object => {label: '', value: ''}
  • onChange: CallBack with the value of selected radio button
  • initialValue: Value of the option to be initially selected
  • containerStyle: Style of the radio group container
  • buttonContainerStyle: Base style of the custom button container,
  • buttonTextStyle: Base style of the custom button label text,
  • buttonContainerActiveStyle: Added style of the custom button container when active,
  • buttonContainerInactiveStyle: Added style of the custom button container when inactive,
  • buttonTextActiveStyle: Added style of the custom button text when active,
  • buttonTextInactiveStyle: Added style of the custom button text when inactive


import React, {Component} from 'react';
import {View, Text} from 'react-native';
import RadioGroup from 'react-native-custom-radio-group';
import {radioGroupList} from './radioGroupList.js'

export default class MyComponent extends Component {
  render () {
    return (
        <Text> SELECT: </Text>
        <RadioGroup radioGroupList={radioGroupList}/>

export const radioGroupList = [{
  label: 'Car',
  value: 'transport_car'
}, {
  label: 'Bike',
  value: 'transport_bike'
}, {
  label: 'Bus',
  value: 'transport_bus'
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free