# radio-buttons-react-native

> Animated radio buttons component for react native

Latest version **1.0.4** (published 2020-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install radio-buttons-react-native
pnpm add radio-buttons-react-native
yarn add radio-buttons-react-native
bun add radio-buttons-react-native
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-04-09 |
| First published | 2019-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 83 |
| Author | Siamak Ramezani |
| Maintainers | siamak_rp |
| Keywords | react-component, react-native, ios, android, form, button, radio-button, radio-buttons, react-native-radio-button, animated, react, mobile |

## Links

- npm: https://www.npmjs.com/package/radio-buttons-react-native
- Repository: https://github.com/sramezani/radio-buttons-react-native
- Homepage: https://github.com/sramezani/radio-buttons-react-native#readme
- Issues: https://github.com/sramezani/radio-buttons-react-native/issues
- npm.io page: https://npm.io/package/radio-buttons-react-native

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-04-09
- 1.0.3 — 2019-10-06
- 1.0.2 — 2019-10-06
- 1.0.0 — 2019-10-06

## README

# radio-buttons-react-native
Animated radio buttons component for react native

4 types animation when click on any items of radio button


# DEMO
![](https://user-images.githubusercontent.com/33284430/66270229-7ef73200-e883-11e9-98bf-4dddd01cd78c.gif)

# install
    npm install radio-buttons-react-native --save
    
# Usage
    import RadioButtonRN from 'radio-buttons-react-native';
    
    const data = [
    {
      label: 'data 1'
     },
     {
      label: 'data 2'
     }
    ];
    
    <RadioButtonRN
      data={data}
      selectedBtn={(e) => console.log(e)}
    />

see this simple [example](https://github.com/sramezani/radio-buttons-react-native/blob/master/example/index.js) to find how use this component.

<h3>with customize icon:</h3>

    // import icon from any library
    import Icon from 'react-native-vector-icons/FontAwesome';
    
    <RadioButtonRN
      data={data}
      selectedBtn={(e) => console.log(e)}
      icon={
        <Icon
          name="check-circle"
          size={25}
          color="#2c9dd1"
        />
      }
    />
    
    


# Properties

| Prop  | Description | Default |
| ------------- | ------------- | ------------- |
| data  | radio buttons label array, you can use any data in object, label is necessary for showing in radio button | [] |
| selectedBtn  | callback when radio button clicked | - |
| icon  | you can use any icon for button, see the example | - |
| box  | box of for items  | true |
| initial  | The number of selected radio button. start from 1 for first item of array. This is used when this component is activated. | -1 |
| animationTypes  | the animations when click on item, Valid values: 'zoomIn', 'pulse', 'shake', 'rotate', you can use one or more of this value for exaple: ['pulse'] or ['pulse', 'rotate']  | [] |
| duration  | For how long the animation will run (milliseconds) | 500 |
| style  | style for all RadioButtonRN  | {} |
| boxStyle  | style for box  | {} |
| textStyle  | style for label text  | {} |
| circleSize  | circle size for unselected items and whitout icon selected size | 18 |
| activeColor  | color of active button and box border  | '#03a9f4' |
| deactiveColor  | color of deactive button  | '#e2e2e2' |
| boxActiveBgColor  | background color of active item, when box is true | '#e1f5fe33' |
| boxDeactiveBgColor  | background color of deactive items, when box is true  | '#fff' |
| textColor  | label color  | '#383838' |

# Contributing
Yes of course! Welcome :)

# License
[MIT](https://github.com/sramezani/radio-buttons-react-native/blob/master/LICENSE)

---
_Source: https://npm.io/package/radio-buttons-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._