search

leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.42k stars 2.34k forks source link

Transition animation between pages #639

Open thierryskoda opened 7 years ago

thierryskoda commented 7 years ago

Hi,

Is it possible to add some animation between transtions of "Views"? For example, in Snapchat, when you start swiping up to go to your profile, the new view start gradually losing some opacity while the new view opacity increase. It creates a nice fluid animation.

Thank you! Thierry

bispul commented 6 years ago

did you find any way you can get that transition ?

thierryskoda commented 6 years ago

Yes but I didn't use react-native-swiper to do it. I simply used the Animated and Panresponser libraries that are built-in react-native.

I put the second view inside the home view but with position: 'absolute and used transform: [{translateX}] and opacity to animate the whole thing.

bispul commented 6 years ago

@thierryskoda hey can you share a snippet of your code. specially the onPanResponderMove part, I am stuck on that which would be a huge help. Thanks in advance.

thierryskoda commented 6 years ago

Hey @bispul. Here's my code: 

onPanResponderMove: Animated.event([
      null, {dx: this.state.pan.x, dy: this.state.pan.y},
    ]),

I took it from here: https://dev.to/hyra/getting-started-with-the-panresponder-in-react-native-9mf