React-Native page transitions - react-native

Question

I'm not using the native navigation for my app. I have these SVGIcon that I want the user to tap and have the new page slide in from the right moving left. On that page when they tap the back, the page should slide back out to right. In other cases, I want the page to slide in from the left, or from the top, etc... Each time, the "back" button should just reverse that transition.
I found this package where I was able to get pages to slide in from the right. The issue I have is that the back button also slides the page off to the left. Here's a sample code I have doing this.
import React from 'react';
import { createTransition, SlideLeft, SlideRight } from 'react-native-transition';
const Transition = createTransition(SlideLeft);
export default class App extends React.Component {
//... some code to decide what page is CurrentScreen
render() {
return (
<Transition>
<CurrentScreen navigate={this.navigate} />
</Transition>
)
}
}
From this code, I'm not sure how I would implement SlideRight if the Transition node is already using SlideLeft. Maybe there's a better package, or a built in way to handle what I want?

Answer 1

Have a look at the following:
https://reactnavigation.org/docs/en/
https://github.com/fram-x/FluidTransitions
the react navigation lib is the simplest to implement, and there is a recommended community extension for fluid transitions, which would allow you to set an an appear and disappear animation:
<Transition appear='scale' disappear='bottom'>
<View style={styles.circle}/>
</Transition>
for native transitions have a look at the excellent library from the wix team: https://wix.github.io/react-native-navigation/#/third-party-libraries-support