react-native-full-switch

A simple and fully customizable React Native component that implements a switch (toggle) for android and ios, that also support in RTL.

Example :-------------------------: example

Installation

If using yarn:

yarn add react-native-full-switch

If using npm:

npm i react-native-react-native-full-switch

##Usage

import Switch from 'react-native-full-switch'
...

const [checked, setChecked] = useState(false)
...

<Switch
    isOn={checked}
    onChange={isOn => setChecked(isOn)}
    />

Documentation

| Name | Description | Default | Type | |-----------------------|----------------------------------------|---------|---------| | isOn | Require, determine if the Switch is on | false | Boolean | | onChange | Require, a function that returns the new state of the switch after a press | | Function | | trackWidth | The width style property of the track | 40 | Number | | trackHeight | The height style property of the track | 24 | Number | | curserWidth | The width style property of the curser | 20 | Number | | curserHeight | The height style property of the curser| 20 | Number | | space | The space of the curser from the beginning and the end of the track | 3 | Number | | disable | Disable the Switch for touch | false | Boolean | | opacity | Opacity of the press. number between 0 to 1 | 0.8 | Number | | trackOnColor | The color of the track on on state | "rgb(78,209,100)" | String | | trackOffColor | The color of the track on off state | "rgb(223,223,223)" | String | | vertical | Change the animation to vertical | false | Boolean | | text | Text to show on the track | "" | String | | textStyle | A custom style for the text | | Style object | | reversed | Revers the direction of the animation | false | Boolean | | trackStyle | A custom style for the track | | Style object | | curserOnColor | The color of the curser on on state | white | String | | curserOffColor | The color of the curser on off state | white | String | | curserStyle | A custom style for the curser | | Style object | | disableOnCurserColor | Disable color of the curser in on state | "rgb(233,233,233)" | String | | disableOffCurserColor | Disable color of the curser in off state| "rgb(233,233,233)" | String | | duration | The duration of the animation in milliseconds | 500 | Number |
| disableOnTrackColor | Disable color of the track on on state | "rgba(78,209,100, 0.6)" | String | | disableOffTrackColor | Disable color of the track on off state | "rgba(223,223,223,0.6)" | String | | renderChildCurser | Render a custom child component to the curser | | Component |

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

License

MIT