import * as React from 'react' ; import { Text , View , Button , StyleSheet } from 'react-native' ; import { createAppContainer } from 'react-navigation' ; import createAnimatedSwitchNavigator , { NavigationAnimatedSwitchProp , } from 'react-navigation-animated-switch' ; import { Transition } from 'react-native-reanimated' ; function Home ( { navigation } ) { return ( < View style = { styles . content } > < Text > Home screen < /Text> < Button title = "Go to settings" onPress = { ( ) => navigation . navigate ( 'Settings' ) } /> < /View>); } function Settings ( { navigation , } ) { return ( < View style = { styles . content } > < Text > Settings screen < /Text> < Button title = "Go to home" onPress = { ( ) => navigation . navigate ( 'Home' ) } /> < /View>); } const MySwitch = createAnimatedSwitchNavigator ( { Home , Settings , } , { transition : ( < Transition . Together > < Transition . Out type = "slide-bottom" durationMs = { 400 } interpolation = "easeIn" / > < Transition . In type = "fade" durationMs = { 500 } / > < /Transition.Together>), } ) ; const styles = StyleSheet . create ( { content : { flex : 1 , alignItems : 'center' , justifyContent : 'center' , } , } ) ; export default createAppContainer ( MySwitch ) ;