0

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.

Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41
Robin Shao
  • 13
  • 1
  • 4

2 Answers2

0

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

Alireza Hadjar
  • 450
  • 4
  • 10
0
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>
);
Alireza Hadjar
  • 450
  • 4
  • 10
  • You should Place line shapes from your picture in the comment section which I Wrote. If you don't know how to create a measure unit elements, notify me so I help you – Alireza Hadjar May 25 '21 at 15:35
  • Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P May 25 '21 at 16:52
  • This code moves the Animated.View along Animated.ScrollView. It means if you scroll 20 pixels, then the Animate.View will be moved 20 pixels – Alireza Hadjar Aug 15 '21 at 08:59