How to use the react-navigation.createNavigator function in react-navigation

To help you get started, we’ve selected a few react-navigation examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github aksonov / react-native-router-flux / src / OverlayNavigator.js View on Github external
const OverlayNavigator = (
  routeConfigs,
  tabsConfig = {}
) => {
  const router = TabRouter(routeConfigs, tabsConfig);

  const navigator = createNavigator(
    router,
    routeConfigs,
    tabsConfig,
    'react-navigation/STACK'
  )(({ navigation }) => {
    const { state, dispatch } = navigation;
    const { routes } = state;

    // Figure out what to render based on the navigation state and the router:
    const Component = routeConfigs[tabsConfig.initialRouteName].screen;
    let initialIndex = 0;
    const routesMap = {};
    for (let i = 0; i < routes.length; i++) {
      const route = routes[i];
      if (route.routeName === tabsConfig.initialRouteName) {
        initialIndex = i;
github react-navigation / experimental-transitioner / ExampleA.js View on Github external
title="Go to Jane's profile"
    />
  
);

const ProfileScreen = ({ navigation }) => (
github srdjanprpa / FormulaOne / src / Standings / StandingsContent.js View on Github external
Drivers: {
      screen: DriversScreen,
      path: '/drivers'
    },
    Teams: {
      screen: TeamsScreen,
      path: '/teams'
    }
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'Drivers'
  }
)

const StandingsContent = createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView))

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  tabContainer: {
    backgroundColor: '#202930',
    flexDirection: 'row',
    height: 60
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabPress: {
github react-navigation / animated-switch / src / index.tsx View on Github external
export default function createAnimatedSwitchNavigator(
  routeConfigMap: NavigationRouteConfigMap<{}, NavigationAnimatedSwitchProp>,
  switchConfig: CreateNavigatorConfig<
    NavigationAnimatedSwitchConfig,
    NavigationSwitchRouterConfig,
    NavigationAnimatedSwitchOptions,
    NavigationAnimatedSwitchProp
  > = {}
) {
  const router = SwitchRouter(routeConfigMap, switchConfig);

  // TODO: don't have time to fix it right now
  // @ts-ignore
  const Navigator = createNavigator(AnimatedSwitchView, router, switchConfig);

  return Navigator;
}
github kiok46 / duckduckgo / src / screens / HistoryScreen / index.js View on Github external
return (
    
  );
};


const HistoryScreen = createNavigationContainer(
  createNavigator(HistoryTabRouter)(HistoryTabView)
);


const styles = StyleSheet.create({
  inputStyle: {
      height: 40,
      borderColor: 'gray',
      borderWidth: 2,
      paddingRight: 5,
      paddingLeft: 5,
      fontSize: 18,
      lineHeight: 23,
      backgroundColor: Colors.tintColor
  },
  searchAreaView: {
      paddingTop: 24,
github react-navigation / tabs / src / utils / createTabNavigator.tsx View on Github external
return (
    routes: RouteConfig,
    config: CreateNavigatorConfig<
      Partial,
      NavigationTabRouterConfig,
      Partial,
      NavigationTabProp
    > = {}
  ) => {
    const router = TabRouter(routes, config as any);

    return createNavigator(NavigationView as any, router, config as any);
  };
}
github vincentriemer / react-native-dom / Examples / NavigationPlayground / js / CustomTransitioner.js View on Github external
const Scene = scene.descriptor.getComponent();
    return (
      
        
      
    );
  };
}

const CustomRouter = StackRouter({
  Home: { screen: MyHomeScreen },
  Settings: { screen: MySettingsScreen }
});

const CustomTransitioner = createNavigationContainer(
  createNavigator(CustomNavigationView, CustomRouter, {})
);

export default CustomTransitioner;

const styles = StyleSheet.create({
  view: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  }
});
github agrcrobles / react-native-web-workspace / react-navigation-playground / js / CustomTabs.js View on Github external
const ActiveScreen = CustomTabRouter.getComponentForState(navigation.state);
  return (
    
  );
};

const CustomTabs = createNavigationContainer(
  createNavigator(CustomTabView, CustomTabRouter)
);

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  tabContainer: {
    flexDirection: 'row',
    height: 48,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    borderWidth: 1,
github react-navigation / experimental-transitioner / ExampleC.js View on Github external
<button> navigation.push("HomeScreen")}
            title="Go Home"
          /&gt;
          </button><button> navigation.goBack()} title="Go Back" /&gt;
        
      
    );
  }
}

const App = createNavigator(
  Transitioner,
  StackRouter({
    HomeScreen,
    ProfileScreen
  })
);

export default App;
</button>
github aksonov / react-native-router-flux / src / createTabNavigatorHOC.js View on Github external
export default NavigationView => (routeConfigs, navigationConfig = {}) => {
  const router = TabRouter(routeConfigs, navigationConfig);
  return createNavigator(NavigationView, router, navigationConfig);
};