React native — Slide bar Animation

Animation has been there in the industry for quite a while and technically so far I remember it started from Disney producing Micky mouse. And over a period of time, it has developed & transformed to a greater extent which helps to turn the user experience to a different level.

Animation from being just in cartoons have transitioned successfully in various level where it involves user attention visually and operate it.

Having said that, applying good design principles in combination with consistency & intuitive design in the user journey creates a big impact towards the success of the app.

Animation in React native is interesting, challenging & engaging.

I want to demonstrate a useful and not a complex animation which i’m sure lot of people might have experienced and have done it as well.

This is all about slide bar animation.

Generally animation needs little more thought than a normal component where we have to decide on what and how the components need to animate based on the design.

What it needs

• Pan responder
• Dimension
• Animated
• Easing
• View and Text,
• StyleSheet,
• TouchableOpacity

Objective:

The idea is to slide a bar having a screen width from right to left, so that right side component will be displayed upon dragging from right to left. And in this case, include a delete button as the right hand side component, so, upon pressing the delete button the whole row should be deleted completely.

https://youtu.be/Vcp-h2HfANQ

How to do:

• Define a container View with

{flex : 1}

• Define a Animated wrapper view inside the container, so that it should hold two components together in a row which should look like this below

{
  flex: 1,
  alignItems: ‘center’,
  flexDirection: ‘row’
}

• Inside the Animated wrapper, create a first Animated.View component with the text for eg., “Drag me from right to left” having the style properties as follows

{
  backgroundColor: ‘skyblue’,
  height: 50,
  alignItems: ‘center’,
  justifyContent: ‘center’,
  width: screenWidth
}

• Create a second Animated.View component with the following style properties

{
  backgroundColor : ‘rgb(255, 99, 71)’,
  height: 50,
  justifyContent: ‘center’,
  width: screenWidth, // coming from Dimensions.get('window').width
  alignItems : ‘flex-start’,
  paddingHorizontal: 20
}

• Initialize the panResponder using React.useRef to handle the Gesture movements
• Attach the panResponder handler to the first component mentioned above

Here is the important part for Animation:

• The logic behind this is to operate the animation upon x co-ordinates, so when we drag the component along the x axis, it should animate (Ie., the first component should move from right to left and the second component should be displayed).
• For the above one to achieve, initially we need to define the Animated.Value as follows at the beginning

const animated = new Animated.ValueXY(0);

• Secondly we need to use the above ‘animated’ variable to handle the x-values which can be achieved with Animated.event to be defined for onPanResponderMove.

onPanResponderMove: Animated.event([null, { dx: animated.x}])

• Since we don’t want to fully drag the component and want to limit and to check how far we can offset the value of X, we can define something like this at the beginning of gesture starting in onPanResponderGrant

onPanResponderGrant: (evt, gestureState) => {
  animated.setOffset({x : -30});  // this is optional
  animated.x.setValue(gestureState.x0 - 30); // this is used put back to its original state when the first component is tapped again.
}

• Since I mentioned that we need to work along the x-axis, it is required to map distance along the x-axis using interpolation and transform the interpolation to translateX which can be defined as below

const animatedInterpolation = animated.x.interpolate({
   inputRange: [0, 1],
   outputRange: [0, .25], //map the distance from the original
   extrapolateRight:’clamp’,
   easing: Easing.in
});
const animatedStyles = { transform : [{ 
  translateX :animatedInterpolation}]}

• Add the animatedStyles in the first & second Animated.View component mentioned above. Thats it for the first part.

Next part of animation happens when you tap the delete button upon which the row has to be deleted. This can be done by setting opacity from 1 to 0 upon tapping the delete button which is easy.

• Define the Animated value as

const hideAnimate = new Animated.Value(1);
const [isRowToHide, setIsRowToHide] = useState(false);

• OnPress of the delete button

const hideRow = () => {
setIsRowHToHide(true);
}

• So upon re-rendering define the Animated timing

isRowToHide && Animated.timing(hideAnimate, {
   toValue: 0,
   duration: 400,
   useNativeDriver: true,
   easing: Easing.inOut(Easing.quad)
}).start()

• Add the opacity hideAnimate in the wrapper of first and second component

That is all to be done for the slide bar animation. Normally this type of animation is used to delete an item from the FlatList where the above animation can be extended for every reference of the item in the FlatList.

This is just a sample and more of basic and of-course it can enhanced to a different level. I thought it might help someone to quickly start doing the slide animation.

Hope this helps someone.

Please let me know if you have any questions. Happy to share source code in case someone needs.

Thanks!!!