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 <( ͡° ͜ʖ ͡°)☕️

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 |

License

MIT License.