Switch XX
Description
A custom animated switch component that mirrors the API of React Native’s built-in `Switch`, making it a true plug-and-play replacement. It’s written in TypeScript and leverages `react-native-reanimated` for smooth animations, along with `react-native-gesture-handler` to support a `LongPress` gesture.
This component is fully customizable and supports the following props:
* `onValueChange`: Callback triggered with the new `value` when the switch changes state
* `value`: The current value of the switch (controlled mode)
* `defaultValue`: The initial value of the switch (uncontrolled mode)
* `size`: Controls the overall size of the switch
* `disabled`: Disables the switch and prevents gesture interactions
Ideal for replacing the native `Switch` with a more animated and interactive experience—no extra setup needed.
Installation
bunx @animatereactnative/cli@latest add switch-xx
npx @animatereactnative/cli@latest add switch-xx
yarn @animatereactnative/cli@latest add switch-xx
pnpm dlx @animatereactnative/cli@latest add switch-xx
Dependencies
| Package | Version |
|---|---|
react-native-gesture-handler | ~2.28.0 |
react-native-reanimated | ~4.1.0 |
react-native-svg | 15.12.1 |
To install these dependencies, you can use the following command:
bun add react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"
npm install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"
yarn install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"
pnpm install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"