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

    0.1.0 • Public • Published

    @nghinv/react-native-switch

    React Native Switch Library


    CircleCI Version MIT License All Contributors PRs Welcome

    Installation

    yarn add @nghinv/react-native-switch

    or

    npm install @nghinv/react-native-switch
    • peerDependencies
    yarn add react-native-gesture-handler react-native-reanimated

    Usage

    import React, { useState } from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    import Switch from '@nghinv/react-native-switch';
    
    function App() {
      const [enable, setEnable] = useState(true);
    
      return (
        <View style={styles.container}>
          <View style={styles.row}>
            <Text style={styles.title}>Switch</Text>
            <Switch 
              value={enable} 
              onChange={(value) => setEnable(value)} 
            />
          </View>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 16,
      },
      title: {
        fontSize: 16,
      },
    });
    
    export default App;

    Property

    Property Type Default Description
    size Number 27
    thumbColor String white
    trackColor TrackColorProperty
    disabled Bool false
    value Bool false
    onChange (value: boolean) => void undefined
    style ViewStyle undefined
    progress Animated.SharedValue<number> undefined

    TrackColorProperty

    Property Type Default Description
    false String rgba(120, 120, 120, 0.3)
    true String #31D158

    Credits

    Install

    npm i @nghinv/react-native-switch

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    42.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • nghinv