React-Native-Toggle-Element 2.0

The library has been rewritten with Typescript support in version 2.0.0. This library will work well on both React Native and Expo, please check out the examples folder.

Installation

yarn add react-native-toggle-element

# or with npm

npm install react-native-toggle-element

Usage

Init value

import React, { useState } from "react";
import Toggle from "react-native-toggle-element";

const [toggleValue, setToggleValue] = useState(false);

Toggle with default components

<Toggle value={toggleValue} onPress={(val) => setToggleValue(val)} />

Toggle with left title

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftTitle="On"
/>

Toggle with right title

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftTitle="Right"
/>

Toggle with left title and right Title

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftTitle="Left"
  rightTitle="Right"
/>

Toggle with custom left component

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftComponent={<Icon name="credit" width="30" height="30" fill={"#3BD2B5"} />}
/>

Toggle with custom right component

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  rightComponent={<Icon name="plus" width="30" height="30" fill={"#3BD2B5"} />}
/>

Toggle with mixed left & right components

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  disabled
  leftComponent={
    <Icon name="credit" width="30" height="30" fill={Colors.tabIconSelected} />
  }
  rightComponent={
    <Icon name="plus" width="30" height="30" fill={Colors.tabIconSelected} />
  }
/>

Toggle with thumb button components

<ToggleButton
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  thumbActiveComponent={
    <Icon name="sun" width="40" height="40" fill={"#3BD2B5"} />
  }
  thumbInActiveComponent={
    <Icon name="night" width="40" height="40" fill={"#03452C"} />
  }
  trackBar={{
    activeBackgroundColor: "#9ee3fb",
    inActiveBackgroundColor: "#3c4145",
    borderActiveColor: "#86c3d7",
    borderInActiveColor: "#1c1c1c",
    borderWidth: 5,
    width: 100,
  }}
/>

Disabled Toggle

<Toggle
  disabled
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftTitle="Left"
  rightTitle="Right"
/>

Modify style

Modify TrackBar Size

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftTitle="Left"
  rightTitle="Right"
  trackBar={{
    width: 200,
    height: 50,
    radius: 25,
  }}
/>

Modify TrackBar Style

TrackBarStyle will override Border active color & Border inactive color

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  trackBarStyle={{
    borderColor: "green",
  }}
  trackBar={{
    borderWidth: 2,
  }}
/>

Modify ThumbButton

<Toggle
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftTitle="Left"
  rightTitle="Right"
  thumbButton={{
    width: 60,
    height: 60,
    radius: 30,
  }}
/>

Modify Disabled Toggle

<Toggle
  disabled
  disabledTitleStyle={{ color: "red" }}
  disabledStyle={{ backgroundColor: "gray", opacity: 0.3 }}
  value={toggleValue}
  onPress={(newState) => setToggleValue(newState)}
  leftTitle="Left"
  rightTitle="Right"
/>

Props

containerStyle
disabled
disabledStyle
disabledTitleStyle
leftComponent
leftTitle
rightComponent
rightTitle
thumbActiveComponent
thumbInActiveComponent
thumbStyle
thumbButton
trackBar
trackBarStyle
animationDuration

Reference

Type	Default
React element or component	none

containerStyle style for main container

Type	Default
style	none

disabled disable the Toggle Button component (optional)

Type	Default
boolean	false

disabledStyle styling for Toggle Button Component for disabled (optional)

Type	Default
View style (object)	none

disabledTitleStyle styling for leftTitle & right Title(optional) when Toggle Button set with status is disabled(optional). If you want to set disable style for Active & Inactive you should use custom left component or custom right component

Type	Default
Text style (object))	none

leftComponent define your left component here

Type	Default
React element or component	none

leftTitle button left title (optional)

Type	Default
string	none

rightComponent define your right component here (optional)

Type	Default
React element or component	none

rightTitle button right title (optional)

Type	Default
string	none

thumbActiveComponent define your thumb button component when status is active (optional)

Type	Default
React element or component	none

thumbInActiveComponent define your thumb button component when status is inactive (optional)

Type	Default
React element or component	none

thumbStyle thumb button style (optional). Styling will override the value from thumbButton props

Type	Default
View style (object)	none

thumbButton define to change size and radius and color depend on active / inactive status (optional)

Type	Default
borderWidth	0
width	50
height	50
radius	25
activeBackgroundColor	#fde2e2
inActiveBackgroundColor	#ffb6b6

trackBar define to change size and radius and color depend on active / inactive status (optional)

Type	Default
borderWidth	0
width	50
height	50
radius	25
activeBackgroundColor	#fde2e2
inActiveBackgroundColor	#ffb6b6
borderActiveColor	transparent
borderInActiveColor	transparent

trackBarStyle trackbar style (optional). Styling will override the value from trackBar props

Type	Default
View style (object)	none

animationDuration duration of the thumb button animation (optional).

Type	Default
number	350

mymai91/react-native-toggle-element