https://github.com/wrathchaos/react-native-toggle-button

Cool and easy to use react native toggle button
https://github.com/wrathchaos/react-native-toggle-button

android apple button front-end google ios javascript mobile programming react react-native reactjs toggle toggle-button toggle-switches typescript ui ux

Last synced: 12 days ago
JSON representation

Cool and easy to use react native toggle button

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-toggle-button
• Owner: WrathChaos
• Created: 2021-11-21T16:46:51.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-11-26T16:45:26.000Z (over 3 years ago)
• Last Synced: 2025-04-20T06:37:29.703Z (16 days ago)
• Topics: android, apple, button, front-end, google, ios, javascript, mobile, programming, react, react-native, reactjs, toggle, toggle-button, toggle-switches, typescript, ui, ux
• Language: Java
• Homepage: https://freakycoder.com
• Size: 1.45 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![React Native Toggle Button](https://img.shields.io/badge/-Cool%20and%20easy%20to%20use%20react%20native%20toggle%20button-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-toggle-button)

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

[![npm](https://img.shields.io/npm/dt/react-native-toggle-button.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-toggle-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)



  



# Installation

Add the dependency:

```bash

npm i react-native-toggle-button

```

## Peer Dependencies

Zero Dependency

# Usage

## Import

```jsx

import ToggleButton from "react-native-toggle-button";

```

## Fundamental Usage

```jsx

 {

    console.log(isToggled);

  }}

/>

```

## Example Project 😍

You can checkout the example project 🥰

Simply run

- `npm i`

- `react-native run-ios/android`

should work of the example project.

# Configuration - Props

## Fundamentals

| Property      |   Type   |  Default  | Description                                                        |

| ------------- | :------: | :-------: | ------------------------------------------------------------------ |

| primaryText   |  string  | undefined | change the primaryText                                             |

| secondaryText |  string  | undefined | change the secondaryText                                           |

| onPress       | function | undefined | set your own logic for the button functionality when it is pressed |

## Customization (Optionals)

| Property            |           Type           | Default | Description                                                                               |

| ------------------- | :----------------------: | :-----: | ----------------------------------------------------------------------------------------- |

| inial               |         boolean          |  true   | let you change the initial toggled value                                                  |

| style               |        ViewStyle         | default | set or override the style object for the main container                                   |

| activeButtonStyle   |        ViewStyle         | default | set or override the style object for the `active button` style                            |

| inactiveButtonStyle |        ViewStyle         | default | set or override the style object for the `inactive button` style                          |

| activeTextStyle     |        TextStyle         | default | set or override the style object for the `active text` style                              |

| inactiveTextStyle   |        TextStyle         | default | set or override the style object for the `inactive text` style                            |

| TouchableComponent  | TouchableWithoutFeedback | default | set your own component instead of default react-native TouchableWithoutFeedback component |

## Future Plans

- [x] ~~LICENSE~~

- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, [email protected]

## License

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