Update README, bump version

.github/ISSUE_TEMPLATE.md

@@ -1,10 +1,10 @@
-## The issue list is reserved for bugs and feature requests, not for questions.
+## The issue tracker is reserved for bug reports only.
 
-For usage questions, try to:
+If you have a question or feature request, please try one of the following resources:
 
-- [Read the docs](https://reactnavigation.org/)
-- [Ask on the Reactiflux (#react-navigation)](https://discord.gg/reactiflux)
-- [Look for / ask questions on StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation)
+- [Read the documentation](https://reactnavigation.org/)
+- [Post a feature request to Canny](https://react-navigation.canny.io/feature-requests)
+- [Get help on Discord chat (#react-navigation on Reactiflux)](https://discord.gg/4xEK3nD) or [on StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation)
 - Search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue.
 
 ---

README.md

@@ -1,4 +1,6 @@
-# React Navigation [![CircleCI](https://circleci.com/gh/react-community/react-navigation/tree/master.svg?style=shield&circle-token=622fcb1d78413084c2f44699ed2104246a177485)](https://circleci.com/gh/react-community/react-navigation/tree/master) [![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-community/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-community/react-navigation) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/guides/contributors)
+# React Navigation
+
+[![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-community/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-community/react-navigation) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/guides/contributors)
 
 *Learn once, navigate anywhere.*
 

docs/api/navigators/TabNavigator.md

@@ -88,7 +88,6 @@ The route configs object is a mapping from route name to a route config, which t
 - `swipeEnabled` - Whether to allow swiping between tabs.
 - `animationEnabled` - Whether to animate when changing tabs.
 - `configureTransition` - a function that, given `currentTransitionProps` and `nextTransitionProps`, returns a configuration object that describes the animation between tabs.
-- `lazy` - Whether to lazily render tabs as needed as opposed to rendering them upfront.
 - `initialLayout` - Optional object containing the initial `height` and `width`, can be passed to prevent the one frame delay in [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view#avoid-one-frame-delay) rendering.
 - `tabBarOptions` - Configure the tab bar, see below.
 

examples/NavigationPlayground/app.json

@@ -12,7 +12,7 @@
       "icon": "./assets/icons/react-navigation.png",
       "hideExponentText": false
     },
-    "sdkVersion": "23.0.0",
+    "sdkVersion": "24.0.0",
     "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
     "packagerOpts": {
       "assetExts": [

examples/NavigationPlayground/js/App.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react';
-import { ScreenOrientation } from 'expo';
+import { Constants, ScreenOrientation } from 'expo';
 
 ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
 
@@ -11,6 +11,7 @@ import {
   StyleSheet,
   TouchableOpacity,
   Text,
+  StatusBar,
   View,
 } from 'react-native';
 import { SafeAreaView, StackNavigator } from 'react-navigation';
@@ -44,11 +45,11 @@ const ExampleRoutes = {
     description: 'Android-style drawer navigation',
     screen: Drawer,
   },
-  MultipleDrawer: {
-    name: 'Multiple Drawer Example',
-    description: 'Add any drawer you need',
-    screen: MultipleDrawer,
-  },
+  // MultipleDrawer: {
+  //   name: 'Multiple Drawer Example',
+  //   description: 'Add any drawer you need',
+  //   screen: MultipleDrawer,
+  // },
   TabsInDrawer: {
     name: 'Drawer + Tabs Example',
     description: 'A drawer combined with tabs',
@@ -104,34 +105,47 @@ const ExampleRoutes = {
   },
 };
 
-const MainScreen = ({ navigation }) => (
-  <ScrollView style={{ flex: 1 }} contentInsetAdjustmentBehavior="automatic">
-    <Banner />
-    {Object.keys(ExampleRoutes).map((routeName: string) => (
-      <TouchableOpacity
-        key={routeName}
-        onPress={() => {
-          const { path, params, screen } = ExampleRoutes[routeName];
-          const { router } = screen;
-          const action = path && router.getActionForPathAndParams(path, params);
-          navigation.navigate(routeName, {}, action);
-        }}
-      >
-        <SafeAreaView
-          style={styles.itemContainer}
-          forceInset={{ vertical: 'never' }}
-        >
-          <View style={styles.item}>
-            <Text style={styles.title}>{ExampleRoutes[routeName].name}</Text>
-            <Text style={styles.description}>
-              {ExampleRoutes[routeName].description}
-            </Text>
-          </View>
-        </SafeAreaView>
-      </TouchableOpacity>
-    ))}
-  </ScrollView>
-);
+class MainScreen extends React.Component<*> {
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView style={{ flex: 1 }}>
+          <Banner />
+          {Object.keys(ExampleRoutes).map((routeName: string) => (
+            <TouchableOpacity
+              key={routeName}
+              onPress={() => {
+                const { path, params, screen } = ExampleRoutes[routeName];
+                const { router } = screen;
+                const action =
+                  path && router.getActionForPathAndParams(path, params);
+                navigation.navigate(routeName, {}, action);
+              }}
+            >
+              <SafeAreaView
+                style={styles.itemContainer}
+                forceInset={{ vertical: 'never' }}
+              >
+                <View style={styles.item}>
+                  <Text style={styles.title}>
+                    {ExampleRoutes[routeName].name}
+                  </Text>
+                  <Text style={styles.description}>
+                    {ExampleRoutes[routeName].description}
+                  </Text>
+                </View>
+              </SafeAreaView>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+        <StatusBar barStyle="light-content" />
+        <View style={styles.statusBarUnderlay} />
+      </View>
+    );
+  }
+}
 
 const AppNavigator = StackNavigator(
   {
@@ -171,6 +185,14 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     resizeMode: 'contain',
   },
+  statusBarUnderlay: {
+    backgroundColor: '#673ab7',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: Constants.statusBarHeight,
+  },
   title: {
     fontSize: 16,
     fontWeight: 'bold',

examples/NavigationPlayground/js/Banner.js

@@ -22,6 +22,7 @@ export default Banner;
 const styles = StyleSheet.create({
   bannerContainer: {
     backgroundColor: '#673ab7',
+    paddingTop: 20,
   },
   banner: {
     flexDirection: 'row',

examples/NavigationPlayground/js/CustomTabs.js

@@ -8,6 +8,7 @@ import {
   Platform,
   ScrollView,
   StyleSheet,
+  StatusBar,
   Text,
   TouchableOpacity,
   View,
@@ -32,6 +33,7 @@ const MyNavScreen = ({ navigation, banner }) => (
         title="Go back"
       />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

examples/NavigationPlayground/js/CustomTransitioner.js

@@ -1,12 +1,13 @@
 import React, { Component, PropTypes } from 'react';
 import {
-  StyleSheet,
-  Platform,
-  Easing,
-  View,
   Animated,
-  Image,
   Button,
+  Easing,
+  Image,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  View,
 } from 'react-native';
 import {
   Transitioner,
@@ -30,6 +31,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       )}
 
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </SafeAreaView>
 );
 

examples/NavigationPlayground/js/Drawer.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, Platform, ScrollView } from 'react-native';
+import { Button, Platform, ScrollView, StatusBar } from 'react-native';
 import { DrawerNavigator, SafeAreaView } from 'react-navigation';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import SampleText from './SampleText';
@@ -18,6 +18,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 
@@ -57,6 +58,9 @@ const DrawerExample = DrawerNavigator(
     },
   },
   {
+    drawerOpenRoute: 'DrawerOpen',
+    drawerCloseRoute: 'DrawerClose',
+    drawerToggleRoute: 'DrawerToggle',
     initialRouteName: 'Drafts',
     contentOptions: {
       activeTintColor: '#e91e63',

examples/NavigationPlayground/js/ModalStack.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView, Text } from 'react-native';
+import { Button, ScrollView, StatusBar, Text } from 'react-native';
 import { SafeAreaView, StackNavigator } from 'react-navigation';
 import SampleText from './SampleText';
 
@@ -36,6 +36,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       )}
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

examples/NavigationPlayground/js/MultipleDrawer.js

@@ -55,6 +55,9 @@ const DrawerExample = DrawerNavigator(
     },
   },
   {
+    drawerOpenRoute: 'DrawerOpen',
+    drawerCloseRoute: 'DrawerClose',
+    drawerToggleRoute: 'DrawerToggle',
     initialRouteName: 'Drafts',
     contentOptions: {
       activeTintColor: '#e91e63',
@@ -67,8 +70,9 @@ const MainDrawerExample = DrawerNavigator({
     screen: DrawerExample,
   },
 }, {
-  drawerOpenRoute: 'FooDrawerOpen',
-  drawerCloseRoute: 'FooDrawerClose',
+    drawerOpenRoute: 'DrawerOpen',
+    drawerCloseRoute: 'DrawerClose',
+    drawerToggleRoute: 'DrawerToggle',
 });
 
 const styles = StyleSheet.create({

examples/NavigationPlayground/js/SimpleStack.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView } from 'react-native';
+import { Button, ScrollView, StatusBar } from 'react-native';
 import { StackNavigator, SafeAreaView } from 'react-navigation';
 import SampleText from './SampleText';
 
@@ -19,6 +19,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       title="Go to a photos screen"
     />
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </SafeAreaView>
 );
 

examples/NavigationPlayground/js/SimpleTabs.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, Platform, ScrollView, View } from 'react-native';
+import { Button, Platform, ScrollView, StatusBar, View } from 'react-native';
 import { SafeAreaView, TabNavigator } from 'react-navigation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
@@ -20,6 +20,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       title="Go to settings tab"
     />
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </SafeAreaView>
 );
 

examples/NavigationPlayground/js/StacksInTabs.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView } from 'react-native';
+import { Button, ScrollView, StatusBar } from 'react-native';
 import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -27,6 +27,8 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

examples/NavigationPlayground/js/StacksOverTabs.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView } from 'react-native';
+import { Button, ScrollView, StatusBar } from 'react-native';
 import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -27,6 +27,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

examples/NavigationPlayground/js/TabAnimations.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView, Animated } from 'react-native';
+import { Animated, Button, ScrollView, StatusBar } from 'react-native';
 import { StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -25,6 +25,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       title="Go to settings tab"
     />
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

examples/NavigationPlayground/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
-    "postinstall": "rm -rf node_modules/react-navigation/{node_modules,examples}",
+    "postinstall":
+      "rm -rf node_modules/react-navigation/{node_modules,examples}",
     "start": "react-native-scripts start",
     "eject": "react-native-scripts eject",
     "android": "react-native-scripts android",
@@ -12,29 +13,22 @@
     "test": "node node_modules/jest/bin/jest.js"
   },
   "dependencies": {
-    "expo": "^23.0.0",
+    "expo": "^24.0.2",
     "react": "16.0.0",
-    "react-native": "^0.50.3",
+    "react-native": "^0.51.0",
     "react-navigation": "file:../.."
   },
   "devDependencies": {
     "babel-jest": "^21.0.0",
     "flow-bin": "^0.56.0",
     "jest": "^21.0.1",
-    "jest-expo": "^23.0.0",
-    "react-addons-test-utils": "16.0.0-alpha.3",
+    "jest-expo": "^24.0.0",
     "react-native-scripts": "^1.5.0",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "react-test-renderer": "16.0.0"
   },
   "jest": {
     "preset": "jest-expo",
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "jsx",
-      "node"
-    ],
+    "moduleFileExtensions": ["web.js", "js", "json", "jsx", "node"],
     "modulePathIgnorePatterns": [
       "/node_modules/.*/react-native/",
       "/node_modules/.*/react/"

examples/ReduxExample/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
-    "postinstall": "rm -rf node_modules/react-navigation/{node_modules,examples}",
+    "postinstall":
+      "rm -rf node_modules/react-navigation/{node_modules,examples}",
     "start": "react-native-scripts start",
     "eject": "react-native-scripts eject",
     "android": "react-native-scripts android",
@@ -35,6 +36,6 @@
     "jest-expo": "^23.0.0",
     "react-native-scripts": "^1.3.1",
     "react-navigation": "file:../..",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "react-test-renderer": "16.0.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "description": "React Navigation",
   "main": "src/react-navigation.js",
   "sources": {
@@ -55,7 +55,7 @@
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.5.10",
     "react-native-drawer-layout-polyfill": "^1.3.2",
-    "react-native-tab-view": "^0.0.70"
+    "react-native-tab-view": "^0.0.74"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",

src/createNavigationContainer.js

@@ -85,6 +85,8 @@ export default function createNavigationContainer<S: NavigationState, O: {}>(
       let path = url.split(delimiter)[1];
       if (typeof path === 'undefined') {
         path = url;
+      } else if (path === '') {
+        path = '/';
       }
       return {
         path,

src/navigators/TabNavigator.js

@@ -49,7 +49,6 @@ const TabNavigator = (
     swipeEnabled,
     animationEnabled,
     configureTransition,
-    lazy,
     initialLayout,
     ...tabsConfig
   } = mergedConfig;
@@ -70,7 +69,6 @@ const TabNavigator = (
       swipeEnabled={swipeEnabled}
       animationEnabled={animationEnabled}
       configureTransition={configureTransition}
-      lazy={lazy}
       initialLayout={initialLayout}
     />
   ));
@@ -84,7 +82,6 @@ const Presets = {
     tabBarPosition: 'bottom',
     swipeEnabled: false,
     animationEnabled: false,
-    lazy: false,
     initialLayout: undefined,
   },
   AndroidTopTabs: {
@@ -92,7 +89,6 @@ const Presets = {
     tabBarPosition: 'top',
     swipeEnabled: true,
     animationEnabled: true,
-    lazy: false,
     initialLayout: undefined,
   },
 };

src/views/TabView/TabView.js

@@ -26,7 +26,6 @@ export type TabViewConfig = {
     currentTransitionProps: Object,
     nextTransitionProps: Object
   ) => Object,
-  lazy?: boolean,
   initialLayout?: Layout,
 };
 
@@ -47,7 +46,6 @@ type Props = {
     currentTransitionProps: Object,
     nextTransitionProps: Object
   ) => Object,
-  lazy?: boolean,
   initialLayout: Layout,
 
   screenProps?: {},
@@ -171,7 +169,6 @@ class TabView extends React.PureComponent<Props> {
       tabBarPosition,
       animationEnabled,
       configureTransition,
-      lazy,
       initialLayout,
       screenProps,
     } = this.props;
@@ -210,7 +207,6 @@ class TabView extends React.PureComponent<Props> {
     }
 
     const props = {
-      lazy,
       initialLayout,
       animationEnabled,
       configureTransition,
@@ -225,7 +221,6 @@ class TabView extends React.PureComponent<Props> {
       style: styles.container,
     };
 
-    // $FlowFixMe: mismatch with react-native-tab-view type
     return <TabViewAnimated {...props} />;
   }
 }

src/views/__tests__/__snapshots__/TabView-test.js.snap

@@ -134,7 +134,7 @@ exports[`TabBarBottom renders successfully 1`] = `
     bounces={false}
     contentContainerStyle={
       Object {
-        "flexGrow": 1,
+        "flex": 1,
       }
     }
     contentOffset={
@@ -164,9 +164,10 @@ exports[`TabBarBottom renders successfully 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    overScrollMode="never"
     pagingEnabled={true}
     scrollEnabled={undefined}
-    scrollEventThrottle={16}
+    scrollEventThrottle={1}
     scrollsToTop={false}
     sendMomentumEvents={true}
     showsHorizontalScrollIndicator={false}
@@ -179,7 +180,7 @@ exports[`TabBarBottom renders successfully 1`] = `
           "overflow": "scroll",
         },
         Object {
-          "flexGrow": 1,
+          "flex": 1,
         },
       ]
     }
@@ -193,7 +194,7 @@ exports[`TabBarBottom renders successfully 1`] = `
             "flexDirection": "row",
           },
           Object {
-            "flexGrow": 1,
+            "flex": 1,
           },
         ]
       }

yarn.lock

@@ -4488,11 +4488,11 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
-react-native-tab-view@^0.0.70:
-  version "0.0.70"
-  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.70.tgz#1dd2ded32acd0cb6bfef38d26e53675db733b37b"
+react-native-tab-view@^0.0.74:
+  version "0.0.74"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.74.tgz#62c0c882d9232b461ce181d440d683b4f99d1bd8"
   dependencies:
-    prop-types "^15.5.10"
+    prop-types "^15.6.0"
 
 react-native-vector-icons@^4.2.0:
   version "4.4.2"