Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sramezani/radio-buttons-react-native
Animated radio buttons component for react native
https://github.com/sramezani/radio-buttons-react-native
radio-button react-native-radio-buttons
Last synced: about 1 month ago
JSON representation
Animated radio buttons component for react native
- Host: GitHub
- URL: https://github.com/sramezani/radio-buttons-react-native
- Owner: sramezani
- License: mit
- Created: 2019-10-06T10:05:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-06T06:04:28.000Z (over 3 years ago)
- Last Synced: 2024-07-01T09:05:41.811Z (3 months ago)
- Topics: radio-button, react-native-radio-buttons
- Language: JavaScript
- Homepage:
- Size: 336 KB
- Stars: 85
- Watchers: 4
- Forks: 41
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - radio-buttons-react-native ★11 - Animated radio buttons component for react native (Components / UI)
- awesome-react-native - radio-buttons-react-native ★11 - Animated radio buttons component for react native (Components / UI)
README
# radio-buttons-react-native
Animated radio buttons component for react native4 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'
}
];
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.
with customize icon:
// import icon from any library
import Icon from 'react-native-vector-icons/FontAwesome';
console.log(e)}
icon={
}
/>
# 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)