Installation

Add the dependency:

npm i react-native-toggle-button

Peer Dependencies

Zero Dependency

Usage

Import

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

Fundamental Usage

<ToggleButton
  primaryText="On"
  secondaryText="Off"
  onPress={(isToggled: boolean) => {
    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.