Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
import {useScreens} from 'react-native-screens';
import {MainScreen} from './MainScreen';
import {DetailScreen} from './DetailScreen';
import {springyFadeIn} from './transitions';
useScreens();
// Instead of calling `createStackNavigator`, wrap it using `createSharedElementStackNavigator`
const StackNavigator = createSharedElementStackNavigator(
createStackNavigator,
{
Main: MainScreen,
Detail: DetailScreen,
},
{
transitionConfig: () => springyFadeIn(),
},
);
export default createAppContainer(StackNavigator);
...screens,
},
{
initialRouteName: 'Modal',
mode: 'modal',
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Modal',
tabBarIcon: ({tintColor}) => (
),
tabBarVisible: isTabBarVisible(navigation),
}),
}
);
const fadeNavigator = createSharedElementStackNavigator(
createStackNavigator,
{
Fade: MainScreen,
...screens,
},
{
initialRouteName: 'Fade',
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Fade',
tabBarIcon: ({tintColor}) => (
),
tabBarVisible: isTabBarVisible(navigation),
}),
transitionConfig: () => fadeIn(0, true),
}
},
{
initialRouteName: 'Stack',
//transitionConfig: () => fadeIn(5000),
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Stack',
tabBarIcon: ({tintColor}) => (
),
tabBarVisible: isTabBarVisible(navigation),
}),
transitionConfig: Platform.OS === 'android' ? () => fromRight() : undefined,
}
);
const modalNavigator = createSharedElementStackNavigator(
createStackNavigator,
{
Modal: MainScreen,
...screens,
},
{
initialRouteName: 'Modal',
mode: 'modal',
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Modal',
tabBarIcon: ({tintColor}) => (
),
tabBarVisible: isTabBarVisible(navigation),
}),
}
return {
transitionSpec,
screenInterpolator: ({ position, scene }: any) => {
const { index } = scene;
const opacity = position.interpolate({
inputRange: [index - 1, index],
outputRange: [0, 1],
});
return { opacity };
},
};
}
const StackNavigator: any = createSharedElementStackNavigator(
createStackNavigator,
{
Main: MainScreen,
Detail: DetailScreen,
},
{
transitionConfig: () => springyFadeIn(),
defaultNavigationOptions: {
headerTintColor: Colors.tabIconSelected,
headerTitleStyle: {
color: '#000',
},
},
}
);
};
function isTabBarVisible(navigation: any): boolean {
const currentRoute =
navigation.state.routes[navigation.state.routes.length - 1];
switch (currentRoute.routeName) {
case 'Card':
case 'Detail':
case 'Pager':
return false;
default:
return true;
}
}
const stackNavigator = createSharedElementStackNavigator(
createStackNavigator,
{
Stack: MainScreen,
...screens,
},
{
initialRouteName: 'Stack',
//transitionConfig: () => fadeIn(5000),
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Stack',
tabBarIcon: ({tintColor}) => (
),
tabBarVisible: isTabBarVisible(navigation),
}),
transitionConfig: Platform.OS === 'android' ? () => fromRight() : undefined,