agrcrobles/react-navigation-polyfill

DEPRECATED: somes experiments usng react-navigation in web

Built in views in web

DEPRECATED: This module is deprecated. For a thorough discussion, please read the following blog post about navigating in all platforms with react-navigation.

Navigators views on web

Follow instructions below to make StackNavigator, TabNavigator and DrawerNavigator work on web or try starter below.

Starter

https://github.com/agrcrobles/react-native-web-boilerplate

Instructions

Install react-navigation

npm i --save react-navigation

Webpack configuration

  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, '../node_modules/react-native-tab-view')
       ]
    }
  },
  resolve: {
    alias: {
      'react-navigation': 'react-navigation/lib/react-navigation.js'
    }
  }

About

This is meant somehow as a solution to follow discussions from react-navigation and react-native-tab-view.

License

MIT

react-navigation-polyfill's Issues

Implement TabNavigatorConfig

TabNavigatorConfig

• tabBarComponent - component to use as the tab bar, e.g. TabView.TabBarBottom (this is the default on iOS), TabView.TabBarTop (this is the default on Android)
• tabBarPosition - position of the tab bar, can be 'top' or 'bottom'
• swipeEnabled - whether to allow swiping between tabs
• animationEnabled - whether to animate when changing tabs
• lazyLoad - whether to lazily render tabs as needed as opposed to rendering them upfront

tabBarOptions

• initialRouteName - The routeName for the initial tab route when first loading
• order - Array of routeNames which defines the order of the tabs
• paths - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
• backBehavior - Should the back button cause a tab switch to the initial tab? If yes, set to initialRoute, otherwise none. Defaults to initialRoute behavior.
• Icon
• Label

And the following navigationOptions for the TabNavigator

header

• activeTintColor - label and icon color of the active tab
• activeBackgroundColor - background color of the active tab
• inactiveTintColor - label and icon color of the inactive tab
• inactiveBackgroundColor - background color of the inactive tab
• style - style object for the tab bar
• labelStyle - style object for the tab label

events

• onTransitionStart
• onTransitionEnd

Implement DrawerNavigatorConfig

DrawerNavigatorConfig

• drawerWidth - Width of the drawer
• drawerPosition - Options are left or right. Default is left position.
• contentComponent - Component to use to render the navigation items. Receives the navigation prop for the drawer. Defaults to DrawerView.Items.

contentOptions

• initialRouteName - The routeName for the initial route.
• order - Array of routeNames which defines the order of the drawer items.
• paths - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
• backBehavior - Should the back button cause switch to the initial route? If yes, set to initialRoute, otherwise none. Defaults to initialRoute behavior.
• icon
• label

DrawerView.Items

• activeTintColor - label and icon color of the active label
• activeBackgroundColor - background color of the active label
• inactiveTintColor - label and icon color of the inactive label
• inactiveBackgroundColor - background color of the inactive label
• style - style object for the content section

events

• onTransitionStart
• onTransitionEnd

Implement StackNavigatorConfig

StackNavigatorConfig

• - initialRouteName - Sets the default screen of the stack. Must match one of the keys in route configs.
• - initialRouteParams - The params for the initial route
• - navigationOptions - Default navigation options to use for screens
• - paths - A mapping of overrides for the paths set in the route configs

Visual options:

• - headerMode - Specifies how the header should be rendered:
• - cardStyle - Use this prop to override or extend the default style for an individual card in stack.
• - ScreenProps
• - Icon
• - Label

mode

• - card
• - modal

And the following navigationOptions for the StackNavigator:

• title - a title (string) displayed in the header

• header - a config object for the header bar:

• right - Custom React Element to display on the right side of the header

• left - Custom React Element to display on the left side of the header

• titleStyle - Style object for the title component

• tintColor - Tint color for the header

events

• onTransitionStart
• onTransitionEnd

Uncaught TypeError: Cannot convert undefined or null to object

I'm trying to use this package, but haven't had success yet.

routes is undefined or null on this line:

{Object.keys(routes).map((route, index) =>

Maybe it's because you are using react-navigation@^1.0.0-beta.3 and I'm using react-navigation@^1.0.0-beta.5? Could you upgrade it and maybe put it as a peerDependency?