Update/Fix Prettier + Eslint config for codebase

Run Prettier/Eslint on entire codebase, fix issues
2026-04-28 20:35:19 +08:00 · 2017-05-14 12:14:12 -07:00
parent a301b41479
commit f3a958dca1
94 changed files with 3630 additions and 3846 deletions
--- a/examples/NavigationPlayground/__exponent/rn-cli.config.js
+++ b/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/'),
--- a/examples/NavigationPlayground/__exponent/transformer.js
+++ b/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);
--- a/examples/NavigationPlayground/index.js
+++ b/examples/NavigationPlayground/index.js
@@ -1,6 +1,4 @@
-import {
-  AppRegistry,
-} from 'react-native';
+import { AppRegistry } from 'react-native';

 import App from './js/App';

--- a/examples/NavigationPlayground/js/App.js
+++ b/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 />;

--- a/examples/NavigationPlayground/js/Banner.js
+++ b/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>
 );
--- a/examples/NavigationPlayground/js/CustomTabs.js
+++ b/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;
--- a/examples/NavigationPlayground/js/Drawer.js
+++ b/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: {
--- a/examples/NavigationPlayground/js/ModalStack.js
+++ b/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;
--- a/examples/NavigationPlayground/js/SampleText.js
+++ b/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>
 );

--- a/examples/NavigationPlayground/js/SimpleStack.js
+++ b/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' })}
      />
    ),
  };
--- a/examples/NavigationPlayground/js/SimpleTabs.js
+++ b/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: {
--- a/examples/NavigationPlayground/js/StacksInTabs.js
+++ b/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;
--- a/examples/NavigationPlayground/js/StacksOverTabs.js
+++ b/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!`;
    },
  },
 });
--- a/examples/NavigationPlayground/js/TabsInDrawer.js
+++ b/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';