WrathChaos / react-native-animated-radio-button-group

Fully customizable, animated & easy to use radio button group

Home Page:https://freakycoder.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native Animated Radio Button Group

Battle Tested ✅

Fully customizable, animated & easy to use radio button group

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Animated Radio Button Group

Installation

Add the dependency:

npm i react-native-animated-radio-button-group

Peer Dependencies

IMPORTANT! You need install them
"@freakycoder/react-native-bounceable": ">= 0.2.5",
"react-native-animated-radio-button": ">= 0.0.4"

Usage

Import

import RadioButtonGroup from "react-native-animated-radio-button-group";

Usage

Data is just an example, you can customize each radio button with data itself. You must use the IRadioButton data model for customize the radio buttons. They take all props which is available on React Native Animated Radio Button.

Data Model

export type IRadioButton = {
  id: number,
  color: string,
  outerStyle?: ViewStyle,
  innerStyle?: ViewStyle,
};

Example Usage

<RadioButtonGroup
  initial={2}
  data={data}
  horizontal
  onChange={(item) => console.log("Selected Item: ", item)}
  onPress={() => {}}
/>

Example Data Array

const data: Array<IRadioButton> = [
  {
    id: 0,
    outerStyle: {
      width: 50,
      height: 50,
      borderColor: "#FF0004",
      borderRadius: 25,
    },
    innerStyle: {
      borderRadius: 25,
    },
    color: "#FF0004",
  },
  {
    id: 1,
    outerStyle: {
      width: 50,
      height: 50,
      borderColor: "#FB4009",
      borderRadius: 25,
    },
    innerStyle: {
      borderRadius: 25,
    },
    color: "#FB4009",
  },
  {
    id: 2,
    outerStyle: {
      width: 50,
      height: 50,
      borderColor: "#F6800F",
      borderRadius: 25,
    },
    innerStyle: {
      borderRadius: 25,
    },
    color: "#F6800F",
  },
  {
    id: 4,
    outerStyle: {
      width: 50,
      height: 50,
      borderColor: "#F4A012",
      borderRadius: 25,
    },
    innerStyle: {
      borderRadius: 25,
    },
    color: "#F4A012",
  },
  {
    id: 5,
    outerStyle: {
      width: 50,
      height: 50,
      borderColor: "#F0E017",
      borderRadius: 25,
    },
    innerStyle: {
      borderRadius: 25,
    },
    color: "#F0E017",
  },
];

Configuration - Props

Property Type Default Description
initial number 0 default selection of the radio button group
data Object Array null creates and customize each radio button for the group
onChange function undefined you can make your business logic or get the selection of the data from this function
onPress function undefined onPress function for each of them

Future Plans

  • LICENSE
  • TypeScript Challenge!
  • Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Animated Radio Button Group is available under the MIT license. See the LICENSE file for more info.

About

Fully customizable, animated & easy to use radio button group

https://freakycoder.com

License:MIT License


Languages

Language:Java 31.2%Language:TypeScript 24.7%Language:Objective-C 22.6%Language:JavaScript 14.8%Language:Ruby 3.7%Language:Starlark 3.0%