0

I'm setting up an on boarding screen with 4 screens using react-native-swiper. While swiping i need elastic animation which i cant able to do.I have gone through many tutorials and npm packages as well from past three days but cant able to get the solution.

I need animation something like this .

Any Suggestions appreciated

Sai kiran
  • 237
  • 3
  • 15

1 Answers1

1

I think this is going to be really hard. If it isn't absolutely necessary, I would cut that. Otherwise, the direction I can suggest to you is first building this animation, then building your own custom swiper on top. The only way I can see of doing this is maybe an animation of a SVG. For those, I would recommend react-native-svg and react-native-reanimated.

Another solution, if you can find a version of this for Android as you did for iOS, you can build a library that does this. Either way, I don't know your level of expertise in React Native, but I would strongly suggest against trying to tackle a problem like this unless you feel confident in doing so.

If you do feel confortable, and you have any questions, feel free to message me, and good luck!

Filipe
  • 866
  • 5
  • 16
  • i started reactnative 6 months back and in the new project for onboarding i have this. I cant able to understand how to do it at. – Sai kiran May 03 '19 at 21:21
  • You can build what you want by using an SVG with quadratic Bézier curves, in which the control points animate between being in the line, and being far from it. I can't show you the whole process, as this should be maybe a few hours of work. If you have any specific questions about this feel free to message me. Good starting points are the documentations of the libraries I suggested previously, and the quadratic Bézier section of [this book](http://svgpocketguide.com/book/#section-2) – Filipe May 05 '19 at 19:45
  • 1
    Thanks for taking time and posting here one possible solution. Im not going to accepting as an answer because i haven't tried this solution. Still im going to upvote for the effort that you have done in providing a solution. Thanks!! – Sai kiran Nov 25 '19 at 06:22