Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wrathchaos/react-native-animated-radio-button

Fully customizable animated radio button for React Native
https://github.com/wrathchaos/react-native-animated-radio-button

android apple button development freakycoder front-end google ios mobile mobile-app mobile-application-development radio radio-button react react-native reactjs ui

Last synced: about 15 hours ago
JSON representation

Fully customizable animated radio button for React Native

Host: GitHub
URL: https://github.com/wrathchaos/react-native-animated-radio-button
Owner: WrathChaos
License: mit
Created: 2019-10-16T19:27:34.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2024-10-23T06:20:33.000Z (23 days ago)
Last Synced: 2024-11-07T18:28:56.696Z (8 days ago)
Topics: android, apple, button, development, freakycoder, front-end, google, ios, mobile, mobile-app, mobile-application-development, radio, radio-button, react, react-native, reactjs, ui
Language: Java
Homepage: https://freakycoder.com
Size: 6.41 MB
Stars: 31
Watchers: 3
Forks: 9
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        

[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-animated-radio-button)

[![Fully customizable animated radio button for React Native](https://img.shields.io/badge/-Fully%20customizable%20animated%20radio%20button%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-animated-radio-button)

[![npm version](https://img.shields.io/npm/v/react-native-animated-radio-button.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-animated-radio-button)

[![npm](https://img.shields.io/npm/dt/react-native-animated-radio-button.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-animated-radio-button)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)







# 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:

```bash

npm i react-native-animated-radio-button

```

## Peer Dependencies

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

```js

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

```

# Usage

## Import

```jsx

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

```

## Basic Usage

You can check the example out 😏

```jsx

    console.log("RadioButton isActive: ", isActive)

  }

/>

```

## Customization Usage

```jsx

 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

- [x] ~~LICENSE~~

- [x] ~~Horizontal & Vertical text component as optional~~

- [x] ~~Typescript Challenge!~~

- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, [email protected]

## License

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

```

```