'How to use horizontal weight meter in react native

I'm making a react native app now. I need to use a horizontal weight scrollbar in the app like the image which I attached. When a user scrolls the horizontal scrollbar, the app should show the weight numbers. I'm not sure how can I make this coding in react native application.

Weight scale screen:

enter image description here

I'm using react-native 0.63.4 now.

reactjsreact-nativescrollviewweighted-graph


Solution 1:[1]

you should use animated scroll view. then in the onScroll, you can access the X offset and set it to an Animated value. then in the Animated value event listener update your text

Solution 2:[2]

const translateX = useRef(new Animated.Value(0)).current;

return (
    <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event(
            [{nativeEvent: {contentOffset: {y: translateX}}}],
            {
                useNativeDriver: true,
            },
        )}>
        <Animated.View style={{transform: [{translateX: translateX}]}}>
            {/* Place Your Unit Measurement Shapes */}
        </Animated.View>
    </Animated.ScrollView>
);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alireza Hadjar
Solution 2 Alireza Hadjar

Related Questions