rn-switch-animated v0.2.0

rn-switch-animated

This is a switch component with animation. We can add custom text for on/off state and these are optionals, also can control background and knob color for both on and off state. This support 'spring' and 'timing' animation. Use of react-native-animated api is optional, you can use this without installing reanimated package.

INSTALLATION

Install npm library

yarn add rn-switch-animated

if using react-native-reanimated v2

yarn add rn-switch-animated@0.1.6

This library is using @react-native-masked-view/masked-view. Please install if not installed.

yarn add @react-native-masked-view/masked-view

(DEFAULT USED BUT CAN BE SKIPPED) This library also using react-native-reanimated v3 as default animation library, you have to install reanimated package. If you want to skip this, you must use Legacy switch from 'rn-switch-animated/legacy/LegacySwitch'.

yarn add react-native-reanimated

USAGE

Import library if using react-native-reanimated

import Switch from 'rn-switch-animated';

Import library if not using reanimated

import Switch from 'rn-switch-animated/legacy/LegacySwitch';

use component

 const [on, setOn] = useState(false)
  return <Switch
      value={on}
      onChange={setOn}
      springSpeed={250}
      animationType={'spring'}
      elevation={0}
      inactiveColor={colors?.colorGreyInactive}
      activeColor={colors.colorPrimary}
      activeText={'ON'}
      inactiveText={'OFF'}
      size={scaler(60)}
      activeTextStyle={{}}
      inactiveTextStyle={{}}
    />

SwitchProps

    value: boolean,
    onChange: (newValue: boolean, e?: GestureResponderEvent) => void,
    activeKnobColor?: string,
    inactiveKnobColor?: string,
    animationType?: 'spring' | 'timing'
    elevation?: number,
    inactiveColor: string,
    activeColor: string,
    activeText?: string,
    inactiveText?: string
    activeTextStyle?: StyleProp<TextStyle>
    inactiveTextStyle?: StyleProp<TextStyle>
    textStyle?: StyleProp<TextStyle>
    size?: number
    duration?: number
    springSpeed?: number