rn-radio-button

Simple Radio Button Component for React Native - iOS and Android

rn-radio-button

simple and useful radio button component for React Native

Installation

npm i rn-radio-button --save

Getting Started

import React, { useState } from "react";
import { SafeAreaView, Text, View } from "react-native";
import RadioButton from "rn-radio-button";

const App = () => {
  console.log(RadioButton);
  const [val, setVal] = useState("-");

  function pressCircle(i) {
    setVal(i);
  }

  return (
    <>
      <SafeAreaView style={{ backgroundColor: "#085b7c", flex: 0 }} />
      <SafeAreaView style={{ flex: 1, marginHorizontal: 10 }}>
        <RadioButton
          outerWidth={30}
          innerWidth={20}
          borderWidth={1}
          data={listData}
          color={"steelblue"}
          onPress={pressCircle}
          wrapperStyle={{ padding: 3 }}
        />
        <View
          style={{
            marginHorizontal: 10,
            marginVertical: 10,
            alignItems: "center"
          }}
        >
          <Text>{"clicked item value is: " + val}</Text>
        </View>
      </SafeAreaView>
    </>
  );
};

const listData = [
  { label: "First", value: 1 },
  { label: "Second", value: 2 },
  { label: "Fifth", value: 5 },
  { label: "Sixth", value: 6 }
];

export default App;

Basic Usage of rn-radio-button

<RadioButton
  data={listData}
  color={"steelblue"}
  onPress={val => console.log(val)}
  wrapperStyle={{ padding: 3 }}
/>

Advanced Usage of rn-radio-button

<RadioButton
  data={listData}
  outerWidth={30}
  innerWidth={20}
  borderWidth={1}
  color={"steelblue"}
  onPress={val => console.log(val)}
  wrapperStyle={{ padding: 3 }}
/>

Parameters of rn-radio-button

| Property | Type | Default | Description | | -------------- | ---------------- | ----------- | ------------------------------------------------------ | | data | array of objects | [] | Required | | outerWidth | integer | 20 | define width of outer Circle ( optional ) | | innerWidth | integer | 10 | defined Width of inner Circle ( optional) | | borderWidth | integer | 1 | define borderWidth of outer Circle | | color | string | 'steelblue' | Define primary color for inner and outer Circle | | onPress | function | - | Define function for get value of selected radio button | | wrapperStyle | Object style | - | Styling for wrap outer side of Radio Button | | horizontal | boolean | false | make list of radio Button wrap Horizontally |

Demo

- cd ExampleApp/ && npm install
- cd ios && pod install
- cd .. && react-native run-ios