Notary Public Mystifier

    react-native-full-switch

    1.1.3 • Public • Published

    PRs Welcome

    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

    Install

    npm i react-native-full-switch

    DownloadsWeekly Downloads

    9

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    249 kB

    Total Files

    6

    Last publish

    Collaborators

    • eldare