SHARE
TWEET

Untitled

a guest Sep 22nd, 2019 167 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { Easing, Animated, Platform } from 'react-native';
  3. import { createStackNavigator, createDrawerNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
  4.  
  5. import HomeMain from '../Pages/Home/Main';
  6. import HomeJoin from '../Pages/Home/Join';
  7.  
  8. import Menu from './Menu';
  9. import Header from '../components/Header';
  10. import { Drawer } from '../components/';
  11. import Icon from 'react-native-vector-icons/Ionicons';
  12.  
  13. const transitionConfig = (transitionProps, prevTransitionProps) => ({
  14.   transitionSpec: {
  15.     duration: 400,
  16.     easing: Easing.out(Easing.poly(4)),
  17.     timing: Animated.timing,
  18.   },
  19.   screenInterpolator: sceneProps => {
  20.     const { layout, position, scene } = sceneProps;
  21.     const thisSceneIndex = scene.index
  22.     const width = layout.initWidth
  23.    
  24.     const scale = position.interpolate({
  25.       inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
  26.       outputRange: [4, 1, 1]
  27.     })
  28.     const opacity = position.interpolate({
  29.       inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
  30.       outputRange: [0, 1, 1],
  31.     })
  32.     const translateX = position.interpolate({
  33.       inputRange: [thisSceneIndex - 1, thisSceneIndex],
  34.       outputRange: [width, 0],
  35.     })
  36.  
  37.     const scaleWithOpacity = { opacity }
  38.     const screenName = "Search"
  39.  
  40.     if (screenName === transitionProps.scene.route.routeName ||
  41.       (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName)) {
  42.       return scaleWithOpacity;
  43.     }
  44.     return { transform: [{ translateX }] }
  45.   }
  46. })
  47.  
  48. const FooterConfig = {
  49.   tabBarOptions: {
  50.     activeTintColor: 'red',
  51.     inactiveTintColor: 'grey',
  52.     style: {
  53.       backgroundColor: 'white',
  54.       borderTopWidth: 0,
  55.       shadowOffset: { width: 5, height: 3 },
  56.       shadowColor: 'black',
  57.       shadowOpacity: 0.5,
  58.       elevation: 5
  59.     }
  60.   }
  61. }
  62.  
  63. const HomeMainStack = createStackNavigator({
  64.   Home: {
  65.     screen: HomeMain,
  66.     navigationOptions: ({navigation}) => ({
  67.       header: <Header search title="Home" navigation={navigation} />,
  68.     })
  69.   }
  70. },
  71. {
  72.   cardStyle: {
  73.     backgroundColor: '#EEEEEE', //this is the backgroundColor for the app
  74.   },
  75.   transitionConfig,
  76. });
  77.  
  78. const HomeJoinStack = createStackNavigator({
  79.   Home: {
  80.     screen: HomeJoin,
  81.     navigationOptions: ({navigation}) => ({
  82.       header: <Header search title="Ajak Join" navigation={navigation} />,
  83.     })
  84.   }
  85. },
  86. {
  87.   cardStyle: {
  88.     backgroundColor: '#EEEEEE', //this is the backgroundColor for the app
  89.   },
  90.   transitionConfig,
  91. });
  92.  
  93. const RootStack = createBottomTabNavigator({
  94.   Home: {
  95.      screen: HomeMain,
  96.      navigationOptions: {
  97.        tabBarLabel: 'Home',
  98.        tabBarIcon: ({ tintColor }) => (
  99.          <Icon name={Platform.OS === "ios" ? "ios-close-circle" : "md-close-circle"} color={tintColor} size={24} />
  100.        )
  101.      }
  102.    },
  103.    Join: {
  104.     screen: HomeJoin,
  105.     navigationOptions: {
  106.       tabBarLabel: 'Join',
  107.       tabBarIcon: ({ tintColor }) => (
  108.         <Icon name={Platform.OS === "ios" ? "ios-close-circle" : "md-close-circle"} color={tintColor} size={24} />
  109.       )
  110.     }
  111.   },
  112.  },
  113.  FooterConfig
  114.  )
  115.  
  116.  const Stack = createStackNavigator({
  117.   Home: {
  118.     screen: RootStack,
  119.     navigationOptions: ({navigation}) => ({
  120.       header: <Header search title="Home" navigation={navigation} />,
  121.     })
  122.   }
  123. },
  124. {
  125.   cardStyle: {
  126.     backgroundColor: '#EEEEEE', //this is the backgroundColor for the app
  127.   },
  128.   transitionConfig,
  129. });
  130.  
  131. console.log(RootStack)
  132.  
  133.  
  134. const AppStack = createDrawerNavigator(
  135.   {
  136.    
  137.     Home: {
  138.       screen: RootStack,
  139.       navigationOptions: {
  140.         drawerLabel: ({focused}) => (
  141.           <Drawer focused={focused}  title="Home" />
  142.         )
  143.       }
  144.     },
  145.     // Components: {
  146.     //   screen: RootStack,
  147.     //   navigationOptions: {
  148.     //     drawerLabel: ({focused}) => (
  149.     //       <Drawer focused={focused}  title="Ajak Paketan" />
  150.     //     )
  151.     //   }
  152.     // },
  153.    
  154.   },
  155.   Menu,
  156. );
  157. const AppContainer = createAppContainer(Stack);
  158. export default AppContainer;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top