0.1.0 • Published 3 years ago
@nghinv/react-native-slider v0.1.0
@nghinv/react-native-slider
React Native Slider Library use reanimated 2
Installation
yarn add @nghinv/react-native-slider
or
npm install @nghinv/react-native-slider
- peerDependencies
yarn add react-native-gesture-handler react-native-reanimated
Usage
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import Slider from '@nghinv/react-native-slider';
function App() {
const [value, setValue] = useState(0);
const onChange = useCallback((v) => {
setValue(v);
}, []);
const onConfirm = useCallback((v) => {
setValue(v);
}, []);
return (
<View style={styles.container}>
<Slider
min={1}
max={50}
step={1}
width={240}
value={value}
onChange={onChange}
onConfirm={onConfirm}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
},
});
export default App;
Property
Property | Type | Default | Description |
---|---|---|---|
min | number | 0 | |
max | number | 100 | |
step | number | 1 | |
value | number | 0 | |
animatedValue | Animated.SharedValue<number> | undefined | |
width | number \| string | undefined | |
style | ViewStyle | undefined | |
thumbRadius | number | 4 | |
trackSize | number | 2 | |
thumbTintColor | string | white | |
lowerTrackColor | string | #448aff | |
upperTrackColor | string | #616161 | |
onStart | () => void | undefined | |
onChange | (value: number) => void | undefined | |
onConfirm | (value: number) => void | undefined | |
disabled | boolean | false | |
touchScale | number | 1.6 | |
hitSlop | number | 16 | |
hapticFeedback | boolean | false |