0.1.0 • Published 3 years ago
@nghinv/react-native-switch v0.1.0
@nghinv/react-native-switch
React Native Switch Library
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 |