Customizable React Native Switch Component

A simple and customizable switch UI component for React Native.

How to use it:

1. Install and import the switch component.

# Yarn
$ yarn add react-native-switch-toggles

# NPM
$ npm i react-native-switch-togglesimport Switch from 'react-native-switch-toggles';

2. Add the switch component to the app.

const [isEnabled, setIsEnabled] = React.useState(false);
<Switch
  size={50}
  value={isEnabled}
  onChange={(value) => setIsEnabled(value)}
  activeTrackColor={"#45D058"}
  renderOffIndicator={() => <Text style={{ fontSize: 24 color: 'red' }}>OFF</Text>}
  renderOnIndicator={() => <Text style={{ fontSize: 24, color: 'green' }}>ON</Text>}
/>

3. Available component props.

/**
 * size of the switch
 */
size?: number;
/**
 * switch on/off state value
 */
value: boolean;
/**
 * enable/disable switch
 */
disabled?: boolean;
/**
 * callback on switch value change
 */
onChange: (value: boolean) => void;
/**
 * track color when switch value is true
 */
activeTrackColor?: string;
/**
 * track color when switch value is false
 */
inactiveTrackColor?: string;
/**
 * thumb color when switch value is true
 */
activeThumbColor?: string;
/**
 * thumb color when switch value is false
 */
inactiveThumbColor?: string;
/**
 * render a custom view on switch track when the switch value is true
 */
renderOnIndicator?: () => React.ReactNode;
/**
 * render a custom view on switch track when the switch value is false
 */
renderOffIndicator?: () => React.ReactNode;
/**
 * ender a custom view on switch thumb when the switch value is true
 */
renderActiveThumbIcon?: () => React.ReactNode;
/**
 * render a custom view on switch thumb when the switch value is false
 */
renderInactiveThumbIcon?: () => React.ReactNode;

Preview:

Download Details:

Author: nithinpp69

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/nithinpp69/react-native-switch-toggles

License: MIT

#react-native #react