npm

@splicer97/react-native-switch
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

react-native-switch npm version Downloads

Custom Switch component for React Native that use Reanimated and Gesture Handler

example.gif.

Installation

First, you need to install and configure the Reanimated and Gesture Handler libraries

Then install library

npm install @splicer97/react-native-switch

or

yarn add @splicer97/react-native-switch

Usage

import Switch from '@splicer97/react-native-switch';

// ...
const [state, setState] = useState(false);

return (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <View style={styles.container}>
      <Switch value={state} onValueChange={setState} />
    </View>
  </GestureHandlerRootView>
);

Props

Props Type Required Description
value boolean true Current state of the component
onValueChange (value: boolean) => void true Change of component state
disabled boolean false Inactive state of the component
activeColor string false Container color when component is active
inactiveColor string false Container color when component is inactive
disabledActiveColor string false Container color when component is active and disabled
disabledInactiveColor string false Container color when component is inactive and disabled
shouldCancelWhenOutside boolean false Should a swipe handler be end if your finger is outside the component. Default false
containerStyle StyleProp<ViewStyle> false Switch container style
circleStyle StyleProp<ViewStyle> false Switch circle style
trackWidth number false The width that the circle will be able to move. Default formula is 'containerWidth - circleWidth - containerPaddingHorizontal * 2'

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

Package Sidebar

Install

npm i @splicer97/react-native-switch

Weekly Downloads

102

Version

1.0.0

License

MIT

Unpacked Size

35 kB

Total Files

10

Last publish

Collaborators

  • splicer97