0

new to animation in react native, I would like to know if anyone has an idea on how to achieve this in react native. Using the horizontal scrollview, when a particular view is in front of the screen, the size is slightly bigger than the rest, like a carousel slide.

enter image description here

vincent O
  • 518
  • 8
  • 33

1 Answers1

1

Step - 1 : Open a modal.

Step - 2 : Add a view of size : windowWidth/2

Step - 3 : Add another view of size : windowWidth/1.5 (Add n number of views acc to your needs). Add all the views to a parent view by giving it style of flexDirection : row.

Step - 4 : Add panResponed which is availble with react-native gesture-handler.

Step - 5 : Add swipe responder to the view.

Step - 6 : Manage the state to manipulate when and which view to bring to front by changing the state on swipe event which you can get by pan responder.

Step - 7 : Based on state enlarge the view dynamically and smaller the view which is on less focus.

Step - 8 : Add a tint color of opaque black as to make that to contrast with the background and make the present view to the foreground.

Also note : You have to manage a empty view which will contain the history of the swiped views as initially the left view would be empty but as soon as swiped left the left view will have recent children.

I would still ask you to use react-native snap-coursel

Hope this helps. :)

Rishav Kumar
  • 4,979
  • 1
  • 17
  • 32