React Native Dynamically Add Remove Component using Animation in ScrollView

ScrollView in react native is one of the mostly used component after FlatList. ScrollView can render different types of component with different properties. In this tutorial we would Dynamically Add Remove Component using Animation in ScrollView component. We would add Views in scrollView on application run time and also provide the functionality to our user so he can remove them dynamically with animation. We are using the translateX animation type so the views comes from left side. If user decided to remove the views then they would remove by going into right side of mobile screen. So let’s get started 🙂 .

Before going further i would like to show you the live screenshot of this application. See the screenshot below.

Live Screenshot:

Contents in this project Dynamically Add Remove Component using Animation in ScrollView in React Native Android iOS Tutorial:

1. Import Animated, Dimensions, Image, LayoutAnimation, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, UIManager and View component in your project’s App.js file.

2. Create a constant variable named as width and get the device width dynamically using Dimensions.get(‘window’).width method. We would use this width variable to manage the width of device to know how inside we have to put the view with animation.

3. Create a class named as Animated_Item in your App.js file. We are creating our own animation component in this tutorial.

4. Creating the constructor() method in Animated_Item class. First of all we will set the Animated value to zero and store it in this.animatedValue. Now we would use the LayoutAnimation. LayoutAnimation usages when user delete an item from ScrollView then to reset the ScrollView on item delete with animation.

5. Create shouldComponentUpdate() inbuilt method with 2 parameters.

  1. shouldComponentUpdate() method is used to increase performance of react native mobile application.
  2. It returns value in true, false form.
  3. The use of shouldComponentUpdate() in our app is very important. It usages re-render disable. For example : If we have 10 items in our scrollView and we would add another new item. Then by default the app would render all 11 items again which would decrease the app performance. But by using shouldComponentUpdate() method we would only render the 11th item. This would increase the app performance.

6. Create componentDidMount() method in Animated_Item class.

In this method we would simply set the timing of animation perform time. How longer the animation take time to complete. You can increase or decrease the timing here as your requirement. We are also using the this.props.afterAnimationComplete() method which would receive a prop from parent component.

7. Create a function named as deleteItem() in Animated_Item class.

This function would remove the current selected item. We have defined the animation execution timing in it.

8. Creating code for render’s block in in Animated_Item class.

  • translate_Animation_Object : Used for moving animation with width constant.
  • opacity_Animation_Object : Used to increase and decrease the opacity of View on removing and adding time.
  • u00D7 : Creating X cross icon with UNI HTML code.
  • translateX : We are using the X-Type animation so the views will come from left side to right side. You can also use the translateY animation if you want to put view from top to bottom .

9. Complete source code for in Animated_Item class:

Now its time to code for your app’s main App.js parent App export default class.

10. Create a class named as App with export default syntax. This class would be the default calling parent class on application execution time.

11. Create constructor() in App class.

valueArray : State is used to manage all the items of array.

disabled : State disabled the Add item floating button when the animation is performing and then enable the button again on animation complete.

12. Create a function named as afterAnimationComplete() in App class. In this function we would increase the current item index number to +1 then enable the button with disabled false state.

13. Create a function named as add_New_View(). This function is used to add new view on current Scroll View items.

14. Create a function named as remove_Selected_Item() with ID parameter. We would pass the ID of current selected ITEM in it so it will remove that item only.

15. Create the ScrollView component in render’s return block. The implement the Animated_Item class component to render items using animation.

16. Creating Style for both classes.

17. Complete source code for App.js File :

Screenshot:

Dynamically Add Remove Component using Animation

Leave a Reply

Your email address will not be published. Required fields are marked *