Nocturnal Pumpkin Maelstrom

    @5stones/react-native-switch
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    react-native-switch

    Customisable switch component for RN and React Native Web

    Installation

    $ npm install --save react-native-switch

    or

    yarn add react-native-switch

    Usage

    import { Switch } from 'react-native-switch';
     
    export const App = () => (
      <Switch
        value={true}
        onValueChange={(val) => console.log(val)}
        disabled={false}
        activeText={'On'}
        inActiveText={'Off'}
        circleSize={30}
        barHeight={1}
        circleBorderWidth={3}
        backgroundActive={'green'}
        backgroundInactive={'gray'}
        circleActiveColor={'#30a566'}
        circleInActiveColor={'#000000'}
        changeValueImmediately={true}
        renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)
        changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
        innerCircleStyle={{ alignItems: "center", justifyContent: "center" }} // style for inner animated circle for what you (may) be rendering inside the circle
        outerCircleStyle={{}} // style for outer animated circle
        renderActiveText={false}
        renderInActiveText={false}
        switchLeftPx={2} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
        switchRightPx={2} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
        switchWidthMultiplier={2} // multipled by the `circleSize` prop to calculate total width of the Switch
        switchBorderRadius={30} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
      />
    )

    Switch

    switch

    If this project was helpful to you, please Buy Me A Coffee

    Install

    npm i @5stones/react-native-switch

    DownloadsWeekly Downloads

    28

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • abourge
    • jspizziri
    • ken-michalak