How to use react-navigation-shared-element - 5 common examples

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,