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 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'

     }

    ];

    

     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)