Animated Scaling Button in React Native

April 21, 2021Posted intutorialNo Comments
In this post, I will try to describe how can we easily create an animated scaling button in react native. First, let's see how does the button work in action. Animated-Scaled Button We can use Animated.sequence in order to scale up and down sequentially. So onPress button, the code looks like the following - onPress={() => { Animated.sequence([ Animated.timing(selectedAnim, { toValue: 2, duration: 300, useNativeDriver: true, }), Animated.timing(selectedAnim, { toValue: 1, duration: 300, useNativeDriver: true, }) ]).start(() => setSelected(prev=>!prev)); }} Finally we just need to use this selectedAnim value in our Animated.View. <Animated.View style={[{transform: [{ scale: selectedAnim }]}]}> The source…

Timesliders in React Native

April 5, 2021Posted incode-read, tutorialNo Comments
From my recent code-read, recently I have learned how to create custom time sliders. All credit goes to my colleague. I am just sharing my learning! Let us first see what do we want to make. We want to convert a slider into time sliders where users can pick a single time or a time range. single time slider time range slider Single time slider: First, let us set our component for this. With this snippet, we can get our init done for the slider. For our slider component, I am using the react-native-multi-slider package. With this package, you get…