You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

62 lines
1.7 KiB

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";
import Fade from "./Fade";
function ScrollingPicker(props) {
const scrollX = useRef(new Animated.Value(0)).current;
function onScroll(event){
if (event.nativeEvent.contentOffset.x === 0) {
props.modeSetter('square');
} else if (event.nativeEvent.contentOffset.x === (Metrics.icons.buttonIcon * 2)) {
props.modeSetter('addition');
}
Animated.event([
{
nativeEvent: {
contentOffset: {
x: scrollX
}
}
}
], {useNativeDriver: true})
}
return (
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
style={styles.modePicker}
onScroll={onScroll}
scrollEventThrottle={0}
>
<Fade faded={props.mode !== 'square'} duration={250}>
<MaterialIcon
name={Icons.squareIcons.square}
color={Colors.material.dark}
size={Metrics.icons.buttonIcon}
style={styles.modePickerMargin}
/>
</Fade>
<Fade faded={props.mode !== 'addition'} duration={250}>
<MaterialIcon
name={Icons.squareIcons.plus}
color={Colors.material.dark}
size={Metrics.icons.buttonIcon}
style={styles.modePickerMargin}
/>
</Fade>
</ScrollView>
);
}
export default ScrollingPicker;