Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
radio-buttons-react-native
Advanced tools
Readme
Animated radio buttons component for react native
4 types animation when click on any items of radio button
npm install radio-buttons-react-native --save
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 to find how use this component.
// 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"
/>
}
/>
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' |
Yes of course! Welcome :)
FAQs
Animated radio buttons component for react native
The npm package radio-buttons-react-native receives a total of 1,321 weekly downloads. As such, radio-buttons-react-native popularity was classified as popular.
We found that radio-buttons-react-native demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.