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 [email protected]

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

prop names |type |default value | required | comment --- | --- | --- | --- | --- value | Bool | | required | Value for switch onChange | Function | | required | This prop change the state of switch activeKnobColor | ColorValue | 'white' | | Changes knob color for active switch inactiveKnobColor | ColorValue | 'white' | | Changes knob color for inactive switch elevation | Number | | | Changes elevation of Switch inactiveColor | ColorValue | | required | Background color of inactive switch activeColor | ColorValue | | required | Background color of active switch inactiveText | String | | | Text at the side of Nob at inactive switch activeText | String | | | Text at the side of Nob at active switch activeTextStyle | Style | | | Style for active text inactiveTextStyle | Style | | | Style for inactive text textStyle | Style | | | Style for both inactive and active text size | Number | 60 | | Size of the switch animationType | 'spring' | 'timing' | 'spring' | | This is transition animation type of switch duration | Number | 100 | | Changes animation duration of switch when selected animation type is timing springSpeed | Number | 250 | | This changed animation speed when selected animation type is springa