Update/Fix Prettier + Eslint config for codebase

Run Prettier/Eslint on entire codebase, fix issues

examples/NavigationPlayground/__exponent/rn-cli.config.js

@@ -9,13 +9,16 @@ const path = require('path');
 const config = require('../../../rn-cli.config');
 
 config.getBlacklist = () => [
-  new RegExp(`${path.resolve(__dirname, '../../..')}/node_modules/react-native/(.*)`),
+  new RegExp(
+    `${path.resolve(__dirname, '../../..')}/node_modules/react-native/(.*)`
+  ),
   new RegExp(`${path.resolve(__dirname, '../../..')}/node_modules/react/(.*)`),
   ...config.getBlacklistForExample('NavigationPlayground'),
   new RegExp(`^${path.resolve(__dirname, '..')}/package.json$`),
 ];
 
-config.getTransformModulePath = () => path.resolve(__dirname, './transformer.js');
+config.getTransformModulePath = () =>
+  path.resolve(__dirname, './transformer.js');
 
 config.getTransformOptions = () => ({
   reactNativePath: path.resolve(__dirname, '../node_modules/react-native/'),

examples/NavigationPlayground/__exponent/transformer.js

@@ -19,21 +19,23 @@ const reactTransformPlugin = require('babel-plugin-react-transform').default;
 const hmrTransform = 'react-transform-hmr/lib/index.js';
 const transformPath = require.resolve(hmrTransform);
 
-const makeHMRConfig =  function(options, filename) {
-  const transform = filename ?
-      './' + path.relative(path.dirname(filename), transformPath) : // packager can't handle absolute paths
-      hmrTransform;
+const makeHMRConfig = function(options, filename) {
+  const transform = filename
+    ? './' + path.relative(path.dirname(filename), transformPath) // packager can't handle absolute paths
+    : hmrTransform;
 
   return {
     plugins: [
       [
         reactTransformPlugin,
         {
-          transforms: [{
-            transform,
-            imports: ['react-native'],
-            locals: ['module'],
-          }],
+          transforms: [
+            {
+              transform,
+              imports: ['react-native'],
+              locals: ['module'],
+            },
+          ],
         },
       ],
     ],
@@ -42,13 +44,22 @@ const makeHMRConfig =  function(options, filename) {
 
 const buildAliasPreset = (reactNativePath, reactPath) => ({
   plugins: [
-    [require('babel-plugin-module-resolver').default, {
-      alias: Object.assign({}, {
-        'react-native': path.resolve(`${reactNativePath || './node_modules/react-native'}`),
-        react: path.resolve(`${reactPath || './node_modules/react'}`),
-      }, require('babel-preset-exponent').plugins[0][1].alias),
-      cwd: path.resolve(__dirname, '..'),
-    }],
+    [
+      require('babel-plugin-module-resolver').default,
+      {
+        alias: Object.assign(
+          {},
+          {
+            'react-native': path.resolve(
+              `${reactNativePath || './node_modules/react-native'}`
+            ),
+            react: path.resolve(`${reactPath || './node_modules/react'}`),
+          },
+          require('babel-preset-exponent').plugins[0][1].alias
+        ),
+        cwd: path.resolve(__dirname, '..'),
+      },
+    ],
   ],
 });
 
@@ -59,7 +70,10 @@ const buildAliasPreset = (reactNativePath, reactPath) => ({
 function buildBabelConfig(filename, options) {
   const exponentBabelPreset = require('babel-preset-exponent');
   const babelConfig = {
-    presets: [...exponentBabelPreset.presets, buildAliasPreset(options.reactNativePath, options.reactPath)],
+    presets: [
+      ...exponentBabelPreset.presets,
+      buildAliasPreset(options.reactNativePath, options.reactPath),
+    ],
     plugins: [],
   };
 
@@ -97,7 +111,7 @@ function transform(src, filename, options) {
   };
 }
 
-module.exports = function (data, callback) {
+module.exports = function(data, callback) {
   let result;
   try {
     result = transform(data.sourceCode, data.filename, data.options);

examples/NavigationPlayground/index.js

@@ -1,6 +1,4 @@
-import {
-  AppRegistry,
-} from 'react-native';
+import { AppRegistry } from 'react-native';
 
 import App from './js/App';
 

examples/NavigationPlayground/js/App.js

@@ -49,8 +49,12 @@ const ExampleRoutes = {
     screen: CustomTabs,
   },
   ModalStack: {
-    name: Platform.OS === 'ios' ? 'Modal Stack Example' : 'Stack with Dynamic Header',
-    description: Platform.OS === 'ios' ? 'Stack navigation with modals' : 'Dynamically showing and hiding the header',
+    name: Platform.OS === 'ios'
+      ? 'Modal Stack Example'
+      : 'Stack with Dynamic Header',
+    description: Platform.OS === 'ios'
+      ? 'Stack navigation with modals'
+      : 'Dynamically showing and hiding the header',
     screen: ModalStack,
   },
   StacksInTabs: {
@@ -80,7 +84,7 @@ const ExampleRoutes = {
 const MainScreen = ({ navigation }) => (
   <ScrollView>
     <Banner />
-    {Object.keys(ExampleRoutes).map((routeName: string) =>
+    {Object.keys(ExampleRoutes).map((routeName: string) => (
       <TouchableOpacity
         key={routeName}
         onPress={() => {
@@ -92,28 +96,33 @@ const MainScreen = ({ navigation }) => (
       >
         <View style={styles.item}>
           <Text style={styles.title}>{ExampleRoutes[routeName].name}</Text>
-          <Text style={styles.description}>{ExampleRoutes[routeName].description}</Text>
+          <Text style={styles.description}>
+            {ExampleRoutes[routeName].description}
+          </Text>
         </View>
       </TouchableOpacity>
-    )}
+    ))}
   </ScrollView>
 );
 
-const AppNavigator = StackNavigator({
-  ...ExampleRoutes,
-  Index: {
-    screen: MainScreen,
+const AppNavigator = StackNavigator(
+  {
+    ...ExampleRoutes,
+    Index: {
+      screen: MainScreen,
+    },
   },
-}, {
-  initialRouteName: 'Index',
-  headerMode: 'none',
+  {
+    initialRouteName: 'Index',
+    headerMode: 'none',
 
-  /*
+    /*
    * Use modal on iOS because the card mode comes from the right,
    * which conflicts with the drawer example gesture
    */
-  mode: Platform.OS === 'ios' ? 'modal' : 'card',
-});
+    mode: Platform.OS === 'ios' ? 'modal' : 'card',
+  }
+);
 
 export default () => <AppNavigator />;
 

examples/NavigationPlayground/js/Banner.js

@@ -2,20 +2,11 @@
 
 import React from 'react';
 
-import {
-  Image,
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { Image, Platform, StyleSheet, Text, View } from 'react-native';
 
 const Banner = () => (
   <View style={styles.banner}>
-    <Image
-      source={require('./assets/NavLogo.png')}
-      style={styles.image}
-    />
+    <Image source={require('./assets/NavLogo.png')} style={styles.image} />
     <Text style={styles.title}>React Navigation Examples</Text>
   </View>
 );

examples/NavigationPlayground/js/CustomTabs.js

@@ -33,29 +33,18 @@ const MyNavScreen = ({ navigation, banner }) => (
 );
 
 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Home Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
 );
 
 const MyNotificationsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Notifications Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
 );
 
 const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Settings Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Settings Screen" navigation={navigation} />
 );
 
-const CustomTabBar = ({
-  navigation,
-}) => {
+const CustomTabBar = ({ navigation }) => {
   const { routes } = navigation.state;
   return (
     <View style={styles.tabContainer}>
@@ -70,12 +59,9 @@ const CustomTabBar = ({
       ))}
     </View>
   );
-}
+};
 
-const CustomTabView = ({
-  router,
-  navigation,
-}) => {
+const CustomTabView = ({ router, navigation }) => {
   const { routes, index } = navigation.state;
   const ActiveScreen = router.getComponentForState(navigation.state);
   return (
@@ -91,25 +77,30 @@ const CustomTabView = ({
   );
 };
 
-const CustomTabRouter = TabRouter({
-  Home: {
-    screen: MyHomeScreen,
-    path: '',
+const CustomTabRouter = TabRouter(
+  {
+    Home: {
+      screen: MyHomeScreen,
+      path: '',
+    },
+    Notifications: {
+      screen: MyNotificationsScreen,
+      path: 'notifications',
+    },
+    Settings: {
+      screen: MySettingsScreen,
+      path: 'settings',
+    },
   },
-  Notifications: {
-    screen: MyNotificationsScreen,
-    path: 'notifications',
-  },
-  Settings: {
-    screen: MySettingsScreen,
-    path: 'settings',
-  },
-}, {
-  // Change this to start on a different tab
-  initialRouteName: 'Home',
-});
+  {
+    // Change this to start on a different tab
+    initialRouteName: 'Home',
+  }
+);
 
-const CustomTabs = createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView));
+const CustomTabs = createNavigationContainer(
+  createNavigator(CustomTabRouter)(CustomTabView)
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -127,7 +118,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#ddd',
     borderRadius: 4,
-  }
+  },
 });
 
 export default CustomTabs;

examples/NavigationPlayground/js/Drawer.js

@@ -3,15 +3,8 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  Platform,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-import {
-  DrawerNavigator,
-} from 'react-navigation';
+import { Button, Platform, ScrollView, StyleSheet } from 'react-native';
+import { DrawerNavigator } from 'react-navigation';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import SampleText from './SampleText';
 
@@ -22,18 +15,12 @@ const MyNavScreen = ({ navigation, banner }) => (
       onPress={() => navigation.navigate('DrawerOpen')}
       title="Open drawer"
     />
-    <Button
-      onPress={() => navigation.goBack(null)}
-      title="Go back"
-    />
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
   </ScrollView>
 );
 
 const InboxScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner={'Inbox Screen'}
-    navigation={navigation}
-  />
+  <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />
 );
 InboxScreen.navigationOptions = {
   drawerLabel: 'Inbox',
@@ -47,37 +34,33 @@ InboxScreen.navigationOptions = {
 };
 
 const DraftsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner={'Drafts Screen'}
-    navigation={navigation}
-  />
+  <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />
 );
 DraftsScreen.navigationOptions = {
   drawerLabel: 'Drafts',
   drawerIcon: ({ tintColor }) => (
-    <MaterialIcons
-      name="drafts"
-      size={24}
-      style={{ color: tintColor }}
-    />
+    <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
   ),
 };
 
-const DrawerExample = DrawerNavigator({
-  Inbox: {
-    path: '/',
-    screen: InboxScreen,
+const DrawerExample = DrawerNavigator(
+  {
+    Inbox: {
+      path: '/',
+      screen: InboxScreen,
+    },
+    Drafts: {
+      path: '/sent',
+      screen: DraftsScreen,
+    },
   },
-  Drafts: {
-    path: '/sent',
-    screen: DraftsScreen,
-  },
-}, {
-  initialRouteName: 'Drafts',
-  contentOptions: {
-    activeTintColor: '#e91e63',
-  },
-});
+  {
+    initialRouteName: 'Drafts',
+    contentOptions: {
+      activeTintColor: '#e91e63',
+    },
+  }
+);
 
 const styles = StyleSheet.create({
   container: {

examples/NavigationPlayground/js/ModalStack.js

@@ -3,14 +3,8 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-  Text,
-} from 'react-native';
-import {
-  StackNavigator,
-} from 'react-navigation';
+import { Button, ScrollView, Text } from 'react-native';
+import { StackNavigator } from 'react-navigation';
 import SampleText from './SampleText';
 
 const MyNavScreen = ({ navigation, banner }) => (
@@ -24,24 +18,21 @@ const MyNavScreen = ({ navigation, banner }) => (
       onPress={() => navigation.navigate('HeaderTest')}
       title="Go to a header toggle screen"
     />
-    {navigation.state.routeName === 'HeaderTest' && <Button
-      title="Toggle Header"
-      onPress={() => navigation.setParams({
-        headerVisible: (!navigation.state.params || !navigation.state.params.headerVisible),
-      })}
-    />}
-    <Button
-      onPress={() => navigation.goBack(null)}
-      title="Go back"
-    />
+    {navigation.state.routeName === 'HeaderTest' &&
+      <Button
+        title="Toggle Header"
+        onPress={() =>
+          navigation.setParams({
+            headerVisible: !navigation.state.params ||
+              !navigation.state.params.headerVisible,
+          })}
+      />}
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
   </ScrollView>
 );
 
 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Home Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
 );
 MyHomeScreen.navigationOptions = {
   title: 'Welcome',
@@ -57,44 +48,48 @@ MyProfileScreen.navigationOptions = ({ navigation }) => ({
   title: `${navigation.state.params.name}'s Profile!`,
 });
 
-const ProfileNavigator = StackNavigator({
-  Home: {
-    screen: MyHomeScreen,
+const ProfileNavigator = StackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
   },
-  Profile: {
-    path: 'people/:name',
-    screen: MyProfileScreen,
-  },
-}, {
-  navigationOptions: {
-    header: null,
-  },
-});
+  {
+    navigationOptions: {
+      header: null,
+    },
+  }
+);
 
 const MyHeaderTestScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner={`Full screen view`}
-    navigation={navigation}
-  />
+  <MyNavScreen banner={`Full screen view`} navigation={navigation} />
 );
 MyHeaderTestScreen.navigationOptions = ({ navigation }) => {
-  const headerVisible = navigation.state.params && navigation.state.params.headerVisible;
+  const headerVisible =
+    navigation.state.params && navigation.state.params.headerVisible;
   return {
     header: headerVisible ? undefined : null,
     title: 'Now you see me',
   };
 };
 
-const ModalStack = StackNavigator({
-  Home: {
-    screen: MyHomeScreen,
+const ModalStack = StackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    ProfileNavigator: {
+      screen: ProfileNavigator,
+    },
+    HeaderTest: { screen: MyHeaderTestScreen },
   },
-  ProfileNavigator: {
-    screen: ProfileNavigator,
-  },
-  HeaderTest: {screen: MyHeaderTestScreen},
-}, {
-  mode: 'modal',
-});
+  {
+    mode: 'modal',
+  }
+);
 
 export default ModalStack;

examples/NavigationPlayground/js/SampleText.js

@@ -2,21 +2,14 @@
 
 import React from 'react';
 
-import {
-  StyleSheet,
-  Text,
-} from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 
 /**
  * Used across examples as a screen placeholder.
  */
- import type { Children } from 'react';
+import type { Children } from 'react';
 
-const SampleText = ({
-  children
-}: {
-  children?: Children
-}) => (
+const SampleText = ({ children }: { children?: Children }) => (
   <Text style={styles.sampleText}>{children}</Text>
 );
 

examples/NavigationPlayground/js/SimpleStack.js

@@ -3,13 +3,8 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-} from 'react-native';
-import {
-  StackNavigator,
-} from 'react-navigation';
+import { Button, ScrollView } from 'react-native';
+import { StackNavigator } from 'react-navigation';
 import SampleText from './SampleText';
 
 const MyNavScreen = ({ navigation, banner }) => (
@@ -23,18 +18,12 @@ const MyNavScreen = ({ navigation, banner }) => (
       onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
       title="Go to a photos screen"
     />
-    <Button
-      onPress={() => navigation.goBack(null)}
-      title="Go back"
-    />
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
   </ScrollView>
 );
 
 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Home Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
 );
 MyHomeScreen.navigationOptions = {
   title: 'Welcome',
@@ -52,18 +41,15 @@ MyPhotosScreen.navigationOptions = {
 
 const MyProfileScreen = ({ navigation }) => (
   <MyNavScreen
-    banner={
-      `${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''
-      }${navigation.state.params.name}'s Profile`
-    }
+    banner={`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${navigation.state.params.name}'s Profile`}
     navigation={navigation}
   />
 );
 
 MyProfileScreen.navigationOptions = props => {
-  const {navigation} = props;
-  const {state, setParams} = navigation;
-  const {params} = state;
+  const { navigation } = props;
+  const { state, setParams } = navigation;
+  const { params } = state;
   return {
     headerTitle: `${params.name}'s Profile!`,
     // Render a button on the right side of the header.
@@ -71,7 +57,8 @@ MyProfileScreen.navigationOptions = props => {
     headerRight: (
       <Button
         title={params.mode === 'edit' ? 'Done' : 'Edit'}
-        onPress={() => setParams({ mode: params.mode === 'edit' ? '' : 'edit' })}
+        onPress={() =>
+          setParams({ mode: params.mode === 'edit' ? '' : 'edit' })}
       />
     ),
   };

examples/NavigationPlayground/js/SimpleTabs.js

@@ -3,15 +3,8 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  Platform,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-import {
-  TabNavigator,
-} from 'react-navigation';
+import { Button, Platform, ScrollView, StyleSheet } from 'react-native';
+import { TabNavigator } from 'react-navigation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
 
@@ -26,18 +19,12 @@ const MyNavScreen = ({ navigation, banner }) => (
       onPress={() => navigation.navigate('Settings')}
       title="Go to settings tab"
     />
-    <Button
-      onPress={() => navigation.goBack(null)}
-      title="Go back"
-    />
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
   </ScrollView>
 );
 
 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Home Tab"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Home Tab" navigation={navigation} />
 );
 
 MyHomeScreen.navigationOptions = {
@@ -52,10 +39,7 @@ MyHomeScreen.navigationOptions = {
 };
 
 const MyPeopleScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="People Tab"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="People Tab" navigation={navigation} />
 );
 
 MyPeopleScreen.navigationOptions = {
@@ -70,10 +54,7 @@ MyPeopleScreen.navigationOptions = {
 };
 
 const MyChatScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Chat Tab"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Chat Tab" navigation={navigation} />
 );
 
 MyChatScreen.navigationOptions = {
@@ -88,10 +69,7 @@ MyChatScreen.navigationOptions = {
 };
 
 const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Settings Tab"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Settings Tab" navigation={navigation} />
 );
 
 MySettingsScreen.navigationOptions = {
@@ -105,28 +83,31 @@ MySettingsScreen.navigationOptions = {
   ),
 };
 
-const SimpleTabs = TabNavigator({
-  Home: {
-    screen: MyHomeScreen,
-    path: '',
+const SimpleTabs = TabNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+      path: '',
+    },
+    People: {
+      screen: MyPeopleScreen,
+      path: 'cart',
+    },
+    Chat: {
+      screen: MyChatScreen,
+      path: 'chat',
+    },
+    Settings: {
+      screen: MySettingsScreen,
+      path: 'settings',
+    },
   },
-  People: {
-    screen: MyPeopleScreen,
-    path: 'cart',
-  },
-  Chat: {
-    screen: MyChatScreen,
-    path: 'chat',
-  },
-  Settings: {
-    screen: MySettingsScreen,
-    path: 'settings',
-  },
-}, {
-  tabBarOptions: {
-    activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
-  },
-});
+  {
+    tabBarOptions: {
+      activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
+    },
+  }
+);
 
 const styles = StyleSheet.create({
   container: {

examples/NavigationPlayground/js/StacksInTabs.js

@@ -3,14 +3,8 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-} from 'react-native';
-import {
-  StackNavigator,
-  TabNavigator,
-} from 'react-navigation';
+import { Button, ScrollView } from 'react-native';
+import { StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
@@ -30,18 +24,12 @@ const MyNavScreen = ({ navigation, banner }) => (
       onPress={() => navigation.navigate('SettingsTab')}
       title="Go to settings tab"
     />
-    <Button
-      onPress={() => navigation.goBack(null)}
-      title="Go back"
-    />
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
   </ScrollView>
 );
 
 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Home Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
 );
 
 const MyProfileScreen = ({ navigation }) => (
@@ -52,17 +40,11 @@ const MyProfileScreen = ({ navigation }) => (
 );
 
 const MyNotificationsSettingsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Notifications Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
 );
 
 const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Settings Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Settings Screen" navigation={navigation} />
 );
 
 const MainTab = StackNavigator({
@@ -98,39 +80,42 @@ const SettingsTab = StackNavigator({
   },
 });
 
-const StacksInTabs = TabNavigator({
-  MainTab: {
-    screen: MainTab,
-    path: '/',
-    navigationOptions: {
-      tabBarLabel: 'Home',
-      tabBarIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-home' : 'ios-home-outline'}
-          size={26}
-          style={{ color: tintColor }}
-        />
-      ),
+const StacksInTabs = TabNavigator(
+  {
+    MainTab: {
+      screen: MainTab,
+      path: '/',
+      navigationOptions: {
+        tabBarLabel: 'Home',
+        tabBarIcon: ({ tintColor, focused }) => (
+          <Ionicons
+            name={focused ? 'ios-home' : 'ios-home-outline'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        ),
+      },
+    },
+    SettingsTab: {
+      screen: SettingsTab,
+      path: '/settings',
+      navigationOptions: {
+        tabBarLabel: 'Settings',
+        tabBarIcon: ({ tintColor, focused }) => (
+          <Ionicons
+            name={focused ? 'ios-settings' : 'ios-settings-outline'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        ),
+      },
     },
   },
-  SettingsTab: {
-    screen: SettingsTab,
-    path: '/settings',
-    navigationOptions: {
-      tabBarLabel: 'Settings',
-      tabBarIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-settings' : 'ios-settings-outline'}
-          size={26}
-          style={{ color: tintColor }}
-        />
-      ),
-    },
-  },
-}, {
-  tabBarPosition: 'bottom',
-  animationEnabled: false,
-  swipeEnabled: false,
-});
+  {
+    tabBarPosition: 'bottom',
+    animationEnabled: false,
+    swipeEnabled: false,
+  }
+);
 
 export default StacksInTabs;

examples/NavigationPlayground/js/StacksOverTabs.js

@@ -3,14 +3,8 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-} from 'react-native';
-import {
-  StackNavigator,
-  TabNavigator,
-} from 'react-navigation';
+import { Button, ScrollView } from 'react-native';
+import { StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
@@ -30,18 +24,12 @@ const MyNavScreen = ({ navigation, banner }) => (
       onPress={() => navigation.navigate('SettingsTab')}
       title="Go to settings tab"
     />
-    <Button
-      onPress={() => navigation.goBack(null)}
-      title="Go back"
-    />
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
   </ScrollView>
 );
 
 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Home Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
 );
 
 const MyProfileScreen = ({ navigation }) => (
@@ -52,54 +40,51 @@ const MyProfileScreen = ({ navigation }) => (
 );
 
 const MyNotificationsSettingsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Notifications Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
 );
 
 const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Settings Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Settings Screen" navigation={navigation} />
 );
 
-const TabNav = TabNavigator({
-  MainTab: {
-    screen: MyHomeScreen,
-    path: '/',
-    navigationOptions: {
-      title: 'Welcome',
-      tabBarLabel: 'Home',
-      tabBarIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-home' : 'ios-home-outline'}
-          size={26}
-          style={{ color: tintColor }}
-        />
-      ),
+const TabNav = TabNavigator(
+  {
+    MainTab: {
+      screen: MyHomeScreen,
+      path: '/',
+      navigationOptions: {
+        title: 'Welcome',
+        tabBarLabel: 'Home',
+        tabBarIcon: ({ tintColor, focused }) => (
+          <Ionicons
+            name={focused ? 'ios-home' : 'ios-home-outline'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        ),
+      },
+    },
+    SettingsTab: {
+      screen: MySettingsScreen,
+      path: '/settings',
+      navigationOptions: {
+        title: 'Settings',
+        tabBarIcon: ({ tintColor, focused }) => (
+          <Ionicons
+            name={focused ? 'ios-settings' : 'ios-settings-outline'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        ),
+      },
     },
   },
-  SettingsTab: {
-    screen: MySettingsScreen,
-    path: '/settings',
-    navigationOptions: {
-      title: 'Settings',
-      tabBarIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-settings' : 'ios-settings-outline'}
-          size={26}
-          style={{ color: tintColor }}
-        />
-      ),
-    },
-  },
-}, {
-  tabBarPosition: 'bottom',
-  animationEnabled: false,
-  swipeEnabled: false,
-});
+  {
+    tabBarPosition: 'bottom',
+    animationEnabled: false,
+    swipeEnabled: false,
+  }
+);
 
 const StacksOverTabs = StackNavigator({
   Root: {
@@ -115,7 +100,7 @@ const StacksOverTabs = StackNavigator({
     screen: MyProfileScreen,
     path: '/people/:name',
     navigationOptions: ({ navigation }) => {
-      title: `${navigation.state.params.name}'s Profile!`
+      title: `${navigation.state.params.name}'s Profile!`;
     },
   },
 });

examples/NavigationPlayground/js/TabsInDrawer.js

@@ -3,16 +3,8 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  Platform,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
-import {
-  TabNavigator,
-  DrawerNavigator,
-} from 'react-navigation';
+import { Button, Platform, ScrollView, StyleSheet } from 'react-native';
+import { TabNavigator, DrawerNavigator } from 'react-navigation';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import SimpleTabs from './SimpleTabs';
 import StacksOverTabs from './StacksOverTabs';

examples/ReduxExample/package.json

@@ -6,6 +6,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "prop-types": "^15.5.10",
     "react": "16.0.0-alpha.6",
     "react-native": "0.43.3",
     "react-redux": "5.0.4",

examples/ReduxExample/src/components/AuthButton.js

@@ -22,7 +22,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   logout: () => dispatch({ type: 'Logout' }),
-  loginScreen: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
+  loginScreen: () =>
+    dispatch(NavigationActions.navigate({ routeName: 'Login' })),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);

examples/ReduxExample/src/components/LoginScreen.js

@@ -1,10 +1,5 @@
 import React, { PropTypes } from 'react';
-import {
-  Button,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { Button, StyleSheet, Text, View } from 'react-native';
 
 const styles = StyleSheet.create({
   container: {

examples/ReduxExample/src/components/LoginStatusMessage.js

@@ -1,11 +1,6 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
-import {
-  Button,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { Button, StyleSheet, Text, View } from 'react-native';
 import { NavigationActions } from 'react-navigation';
 
 const styles = StyleSheet.create({
@@ -26,7 +21,8 @@ const LoginStatusMessage = ({ isLoggedIn, dispatch }) => {
         {'You are "logged in" right now'}
       </Text>
       <Button
-        onPress={() => dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}
+        onPress={() =>
+          dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}
         title="Profile"
       />
     </View>

examples/ReduxExample/src/components/ProfileScreen.js

@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 const styles = StyleSheet.create({
   container: {

examples/ReduxExample/src/navigators/AppNavigator.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { addNavigationHelpers, StackNavigator } from 'react-navigation';
 

examples/ReduxExample/src/reducers/index.js

@@ -7,16 +7,25 @@ import { AppNavigator } from '../navigators/AppNavigator';
 const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
 const tempNavState = AppNavigator.router.getStateForAction(firstAction);
 const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
-const initialNavState = AppNavigator.router.getStateForAction(secondAction, tempNavState);
+const initialNavState = AppNavigator.router.getStateForAction(
+  secondAction,
+  tempNavState
+);
 
 function nav(state = initialNavState, action) {
   let nextState;
   switch (action.type) {
     case 'Login':
-      nextState = AppNavigator.router.getStateForAction(NavigationActions.back(), state);
+      nextState = AppNavigator.router.getStateForAction(
+        NavigationActions.back(),
+        state
+      );
       break;
     case 'Logout':
-      nextState = AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
+      nextState = AppNavigator.router.getStateForAction(
+        NavigationActions.navigate({ routeName: 'Login' }),
+        state
+      );
       break;
     default:
       nextState = AppNavigator.router.getStateForAction(action, state);

examples/ReduxExample/yarn.lock

@@ -2471,7 +2471,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -2908,6 +2908,13 @@ prop-types@^15.0.0, prop-types@^15.5.8:
   dependencies:
     fbjs "^0.8.9"
 
+prop-types@^15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 prr@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"