Rn-animated-switch NPM

rn-animated-switch

A simple Switch component with animations and icons or whatever you want, reducing your development time for great apps to enjoy your coffee <( ͡° ͜ʖ ͡°)☕️

preview

Install

from yarn

yarn add rn-animated-switch

from npm

npm i rn-animated-switch

Usage

import RNAnimatedSwitch from 'rn-animated-switch'

...

const circleContent = () => {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        <Text>Hi!</Text>
      </View>
    )
  }

 const renderActiveComponent = () => {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Image source={Images.smile} style={{width: 30, height: 30}} />
      </View>
    );
  };

const renderInactiveComponent = () => {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Image source={Images.sadBoyzSiTinh} style={{width: 30, height: 30}} />
      </View>
    );
  };

...

 <RNAnimatedSwitch
          width={100}
          height={40}
          value={value}
          onValueChange={setValue}
          activeColor={'#282E38'}
          inactiveColor={'#D8F3FF'}
          circleContent={circleContent}
          activeComponent={renderActiveComponent}
          inactiveComponent={renderInactiveComponent}
/>

...

Properties

Prop	Default	Type	Description
`width`	none	`number`	Width of Switch
`height`	none	`number`	Height of Switch
`value`	none	`boolean`	Value of Switch
`onValueChange`	none	`function`	The callback function for when the value is changed in Switch, providing the updated value in params
`activeColor`	none	`string`	Active color
`inactiveColor`	none	`string`	Inactive color
`activeCircleColor`	none	`string`	Active color of circle
`inactiveCircleColor`	none	`string`	Inactive color of circle
`isDisable`	none	`boolean`	Disable switch
`disableColor`	none	`string`	Switch color when disabled
`circleContent`	none	`element`	Content of Switch's circle
`activeComponent`	none	`element`	Component show when switch inactive
`inactiveComponent`	none	`element`	Component show when switch inactive