18

Animated switch button with fully customizable React Native Component

 3 years ago
source link: https://reactnativeexample.com/animated-switch-button-with-fully-customizable-react-native-component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

react-native-switch-button

react-native-switch-button

Animated switch button with fully customizable React Native Component

Installation

Add the dependency:

npm i @freakycoder/react-native-switch-button

Peer Dependencies

IMPORTANT! You need install them
"@freakycoder/react-native-bounceable": ">= 0.2.5"

Usage

Import

import SwitchButton from "@freakycoder/react-native-switch-button";
React JSX

Fundamental Usage

<SwitchButton
  text="Notification"
  inactiveImageSource={require("./assets/notification.png")}
  activeImageSource={require("./assets/notification-3.png")}
  onPress={(isActive: boolean) => console.log(isActive)}
/>
React JSX

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

Property Type Default Description text string undefined set the text of the button activeImageSource Image Source undefined set the active image source inactiveImageSource Image Source undefined set the inactive image source isActive boolean false set the active state initially onPress function default set your own logic for onPress functionality mainColor string #f1bb7b change the main animated color originalColor string #fff change the original/default animated color tintColor string #f1bb7b change the tint color for the image disableText boolean false disable the text part if you only want to use switch button itself style ViewStyle default set or override the style object for the main container textStyle TextStyle default set or override the style object for the text imageStyle ImageStyle default set or override the style object for the image textContainerStyle ViewStyle default set or override the style object for text container

Future Plans

  • [x] LICENSE
  • [ ] Write an article about the lib on Medium

Author

FreakyCoder, [email protected]

GitHub

https://github.com/WrathChaos/react-native-switch-button


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK