react-native-reanimated-toggle

react-native-reanimated-toggle

React native toggle component built with react-native-reanimated

• Built with Reanimated v2
• Built with typescript
• Customizable
• Support for gestures

Installation

For this component to work you need to have installed react-native-reanimated

yarn add react-native-reanimated-toggle

npm install react-native-reanimated-toggle

Usage

Default component

import { View } from 'react-native';
import Toggle from 'react-native-reanimated-toggle';

const App = () => {
  const [toggled, setToggled] = useState(false);
  return <View>
    <Toggle toggled={toggled} onChange={setToggled} />
  </View>
}

Customize design

import { View } from 'react-native';
import Toggle from 'react-native-reanimated-toggle';

const App = () => {
  const [toggled, setToggled] = useState(false);
  return <Toggle
    toggled={toggled}
    onChange={setToggled}
    thumbOffset={4}
    activeTrackColor="orange"
    trackStyle={{ height: 30, width: 48 }}
    thumbSize={20}
  />
}

Demo

For more examples check out expo project in /example folder.

License

MIT

Project bootstrapped with react-native-builder-bob