4 changed files with 79 additions and 9 deletions
@ -0,0 +1,58 @@ |
|||
import React, { useRef, useState } from "react"; |
|||
import { |
|||
ScrollView, |
|||
Animated, |
|||
} from "react-native"; |
|||
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'; |
|||
import Icons from '../themes/Icons'; |
|||
import Colors from "../themes/Colors"; |
|||
import Metrics from "../themes/Metrics"; |
|||
import { styles } from "../screens/styles/AppStyles"; |
|||
|
|||
function ScrollingPicker() { |
|||
const scrollX = useRef(new Animated.Value(0)).current; |
|||
const [selected, setSelected] = useState(0); |
|||
|
|||
function onScroll(event){ |
|||
if (event.nativeEvent.contentOffset.x === 0) { |
|||
setSelected(0); |
|||
} else if (event.nativeEvent.contentOffset.x === Metrics.icons.buttonIcon) { |
|||
setSelected(1); |
|||
} |
|||
Animated.event([ |
|||
{ |
|||
nativeEvent: { |
|||
contentOffset: { |
|||
x: scrollX |
|||
} |
|||
} |
|||
} |
|||
], {useNativeDriver: true}) |
|||
} |
|||
|
|||
return ( |
|||
<ScrollView |
|||
horizontal={true} |
|||
pagingEnabled={true} |
|||
showsHorizontalScrollIndicator={false} |
|||
style={styles.modePicker} |
|||
onScroll={onScroll} |
|||
scrollEventThrottle={0} |
|||
> |
|||
<MaterialIcon |
|||
key={0} |
|||
name={Icons.squareIcons.square} |
|||
color={Colors.material.green400} |
|||
size={Metrics.icons.buttonIcon} |
|||
/> |
|||
<MaterialIcon |
|||
key={1} |
|||
name={Icons.squareIcons.plus} |
|||
color={Colors.material.green400} |
|||
size={Metrics.icons.buttonIcon} |
|||
/> |
|||
</ScrollView> |
|||
); |
|||
} |
|||
|
|||
export default ScrollingPicker; |
Loading…
Reference in new issue