react-native-dark-mode-switcher

Installation

Add the dependency:

npm i react-native-dark-mode-switcher

Peer Dependencies

No Dependencies

Usage

Import

import DarkModeSwitcher from "react-native-dark-mode-switcher";

Fundamental Usage

<DarkModeSwitcher
  value={switchValue}
  onChange={() => {
    setSwitchValue((previousState: boolean) => !previousState);
  }}
/>

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
value	boolean	true	set the value of the switch
onChange	function	undefined	set your own function for when the switch value is changed

Customization (Optionals)

Property	Type	Default	Description
style	ViewStyle	default	set/override the style object for the outer container
containerStyle	ViewStyle	default	set/override the style object for the container
moonStyle	ViewStyle	default	set/override the style object for the moon style
knobStyle	ViewStyle	default	set/override the style object for the knob style
activeColor	color	"#fff"	change the active background color of switch
inactiveColor	color	"#000"	change the inactive background color of switch
size	number	100	change the size of the switch
animationDuration	number	200	change the animation duration
animationEasing	Easing	Easing.linear	change the animation easing type

Future Plans

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

Credits

Heavily inspired by Vijaydemonz's React Native Animated Switch NPM

Author

FreakyCoder, [e-mail]

License

React Native Dark Mode Switcher is available under the MIT license. See the LICENSE file for more info.