https://github.com/handipriyono/react-native-radio-button-handy

Simple Radio Button Component for React Native - iOS and Android
https://github.com/handipriyono/react-native-radio-button-handy

Last synced: about 15 hours ago
JSON representation

Simple Radio Button Component for React Native - iOS and Android

• Host: GitHub
• URL: https://github.com/handipriyono/react-native-radio-button-handy
• Owner: handipriyono
• Created: 2020-04-07T15:17:05.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T19:15:25.000Z (almost 2 years ago)
• Last Synced: 2025-01-02T05:57:28.971Z (8 days ago)
• Language: Java
• Homepage: https://www.npmjs.com/package/rn-radio-button
• Size: 3.61 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# rn-radio-button

Simple Radio Button Component for React Native - iOS and Android

[![npm](https://img.shields.io/npm/v/rn-radio-button.svg?style=plastic)](https://npmjs.org/package/rn-radio-button)

# rn-radio-button

> simple and useful radio button component for React Native



![image info](ExampleApp/giftRN-radiobutton.gif)



## Installation

```sh

npm i rn-radio-button --save

```

# Getting Started

```js

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 (

    <>

      

      

        

        

          {"clicked item value is: " + val}

        

      

    >

  );

};

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

```js

 console.log(val)}

  wrapperStyle={{ padding: 3 }}

/>

```

## Advanced Usage of rn-radio-button

```js

 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

```