Fully Customizable Animated Radio Button for React Native

Fully Customizable Animated Radio Button for React Native

Fully customizable animated radio button for React Native.

React Native Animated Radio Button

Battle Tested ✅

Fully customizable animated radio button for React Native

React Native Animated Radio Button

Version 2 is here 😍

Finally, version 2 is here with much basic usage and re-written code. It does not support a text but it is easy to add a text depends on the dev Typescript support and much cleaner code

Installation

Add the dependency:

npm i react-native-animated-radio-button

Peer Dependencies

####### IMPORTANT! You need install them

"@freakycoder/react-native-bounceable": ">= 0.2.5",

Usage

Import

import RadioButton from "react-native-animated-radio-button";

Basic Usage

You can check the example out 😏

<RadioButton
  onPress={(isActive: boolean) =>
    console.log("RadioButton isActive: ", isActive)
  }
/>

Customization Usage

<RadioButton
  style={{
    marginTop: 32,
    borderRadius: 16,
    borderWidth: 3,
    borderColor: "#328da8",
  }}
  innerBackgroundColor="#328da8"
  innerContainerStyle={{ height: 35, width: 35, borderRadius: 10 }}
  onPress={(isActive: boolean) => console.log("isActive: ", isActive)}
/>

Configuration - Props

Property Type Default Description
style style default set the main container's style (outer circle)
innerContainerStyle style default set the inner container's style (inner circle)
innerBackgroundColor color red change the inner circle's background color
initial boolean undefined set the initial activation of the radio button
isActive boolean undefined this will disable the built-in state of activation
onPress function default set your own function when onPress is triggered

Future Plans

  • LICENSE
  • Horizontal & Vertical text component as optional
  • Typescript Challenge!
  • Write an article about the lib on Medium

Author

FreakyCoder, [email protected]

Download Details:

Author: WrathChaos The Demo/Documentation: View The Demo/Documentation Download Link: Download The Source Code Official Website: https://github.com/WrathChaos/react-native-animated-radio-button License: MIT

react-native

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

How much does it cost to develop a React Native mobile app?

Save time & money when choosing AppClues for React Native Mobile app Development. We build React Native apps for Android & iOS using the same code & provide optimal output.

Hire Dedicated React Native Developers - WebClues Infotech

WebClues Infotech is a expert in building iOS, Android Apps, Web apps , Websites, Enterprise solutions. We have crafted many complex and innovative projects that meets our customer expectations.