Reformat code (#1401)

example/src/app.js

@@ -1,59 +1,59 @@
-import { Platform } from 'react-native';
-import { Navigation } from 'react-native-navigation';
+import {Platform} from 'react-native';
+import {Navigation} from 'react-native-navigation';
 import registerScreens from './screens';
 
 // screen related book keeping
 registerScreens();
 
 const tabs = [{
-    label: 'Navigation',
-    screen: 'example.Types',
-    icon: require('../img/list.png'),
-    title: 'Navigation Types',
+  label: 'Navigation',
+  screen: 'example.Types',
+  icon: require('../img/list.png'),
+  title: 'Navigation Types',
 }, {
-    label: 'Actions',
-    screen: 'example.Actions',
-    icon: require('../img/swap.png'),
-    title: 'Navigation Actions',
+  label: 'Actions',
+  screen: 'example.Actions',
+  icon: require('../img/swap.png'),
+  title: 'Navigation Actions',
 }];
 
 if (Platform.OS === 'android') {
-    tabs.push({
-        label: 'Transitions',
-        screen: 'example.Transitions',
-        icon: require('../img/transform.png'),
-        title: 'Navigation Transitions',
-    });
+  tabs.push({
+    label: 'Transitions',
+    screen: 'example.Transitions',
+    icon: require('../img/transform.png'),
+    title: 'Navigation Transitions',
+  });
 }
 
 // this will start our app
 Navigation.startTabBasedApp({
-    tabs,
-    tabsStyle: {
-        tabBarBackgroundColor: '#003a66',
-        navBarButtonColor: '#ffffff',
-        tabBarButtonColor: '#ffffff',
-        navBarTextColor: '#ffffff',
-        tabBarSelectedButtonColor: '#ff505c',
-        navigationBarColor: '#003a66',
-        navBarBackgroundColor: '#003a66',
-        statusBarColor: '#002b4c',
-        tabFontFamily: 'BioRhyme-Bold',
-    },
-    appStyle: {
-        tabBarBackgroundColor: '#003a66',
-        navBarButtonColor: '#ffffff',
-        tabBarButtonColor: '#ffffff',
-        navBarTextColor: '#ffffff',
-        tabBarSelectedButtonColor: '#ff505c',
-        navigationBarColor: '#003a66',
-        navBarBackgroundColor: '#003a66',
-        statusBarColor: '#002b4c',
-        tabFontFamily: 'BioRhyme-Bold',
-    },
-    drawer: {
-        left: {
-            screen: 'example.Types.Drawer'
-        }
+  tabs,
+  tabsStyle: {
+    tabBarBackgroundColor: '#003a66',
+    navBarButtonColor: '#ffffff',
+    tabBarButtonColor: '#ffffff',
+    navBarTextColor: '#ffffff',
+    tabBarSelectedButtonColor: '#ff505c',
+    navigationBarColor: '#003a66',
+    navBarBackgroundColor: '#003a66',
+    statusBarColor: '#002b4c',
+    tabFontFamily: 'BioRhyme-Bold',
+  },
+  appStyle: {
+    tabBarBackgroundColor: '#003a66',
+    navBarButtonColor: '#ffffff',
+    tabBarButtonColor: '#ffffff',
+    navBarTextColor: '#ffffff',
+    tabBarSelectedButtonColor: '#ff505c',
+    navigationBarColor: '#003a66',
+    navBarBackgroundColor: '#003a66',
+    statusBarColor: '#002b4c',
+    tabFontFamily: 'BioRhyme-Bold',
+  },
+  drawer: {
+    left: {
+      screen: 'example.Types.Drawer'
     }
+  }
 });

example/src/components/Row.js

@@ -1,43 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, View, Text, TouchableHighlight, Platform } from 'react-native';
+import {StyleSheet, View, Text, TouchableHighlight, Platform} from 'react-native';
 
-function Row({ title, onPress, platform, testID }) {
-    if (platform && platform !== Platform.OS) {
-        return <View />;
-    }
+function Row({title, onPress, platform, testID}) {
+  if (platform && platform !== Platform.OS) {
+    return <View />;
+  }
 
-    return (
-        <TouchableHighlight
-            onPress={onPress}
-            testID={testID}
-            underlayColor={'rgba(0, 0, 0, 0.054)'}
-        >
-            <View style={styles.row}>
-                <Text style={styles.text}>{title}</Text>
-            </View>
-        </TouchableHighlight>
-    );
+  return (
+    <TouchableHighlight
+      onPress={onPress}
+      testID={testID}
+      underlayColor={'rgba(0, 0, 0, 0.054)'}
+    >
+      <View style={styles.row}>
+        <Text style={styles.text}>{title}</Text>
+      </View>
+    </TouchableHighlight>
+  );
 }
 
 Row.propTypes = {
-    title: PropTypes.string.isRequired,
-    onPress: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired,
 };
 
 const styles = StyleSheet.create({
-    row: {
-        height: 48,
-        paddingHorizontal: 16,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderBottomWidth: 1,
-        borderBottomColor: 'rgba(0, 0, 0, 0.054)',
-    },
-    text: {
-        fontSize: 16,
-    },
+  row: {
+    height: 48,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.054)',
+  },
+  text: {
+    fontSize: 16,
+  },
 });
 
 export default Row;

example/src/screens/Actions.js

@@ -4,159 +4,159 @@ import Row from '../components/Row';
 
 class Actions extends React.Component {
 
-    constructor(props) {
-        super(props);
-
-        this._fab = false;
-        this._rightButton = null;
-        this._contextualMenu = false;
-        this._toggleTabs = 'shown';
-        this._toggleNavBar = 'shown';
-        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+  constructor(props) {
+    super(props);
+
+    this._fab = false;
+    this._rightButton = null;
+    this._contextualMenu = false;
+    this._toggleTabs = 'shown';
+    this._toggleNavBar = 'shown';
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+  }
+
+  onNavigatorEvent(event) {
+    if (event.id === 'contextualMenuDismissed') {
+      this._contextualMenu = false;
     }
+  }
+
+  setTitle = () => {
+    this.props.navigator.setTitle({
+      title: 'New Title!',
+    });
+  };
+
+  toggleTabs = () => {
+    const to = this._toggleTabs === 'shown' ? 'hidden' : 'shown';
+
+    this.props.navigator.toggleTabs({
+      to,
+      animated: true,
+    });
+    this._toggleTabs = to;
+  };
+
+  setTabBadge = () => {
+    this.props.navigator.setTabBadge({
+      tabIndex: 1,
+      badge: Math.floor(Math.random() * 20) + 1,
+    });
+  };
+
+  switchToTab = () => {
+    this.props.navigator.switchToTab({
+      tabIndex: 0,
+    });
+  };
+
+  toggleNavBar = () => {
+    const to = this._toggleNavBar === 'shown' ? 'hidden' : 'shown';
+
+    this.props.navigator.toggleNavBar({
+      to,
+      animated: true,
+    });
+    this._toggleNavBar = to;
+  };
+
+  showSnackbar = () => {
+    this.props.navigator.showSnackbar({
+      title: 'Woo Snacks!',
+    });
+  };
+
+  toggleContextualMenu = () => {
+    if (!this._contextualMenu) {
+      this.props.navigator.showContextualMenu({
+        rightButtons: [{
+          title: 'Edit',
+          icon: require('../../img/edit.png'),
+        }, {
+          title: 'Delete',
+          icon: require('../../img/delete.png'),
+        }],
+        onButtonPressed: (index) => console.log(`Button ${index} tapped`)
+      });
+      this._contextualMenu = true;
+    } else {
+      this.props.navigator.dismissContextualMenu();
+      this._contextualMenu = false;
+    }
+
+  };
+
+  setButtons = () => {
+    let title = '';
 
-    onNavigatorEvent(event) {
-        if (event.id === 'contextualMenuDismissed') {
-            this._contextualMenu = false;
-        }
+    if (!this._rightButton) {
+      title = 'Hello';
+    } else if (this._rightButton === 'Hello') {
+      title = 'Its Me';
     }
 
-    setTitle = () => {
-        this.props.navigator.setTitle({
-            title: 'New Title!',
-        });
-    };
-
-    toggleTabs = () => {
-        const to = this._toggleTabs === 'shown' ? 'hidden' : 'shown';
-
-        this.props.navigator.toggleTabs({
-            to,
-            animated: true,
-        });
-        this._toggleTabs = to;
-    };
-
-    setTabBadge = () => {
-        this.props.navigator.setTabBadge({
-            tabIndex: 1,
-            badge: Math.floor(Math.random() * 20) + 1,
-        });
-    };
-
-    switchToTab = () => {
-        this.props.navigator.switchToTab({
-            tabIndex: 0,
-        });
-    };
-
-    toggleNavBar = () => {
-        const to = this._toggleNavBar === 'shown' ? 'hidden' : 'shown';
-
-        this.props.navigator.toggleNavBar({
-            to,
-            animated: true,
-        });
-        this._toggleNavBar = to;
-    };
-
-    showSnackbar = () => {
-        this.props.navigator.showSnackbar({
-            title: 'Woo Snacks!',
-        });
-    };
-
-    toggleContextualMenu = () => {
-        if (!this._contextualMenu) {
-            this.props.navigator.showContextualMenu({
-                rightButtons: [{
-                    title: 'Edit',
-                    icon: require('../../img/edit.png'),
-                }, {
-                    title: 'Delete',
-                    icon: require('../../img/delete.png'),
-                }],
-                onButtonPressed: (index) => console.log(`Button ${index} tapped`)
-            });
-            this._contextualMenu = true;
-        } else {
-            this.props.navigator.dismissContextualMenu();
-            this._contextualMenu = false;
-        }
-
-    };
-
-    setButtons = () => {
-        let title = '';
-
-        if (!this._rightButton) {
-            title = 'Hello';
-        } else if (this._rightButton === 'Hello') {
-            title = 'Its Me';
-        }
-
-        this.props.navigator.setButtons({
-            rightButtons: [{
-                title,
-                id: 'topRight',
-            }],
-            animated: true,
-        });
-        this._rightButton = title;
-    };
-
-    toggleFAB = () => {
-        if (this._fab) {
-            this.props.navigator.setButtons({
-                fab: {},
-            });
-            this._fab = false;
-        } else {
-            this.props.navigator.setButtons({
-                fab: {
-                    collapsedId: 'share',
-                    collapsedIcon: require('../../img/edit@1x.png'),
-                    expendedId: 'clear',
-                    expendedIcon: require('../../img/edit@1x.png'),
-                    backgroundColor: '#ff505c',
-                    actions: [
-                        {
-                            id: 'mail',
-                            icon: require('../../img/edit@1x.png'),
-                            backgroundColor: '#03A9F4'
-                        },
-                        {
-                            id: 'delete',
-                            icon: require('../../img/delete@1x.png'),
-                            backgroundColor: '#4CAF50'
-                        }
-                    ]
-                },
-                animated: true,
-            });
-            this._fab = true;
-        }
-    };
-
-    render() {
-        return (
-            <ScrollView style={styles.container}>
-                <Row title={'Set Title'} onPress={this.setTitle}/>
-                <Row title={'Toggle Tabs'} onPress={this.toggleTabs}/>
-                <Row title={'Set Tab Badge'} onPress={this.setTabBadge}/>
-                <Row title={'Switch To Tab 0'} onPress={this.switchToTab}/>
-                <Row title={'Toggle Nav Bar'} onPress={this.toggleNavBar}/>
-                <Row title={'Show Snackbar'} onPress={this.showSnackbar} platform={'android'}/>
-                <Row title={'Toggle Contextual Menu'} onPress={this.toggleContextualMenu} platform={'android'}/>
-                <Row title={'Set Right Buttons'} onPress={this.setButtons}/>
-                <Row title={'Toggle FAB'} onPress={this.toggleFAB} platform={'android'}/>
-            </ScrollView>
-        );
+    this.props.navigator.setButtons({
+      rightButtons: [{
+        title,
+        id: 'topRight',
+      }],
+      animated: true,
+    });
+    this._rightButton = title;
+  };
+
+  toggleFAB = () => {
+    if (this._fab) {
+      this.props.navigator.setButtons({
+        fab: {},
+      });
+      this._fab = false;
+    } else {
+      this.props.navigator.setButtons({
+        fab: {
+          collapsedId: 'share',
+          collapsedIcon: require('../../img/edit@1x.png'),
+          expendedId: 'clear',
+          expendedIcon: require('../../img/edit@1x.png'),
+          backgroundColor: '#ff505c',
+          actions: [
+            {
+              id: 'mail',
+              icon: require('../../img/edit@1x.png'),
+              backgroundColor: '#03A9F4'
+            },
+            {
+              id: 'delete',
+              icon: require('../../img/delete@1x.png'),
+              backgroundColor: '#4CAF50'
+            }
+          ]
+        },
+        animated: true,
+      });
+      this._fab = true;
     }
+  };
+
+  render() {
+    return (
+      <ScrollView style={styles.container}>
+        <Row title={'Set Title'} onPress={this.setTitle}/>
+        <Row title={'Toggle Tabs'} onPress={this.toggleTabs}/>
+        <Row title={'Set Tab Badge'} onPress={this.setTabBadge}/>
+        <Row title={'Switch To Tab 0'} onPress={this.switchToTab}/>
+        <Row title={'Toggle Nav Bar'} onPress={this.toggleNavBar}/>
+        <Row title={'Show Snackbar'} onPress={this.showSnackbar} platform={'android'}/>
+        <Row title={'Toggle Contextual Menu'} onPress={this.toggleContextualMenu} platform={'android'}/>
+        <Row title={'Set Right Buttons'} onPress={this.setButtons}/>
+        <Row title={'Toggle FAB'} onPress={this.toggleFAB} platform={'android'}/>
+      </ScrollView>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {},
+  container: {},
 });
 
 export default Actions;

example/src/screens/CustomNavBar.js

@@ -12,8 +12,7 @@ export default class CustomNavBar extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-    };
+    this.state = {};
   }
 
   render() {

example/src/screens/CustomNavBarScreen.js

@@ -19,6 +19,7 @@ export default class CustomNavBarScreen extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     return (
       <View style={styles.container}>
@@ -38,7 +39,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontSize: 18,
     marginBottom: 10,
-    marginTop:10,
+    marginTop: 10,
     color: 'blue'
   }
 });

example/src/screens/Transitions.js

@@ -1,37 +1,37 @@
 import React from 'react';
-import { StyleSheet, ScrollView, Text } from 'react-native';
+import {StyleSheet, ScrollView, Text} from 'react-native';
 import Row from '../components/Row';
 
 class Transitions extends React.Component {
 
-    showCollapsingHeader = () => {
-      this.props.navigator.showModal({
-          title: 'Collapsing Header',
-          screen: 'example.Transitions.CollapsingHeader',
-      });
-    };
+  showCollapsingHeader = () => {
+    this.props.navigator.showModal({
+      title: 'Collapsing Header',
+      screen: 'example.Transitions.CollapsingHeader',
+    });
+  };
 
-    showSharedElementTransitions = () => {
-        this.props.navigator.showModal({
-            title: 'Shared Element Transition Examples',
-            screen: 'example.Transitions.SharedElementTransitions',
-        });
-    };
+  showSharedElementTransitions = () => {
+    this.props.navigator.showModal({
+      title: 'Shared Element Transition Examples',
+      screen: 'example.Transitions.SharedElementTransitions',
+    });
+  };
 
-    render() {
-        return (
-            <ScrollView style={styles.container}>
-                <Row title={'Collapsing Header'} onPress={this.showCollapsingHeader} />
-                <Row title={'Shared Element Transition'} onPress={this.showSharedElementTransitions} />
-            </ScrollView>
-        );
-    }
+  render() {
+    return (
+      <ScrollView style={styles.container}>
+        <Row title={'Collapsing Header'} onPress={this.showCollapsingHeader}/>
+        <Row title={'Shared Element Transition'} onPress={this.showSharedElementTransitions}/>
+      </ScrollView>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
+  container: {
+    flex: 1,
+  },
 });
 
 export default Transitions;

example/src/screens/Types.js

@@ -1,99 +1,99 @@
 import React from 'react';
-import { StyleSheet, View, Text, ScrollView, TouchableHighlight } from 'react-native';
+import {StyleSheet, View, Text, ScrollView, TouchableHighlight} from 'react-native';
 import Row from '../components/Row';
 
 class Types extends React.Component {
 
-    toggleDrawer = () => {
-        this.props.navigator.toggleDrawer({
-            side: 'left',
-            animated: true
-        });
-    };
+  toggleDrawer = () => {
+    this.props.navigator.toggleDrawer({
+      side: 'left',
+      animated: true
+    });
+  };
 
-    pushScreen = () => {
-        this.props.navigator.push({
-            screen: 'example.Types.Push',
-            title: 'New Screen',
-        });
-    };
+  pushScreen = () => {
+    this.props.navigator.push({
+      screen: 'example.Types.Push',
+      title: 'New Screen',
+    });
+  };
 
-    pushTopTabsScreen = () => {
-        this.props.navigator.push({
-            screen: 'example.Types.TopTabs',
-            title: 'Top Tabs',
-            topTabs: [{
-                screenId: 'example.Types.TopTabs.TabOne',
-                title: 'Tab One',
-            }, {
-                screenId: 'example.Types.TopTabs.TabTwo',
-                title: 'Tab Two',
-            }],
-        });
-    };
+  pushTopTabsScreen = () => {
+    this.props.navigator.push({
+      screen: 'example.Types.TopTabs',
+      title: 'Top Tabs',
+      topTabs: [{
+        screenId: 'example.Types.TopTabs.TabOne',
+        title: 'Tab One',
+      }, {
+        screenId: 'example.Types.TopTabs.TabTwo',
+        title: 'Tab Two',
+      }],
+    });
+  };
 
-    showModal = () => {
-        this.props.navigator.showModal({
-            screen: 'example.Types.Modal',
-            title: 'Modal',
-        });
-    };
+  showModal = () => {
+    this.props.navigator.showModal({
+      screen: 'example.Types.Modal',
+      title: 'Modal',
+    });
+  };
 
-    showLightBox = () => {
-        this.props.navigator.showLightBox({
-            screen: "example.Types.LightBox",
-            passProps: {
-                title: 'LightBox',
-                content: 'Hey there, I\'m a light box screen :D',
-                onClose: this.dismissLightBox,
-            },
-            style: {
-                backgroundBlur: 'dark',
-                backgroundColor: 'rgba(0, 0, 0, 0.7)',
-            }
-        });
-    };
+  showLightBox = () => {
+    this.props.navigator.showLightBox({
+      screen: "example.Types.LightBox",
+      passProps: {
+        title: 'LightBox',
+        content: 'Hey there, I\'m a light box screen :D',
+        onClose: this.dismissLightBox,
+      },
+      style: {
+        backgroundBlur: 'dark',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      }
+    });
+  };
 
-    dismissLightBox = () => {
-        this.props.navigator.dismissLightBox();
-    };
+  dismissLightBox = () => {
+    this.props.navigator.dismissLightBox();
+  };
 
-    showInAppNotification = () => {
-        this.props.navigator.showInAppNotification({
-            screen: 'example.Types.Notification',
-        });
-    };
+  showInAppNotification = () => {
+    this.props.navigator.showInAppNotification({
+      screen: 'example.Types.Notification',
+    });
+  };
 
-    render() {
-        return (
-            <ScrollView style={styles.container}>
-                <Row title={'Toggle Drawer'} onPress={this.toggleDrawer} />
-                <Row title={'Push Screen'} testID={'pushScreen'} onPress={this.pushScreen} />
-                <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'} />
-                <Row title={'Show Modal'} onPress={this.showModal} />
-                <Row title={'Show Lightbox'} onPress={this.showLightBox} />
-                <Row title={'Show In-App Notification'} onPress={this.showInAppNotification} />
-            </ScrollView>
-        );
-    }
+  render() {
+    return (
+      <ScrollView style={styles.container}>
+        <Row title={'Toggle Drawer'} onPress={this.toggleDrawer}/>
+        <Row title={'Push Screen'} testID={'pushScreen'} onPress={this.pushScreen}/>
+        <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'}/>
+        <Row title={'Show Modal'} onPress={this.showModal}/>
+        <Row title={'Show Lightbox'} onPress={this.showLightBox}/>
+        <Row title={'Show In-App Notification'} onPress={this.showInAppNotification}/>
+      </ScrollView>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    row: {
-        height: 48,
-        paddingHorizontal: 16,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderBottomWidth: 1,
-        borderBottomColor: 'rgba(0, 0, 0, 0.054)',
-    },
-    text: {
-        fontSize: 16,
-    },
+  container: {
+    flex: 1,
+  },
+  row: {
+    height: 48,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.054)',
+  },
+  text: {
+    fontSize: 16,
+  },
 });
 
 export default Types;

example/src/screens/index.js

@@ -1,4 +1,4 @@
-import { Navigation } from 'react-native-navigation';
+import {Navigation} from 'react-native-navigation';
 
 import Types from './Types';
 import Actions from './Actions';
@@ -23,24 +23,24 @@ import Masonry from './transitions/sharedElementTransitions/Masonry/Masonry';
 import MasonryItem from './transitions/sharedElementTransitions/Masonry/Item';
 
 export default function () {
-    Navigation.registerComponent('example.Types', () => Types);
-    Navigation.registerComponent('example.Actions', () => Actions);
-    Navigation.registerComponent('example.Transitions', () => Transitions);
-
-    Navigation.registerComponent('example.Types.Push', () => Push);
-    Navigation.registerComponent('example.Types.Drawer', () => Drawer);
-    Navigation.registerComponent('example.Types.Screen', () => Drawer);
-    Navigation.registerComponent('example.Types.Modal', () => Modal);
-    Navigation.registerComponent('example.Types.LightBox', () => LightBox);
-    Navigation.registerComponent('example.Types.Notification', () => Notification);
-    Navigation.registerComponent('example.Types.TopTabs', () => TopTabs);
-    Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne);
-    Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo);
-
-    Navigation.registerComponent('example.Transitions.CollapsingHeader', () => CollapsingHeader);
-    Navigation.registerComponent('example.Transitions.SharedElementTransitions', () => SharedElementTransitions);
-    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards', () => Cards);
-    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards.Info', () => CardsInfo);
-    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry', () => Masonry);
-    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry.Item', () => MasonryItem);
+  Navigation.registerComponent('example.Types', () => Types);
+  Navigation.registerComponent('example.Actions', () => Actions);
+  Navigation.registerComponent('example.Transitions', () => Transitions);
+
+  Navigation.registerComponent('example.Types.Push', () => Push);
+  Navigation.registerComponent('example.Types.Drawer', () => Drawer);
+  Navigation.registerComponent('example.Types.Screen', () => Drawer);
+  Navigation.registerComponent('example.Types.Modal', () => Modal);
+  Navigation.registerComponent('example.Types.LightBox', () => LightBox);
+  Navigation.registerComponent('example.Types.Notification', () => Notification);
+  Navigation.registerComponent('example.Types.TopTabs', () => TopTabs);
+  Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne);
+  Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo);
+
+  Navigation.registerComponent('example.Transitions.CollapsingHeader', () => CollapsingHeader);
+  Navigation.registerComponent('example.Transitions.SharedElementTransitions', () => SharedElementTransitions);
+  Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards', () => Cards);
+  Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards.Info', () => CardsInfo);
+  Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry', () => Masonry);
+  Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry.Item', () => MasonryItem);
 }

example/src/screens/transitions/CollapsingHeader.js

@@ -1,35 +1,35 @@
 import React from 'react';
-import { StyleSheet, View, Text, ScrollView } from 'react-native';
+import {StyleSheet, View, Text, ScrollView} from 'react-native';
 
 class CollapsingHeader extends React.Component {
 
-    static navigatorStyle = {
-        drawUnderTabBar: true,
-        navBarButtonColor: '#ffffff',
-        navBarTextColor: '#ffffff',
-        collapsingToolBarImage: require('../../../img/gyro_header.jpg'),
-        collapsingToolBarCollapsedColor: '#0f2362',
-        navBarBackgroundColor: '#eeeeee'
-    };
+  static navigatorStyle = {
+    drawUnderTabBar: true,
+    navBarButtonColor: '#ffffff',
+    navBarTextColor: '#ffffff',
+    collapsingToolBarImage: require('../../../img/gyro_header.jpg'),
+    collapsingToolBarCollapsedColor: '#0f2362',
+    navBarBackgroundColor: '#eeeeee'
+  };
 
-    render() {
-        return (
-            <ScrollView style={styles.container}>
-                <View>
-                    {[...new Array(40)].map((a, index) => (
-                        <Text key={`row_${index}`} style={styles.button}>Row {index}</Text>
-                    ))}
-                </View>
-            </ScrollView>
-        );
-    }
+  render() {
+    return (
+      <ScrollView style={styles.container}>
+        <View>
+          {[...new Array(40)].map((a, index) => (
+            <Text key={`row_${index}`} style={styles.button}>Row {index}</Text>
+          ))}
+        </View>
+      </ScrollView>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-    },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
 });
 
 export default CollapsingHeader;

example/src/screens/transitions/SharedElementTransitions.js

@@ -1,46 +1,46 @@
 import React from 'react';
-import { StyleSheet, ScrollView, Text } from 'react-native';
+import {StyleSheet, ScrollView, Text} from 'react-native';
 import Row from '../../components/Row';
 
 class Transitions extends React.Component {
 
-    showCardsExample = () => {
-        this.props.navigator.showModal({
-            title: 'Cards',
-            screen: 'example.Transitions.SharedElementTransitions.Cards',
-        });
-    };
+  showCardsExample = () => {
+    this.props.navigator.showModal({
+      title: 'Cards',
+      screen: 'example.Transitions.SharedElementTransitions.Cards',
+    });
+  };
 
-    showProfileExample = () => {
-        this.props.navigator.showModal({
-            title: 'Profiles',
-            screen: 'example.Transitions.SharedElementTransitions.Profiles',
-        });
-    };
+  showProfileExample = () => {
+    this.props.navigator.showModal({
+      title: 'Profiles',
+      screen: 'example.Transitions.SharedElementTransitions.Profiles',
+    });
+  };
 
-    showMasonryExample = () => {
-        this.props.navigator.showModal({
-            title: 'Masonry',
-            screen: 'example.Transitions.SharedElementTransitions.Masonry',
-        });
-    };
+  showMasonryExample = () => {
+    this.props.navigator.showModal({
+      title: 'Masonry',
+      screen: 'example.Transitions.SharedElementTransitions.Masonry',
+    });
+  };
 
-    render() {
-        return (
-            <ScrollView style={styles.container}>
-                <Row title={'Cards'} onPress={this.showCardsExample} />
-                {/*<Row title={'Profiles'} onPress={this.showProfileExample} />*/}
-                <Row title={'Masonry'} onPress={this.showMasonryExample} />
-            </ScrollView>
-        );
-    }
+  render() {
+    return (
+      <ScrollView style={styles.container}>
+        <Row title={'Cards'} onPress={this.showCardsExample}/>
+        {/*<Row title={'Profiles'} onPress={this.showProfileExample} />*/}
+        <Row title={'Masonry'} onPress={this.showMasonryExample}/>
+      </ScrollView>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#ffffff',
-    },
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
 });
 
 export default Transitions;

example/src/screens/transitions/sharedElementTransitions/Cards/Cards.js

@@ -1,106 +1,106 @@
 import React from 'react';
-import { ScrollView, TouchableHighlight, StyleSheet, Image, Text, View, ScrolView } from 'react-native';
-import { SharedElementTransition } from 'react-native-navigation';
+import {ScrollView, TouchableHighlight, StyleSheet, Image, Text, View, ScrolView} from 'react-native';
+import {SharedElementTransition} from 'react-native-navigation';
 
 const IMAGE_HEIGHT = 190;
 
 class CardScreen extends React.Component {
 
-    goToCard = (index) => {
-        this.props.navigator.push({
-            screen: 'example.Transitions.SharedElementTransitions.Cards.Info',
-            sharedElements: [`image${index}`],
-            animated: false,
-            overrideBackPress: true,
-            passProps: {
-                sharedImageId: `image${index}`
-            }
-        })
-    };
+  goToCard = (index) => {
+    this.props.navigator.push({
+      screen: 'example.Transitions.SharedElementTransitions.Cards.Info',
+      sharedElements: [`image${index}`],
+      animated: false,
+      overrideBackPress: true,
+      passProps: {
+        sharedImageId: `image${index}`
+      }
+    })
+  };
 
-    _renderCard(index) {
-        return (
-            <View style={styles.cardContainer}>
-                <TouchableHighlight
-                    underlayColor={'rgba(0, 0, 0, 0.054)'}
-                    onPress={() => this.goToCard(index)}
-                >
-                    <View>
-                        {this._renderImage(index)}
-                        {this._renderCardContent()}
-                    </View>
-                </TouchableHighlight>
-            </View>
-        );
-    }
+  _renderCard(index) {
+    return (
+      <View style={styles.cardContainer}>
+        <TouchableHighlight
+          underlayColor={'rgba(0, 0, 0, 0.054)'}
+          onPress={() => this.goToCard(index)}
+        >
+          <View>
+            {this._renderImage(index)}
+            {this._renderCardContent()}
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
 
-    _renderImage(index) {
-        return (
-            <SharedElementTransition
-                style={styles.imageContainer}
-                sharedElementId={`image${index}`}
-            >
-                <Image
-                    style={styles.image}
-                    source={require('../../../../../img/beach.jpg')}
-                />
-            </SharedElementTransition>
-        );
-    }
+  _renderImage(index) {
+    return (
+      <SharedElementTransition
+        style={styles.imageContainer}
+        sharedElementId={`image${index}`}
+      >
+        <Image
+          style={styles.image}
+          source={require('../../../../../img/beach.jpg')}
+        />
+      </SharedElementTransition>
+    );
+  }
 
-    _renderCardContent() {
-        return (
-            <View style={styles.cardContentContainer}>
-                <Text style={styles.title}>This is a title</Text>
-                <Text>This is a very long long long long long long long long long long content</Text>
-            </View>
-        );
-    }
+  _renderCardContent() {
+    return (
+      <View style={styles.cardContentContainer}>
+        <Text style={styles.title}>This is a title</Text>
+        <Text>This is a very long long long long long long long long long long content</Text>
+      </View>
+    );
+  }
 
-    render() {
-        return (
-            <ScrollView
-                style={styles.container}
-                contentContainerStyle={styles.content}
-            >
-                {this._renderCard(0)}
-                {this._renderCard(1)}
-                {this._renderCard(2)}
-            </ScrollView>
-        );
-    }
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={styles.content}
+      >
+        {this._renderCard(0)}
+        {this._renderCard(1)}
+        {this._renderCard(2)}
+      </ScrollView>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#ffffff',
-    },
-    content: {
-        marginHorizontal: 8,
-    },
-    cardContainer: {
-        marginVertical: 8,
-        elevation: 2,
-        borderRadius: 2,
-        backgroundColor: '#F5F5F5'
-    },
-    imageContainer: {
-        justifyContent: 'flex-start'
-    },
-    image: {
-        height: IMAGE_HEIGHT,
-        borderTopLeftRadius: 2,
-        borderTopRightRadius: 2
-    },
-    cardContentContainer: {
-        padding: 8
-    },
-    title: {
-        fontWeight: '500',
-        paddingBottom: 8,
-        fontSize: 17
-    },
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  content: {
+    marginHorizontal: 8,
+  },
+  cardContainer: {
+    marginVertical: 8,
+    elevation: 2,
+    borderRadius: 2,
+    backgroundColor: '#F5F5F5'
+  },
+  imageContainer: {
+    justifyContent: 'flex-start'
+  },
+  image: {
+    height: IMAGE_HEIGHT,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2
+  },
+  cardContentContainer: {
+    padding: 8
+  },
+  title: {
+    fontWeight: '500',
+    paddingBottom: 8,
+    fontSize: 17
+  },
 });
 
 export default CardScreen;

example/src/screens/transitions/sharedElementTransitions/Cards/Info.js

@@ -1,15 +1,15 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {
-    ScrollView,
-    TouchableOpacity,
-    StyleSheet,
-    Image,
-    Text,
-    View,
-    Platform,
-    ScrolView
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  Text,
+  View,
+  Platform,
+  ScrolView
 } from 'react-native';
-import { SharedElementTransition } from 'react-native-navigation';
+import {SharedElementTransition} from 'react-native-navigation';
 import * as Animatable from 'react-native-animatable';
 
 const SHOW_DURATION = 400;
@@ -17,107 +17,107 @@ const HIDE_DURATION = 300;
 
 class InfoScreen extends Component {
 
-    constructor(props) {
-        super(props);
-        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-        this.state = {
-            animationType: 'fadeInRight',
-            animationDuration: SHOW_DURATION
-        }
+  constructor(props) {
+    super(props);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+    this.state = {
+      animationType: 'fadeInRight',
+      animationDuration: SHOW_DURATION
     }
+  }
 
-    onNavigatorEvent(event) {
-        if (event.id === 'backPress') {
-            this.setState({
-                animationType: 'fadeOutRight',
-                animationDuration: HIDE_DURATION
-            });
-            this.props.navigator.pop();
-        }
+  onNavigatorEvent(event) {
+    if (event.id === 'backPress') {
+      this.setState({
+        animationType: 'fadeOutRight',
+        animationDuration: HIDE_DURATION
+      });
+      this.props.navigator.pop();
     }
+  }
 
-    render() {
-        return (
-            <View style={styles.container}>
-                {this._renderImage()}
-                {this._renderContent()}
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        {this._renderImage()}
+        {this._renderContent()}
+      </View>
+    );
+  }
 
-    _renderImage() {
-        return (
-            <SharedElementTransition
-                style={styles.imageContainer}
-                sharedElementId={this.props.sharedImageId}
-                showDuration={SHOW_DURATION}
-                hideDuration={HIDE_DURATION}
-                animateClipBounds={true}
-                showInterpolation={
-                    {
-                        type: 'linear',
-                        easing: 'FastOutSlowIn'
-                    }
-                }
-                hideInterpolation={
-                    {
-                        type: 'linear',
-                        easing: 'FastOutSlowIn'
-                    }
-                }
-            >
-                <Image
-                    style={styles.image}
-                    source={require('../../../../../img/beach.jpg')}
-                />
-            </SharedElementTransition>
-        );
-    }
+  _renderImage() {
+    return (
+      <SharedElementTransition
+        style={styles.imageContainer}
+        sharedElementId={this.props.sharedImageId}
+        showDuration={SHOW_DURATION}
+        hideDuration={HIDE_DURATION}
+        animateClipBounds={true}
+        showInterpolation={
+          {
+            type: 'linear',
+            easing: 'FastOutSlowIn'
+          }
+        }
+        hideInterpolation={
+          {
+            type: 'linear',
+            easing: 'FastOutSlowIn'
+          }
+        }
+      >
+        <Image
+          style={styles.image}
+          source={require('../../../../../img/beach.jpg')}
+        />
+      </SharedElementTransition>
+    );
+  }
 
-    _renderContent() {
-        return (
-            <Animatable.View
-                style={styles.content}
-                duration={this.state.animationDuration}
-                animation={this.state.animationType}
-                useNativeDriver={true}
-            >
-                <Text style={styles.text}>Line 1</Text>
-                <Text style={styles.text}>Line 2</Text>
-                <Text style={styles.text}>Line 3</Text>
-                <Text style={styles.text}>Line 4</Text>
-                <Text style={styles.text}>Line 5</Text>
-                <Text style={styles.text}>Line 6</Text>
-                <Text style={styles.text}>Line 7</Text>
-                <Text style={styles.text}>Line 8</Text>
-            </Animatable.View>
-        );
-    }
+  _renderContent() {
+    return (
+      <Animatable.View
+        style={styles.content}
+        duration={this.state.animationDuration}
+        animation={this.state.animationType}
+        useNativeDriver={true}
+      >
+        <Text style={styles.text}>Line 1</Text>
+        <Text style={styles.text}>Line 2</Text>
+        <Text style={styles.text}>Line 3</Text>
+        <Text style={styles.text}>Line 4</Text>
+        <Text style={styles.text}>Line 5</Text>
+        <Text style={styles.text}>Line 6</Text>
+        <Text style={styles.text}>Line 7</Text>
+        <Text style={styles.text}>Line 8</Text>
+      </Animatable.View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    content: {
-        flex: 1,
-        marginTop: 190,
-        backgroundColor: 'white'
-    },
-    imageContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-    },
-    image: {
-        height: 190
-    },
-    text: {
-        fontSize: 17,
-        paddingVertical: 4,
-        paddingLeft: 8
-    }
+  container: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    marginTop: 190,
+    backgroundColor: 'white'
+  },
+  imageContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+  image: {
+    height: 190
+  },
+  text: {
+    fontSize: 17,
+    paddingVertical: 4,
+    paddingLeft: 8
+  }
 });
 
 export default InfoScreen;

example/src/screens/transitions/sharedElementTransitions/Masonry/Item.js

@@ -1,54 +1,54 @@
 import React from 'react';
-import { StyleSheet, View, Text, Image } from 'react-native';
-import { SharedElementTransition } from 'react-native-navigation';
+import {StyleSheet, View, Text, Image} from 'react-native';
+import {SharedElementTransition} from 'react-native-navigation';
 
 const SHOW_DURATION = 240;
 const HIDE_DURATION = 200;
 
 class Item extends React.Component {
 
-    static navigatorStyle = {
-        navBarHidden: true,
-        drawUnderNavBar: true
-    };
+  static navigatorStyle = {
+    navBarHidden: true,
+    drawUnderNavBar: true
+  };
 
-    render() {
-        return (
-            <View style={styles.container}>
-                <SharedElementTransition
-                    sharedElementId={this.props.sharedImageId}
-                    showDuration={SHOW_DURATION}
-                    hideDuration={HIDE_DURATION}
-                    animateClipBounds
-                    showInterpolation={{
-                        type: 'linear',
-                        easing: 'FastInSlowOut',
-                    }}
-                    hideInterpolation={{
-                        type: 'linear',
-                        easing: 'FastOutSlowIn',
-                    }}
-                >
-                    <Image
-                        style={styles.image}
-                        source={this.props.image}
-                    />
-                </SharedElementTransition>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        <SharedElementTransition
+          sharedElementId={this.props.sharedImageId}
+          showDuration={SHOW_DURATION}
+          hideDuration={HIDE_DURATION}
+          animateClipBounds
+          showInterpolation={{
+            type: 'linear',
+            easing: 'FastInSlowOut',
+          }}
+          hideInterpolation={{
+            type: 'linear',
+            easing: 'FastOutSlowIn',
+          }}
+        >
+          <Image
+            style={styles.image}
+            source={this.props.image}
+          />
+        </SharedElementTransition>
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#ffffff',
-        justifyContent: 'center',
-    },
-    image: {
-        width: 400,
-        height: 400,
-    }
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+  },
+  image: {
+    width: 400,
+    height: 400,
+  }
 });
 
 export default Item;

example/src/screens/transitions/sharedElementTransitions/Masonry/Masonry.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyleSheet, View, Text, PixelRatio, FlatList, Image, TouchableHighlight } from 'react-native';
-import { Navigation, SharedElementTransition } from 'react-native-navigation';
+import {StyleSheet, View, Text, PixelRatio, FlatList, Image, TouchableHighlight} from 'react-native';
+import {Navigation, SharedElementTransition} from 'react-native-navigation';
 
 import images from './images';
 
@@ -9,90 +9,90 @@ const COLS = 2;
 
 class Masonry extends React.Component {
 
-    onAssetPress = (image, key) => {
-        this.props.navigator.push({
-            screen: 'example.Transitions.SharedElementTransitions.Masonry.Item',
-            sharedElements: [key],
-            passProps: {
-                image,
-                sharedImageId: key,
-            },
-        });
-    };
+  onAssetPress = (image, key) => {
+    this.props.navigator.push({
+      screen: 'example.Transitions.SharedElementTransitions.Masonry.Item',
+      sharedElements: [key],
+      passProps: {
+        image,
+        sharedImageId: key,
+      },
+    });
+  };
 
-    renderAsset = (asset, row, column, index) => {
-        const key = `row_${row}_column_${column}_asset_${index}`;
+  renderAsset = (asset, row, column, index) => {
+    const key = `row_${row}_column_${column}_asset_${index}`;
 
-        return (
-            <TouchableHighlight
-                key={key}
-                onPress={() => {
-                    this.onAssetPress(asset.source, key);
-                }}
-                style={[styles.assetContainer, { flex: asset.weight }]}
-            >
-                <View style={{ flex: 1 }}>
-                    <SharedElementTransition
-                        style={{ flex: 1 }}
-                        sharedElementId={key}
-                    >
-                        <Image
-                            source={asset.source}
-                            resizeMode={'cover'}
-                            style={styles.asset}
-                        />
-                    </SharedElementTransition>
-                </View>
-            </TouchableHighlight>
-        );
-    };
+    return (
+      <TouchableHighlight
+        key={key}
+        onPress={() => {
+          this.onAssetPress(asset.source, key);
+        }}
+        style={[styles.assetContainer, {flex: asset.weight}]}
+      >
+        <View style={{flex: 1}}>
+          <SharedElementTransition
+            style={{flex: 1}}
+            sharedElementId={key}
+          >
+            <Image
+              source={asset.source}
+              resizeMode={'cover'}
+              style={styles.asset}
+            />
+          </SharedElementTransition>
+        </View>
+      </TouchableHighlight>
+    );
+  };
 
-    renderItem = ({ item, index }) => {
-        return (
-            <View style={[styles.item, { height: ROW_HEIGHT }]}>
-                {[...new Array(COLS)].map((column, columnIndex) => (
-                    <View
-                        key={`row_${index}_column_${columnIndex}`}
-                        style={{ flex: 1 }}
-                    >
-                        {item.images[columnIndex].map((asset, assetIndex) => this.renderAsset(asset, index, columnIndex, assetIndex))}
-                    </View>
-                ))}
-            </View>
-        );
-    };
+  renderItem = ({item, index}) => {
+    return (
+      <View style={[styles.item, {height: ROW_HEIGHT}]}>
+        {[...new Array(COLS)].map((column, columnIndex) => (
+          <View
+            key={`row_${index}_column_${columnIndex}`}
+            style={{flex: 1}}
+          >
+            {item.images[columnIndex].map((asset, assetIndex) => this.renderAsset(asset, index, columnIndex, assetIndex))}
+          </View>
+        ))}
+      </View>
+    );
+  };
 
-    render() {
-        return (
-            <View style={styles.container}>
-                <FlatList
-                    data={images}
-                    renderItem={this.renderItem}
-                    getItemLayout={(layout, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index })}
-                />
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        <FlatList
+          data={images}
+          renderItem={this.renderItem}
+          getItemLayout={(layout, index) => ({length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index})}
+        />
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#ffffff',
-    },
-    item: {
-        flex: 1,
-        flexDirection: 'row',
-    },
-    assetContainer: {
-        margin: 5,
-        borderRadius: 6,
-        borderWidth: StyleSheet.hairlineWidth,
-    },
-    asset: {
-        flex: 1,
-        borderRadius: 6,
-    },
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  item: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  assetContainer: {
+    margin: 5,
+    borderRadius: 6,
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  asset: {
+    flex: 1,
+    borderRadius: 6,
+  },
 });
 
 export default Masonry;

example/src/screens/transitions/sharedElementTransitions/Masonry/images.js

@@ -1,100 +1,100 @@
 const images = [
-    require('../../../../../img/masonry/Cfw87359UT.jpeg'),
-    require('../../../../../img/masonry/a848dHxA4e.jpeg'),
-    require('../../../../../img/masonry/AdGXmD1CH6.jpeg'),
-    require('../../../../../img/masonry/5Gi8kova3k.jpeg'),
-    require('../../../../../img/masonry/ri90ueind7.jpeg'),
-    require('../../../../../img/masonry/kVN0FryOZk.jpeg'),
-    require('../../../../../img/masonry/v8KLi2f0Tr.jpeg'),
-    require('../../../../../img/masonry/xU42hx19BB.jpeg'),
-    require('../../../../../img/masonry/61mpAVRV73.jpeg'),
-    require('../../../../../img/masonry/pqgylg80SD.jpeg'),
-    require('../../../../../img/masonry/37r6Cqp1B8.jpeg'),
-    require('../../../../../img/masonry/N30E32431C.jpeg'),
-    require('../../../../../img/masonry/rVOcz7rd0z.jpeg'),
-    require('../../../../../img/masonry/A4g0lZ33Z8.jpeg'),
-    require('../../../../../img/masonry/j51Pva1P8L.jpeg'),
-    require('../../../../../img/masonry/158xD4xbeh.jpeg'),
+  require('../../../../../img/masonry/Cfw87359UT.jpeg'),
+  require('../../../../../img/masonry/a848dHxA4e.jpeg'),
+  require('../../../../../img/masonry/AdGXmD1CH6.jpeg'),
+  require('../../../../../img/masonry/5Gi8kova3k.jpeg'),
+  require('../../../../../img/masonry/ri90ueind7.jpeg'),
+  require('../../../../../img/masonry/kVN0FryOZk.jpeg'),
+  require('../../../../../img/masonry/v8KLi2f0Tr.jpeg'),
+  require('../../../../../img/masonry/xU42hx19BB.jpeg'),
+  require('../../../../../img/masonry/61mpAVRV73.jpeg'),
+  require('../../../../../img/masonry/pqgylg80SD.jpeg'),
+  require('../../../../../img/masonry/37r6Cqp1B8.jpeg'),
+  require('../../../../../img/masonry/N30E32431C.jpeg'),
+  require('../../../../../img/masonry/rVOcz7rd0z.jpeg'),
+  require('../../../../../img/masonry/A4g0lZ33Z8.jpeg'),
+  require('../../../../../img/masonry/j51Pva1P8L.jpeg'),
+  require('../../../../../img/masonry/158xD4xbeh.jpeg'),
 ];
 
 function randomImage() {
-    return images[Math.floor(Math.random() * images.length)];
+  return images[Math.floor(Math.random() * images.length)];
 }
 
 export default [
-    {
-        key: 1,
-        images: [[{
-            weight: 2,
-            source: randomImage(),
-        }, {
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 3,
-            source: randomImage(),
-        }], [{
-            weight: 1,
-            source: randomImage(),
-        } ,{
-            weight: 3,
-            source: randomImage(),
-        }, {
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 1,
-            source: randomImage(),
-        }]],
-    },
-    {
-        key: 2,
-        images: [[{
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 3,
-            source: randomImage(),
-        }], [{
-            weight: 3,
-            source: randomImage(),
-        } ,{
-            weight: 3,
-            source: randomImage(),
-        }]],
-    },
-    {
-        key: 3,
-        images: [[{
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 2,
-            source: randomImage(),
-        }, {
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 2,
-            source: randomImage(),
-        }], [{
-            weight: 2,
-            source: randomImage(),
-        } ,{
-            weight: 1,
-            source: randomImage(),
-        }, {
-            weight: 2,
-            source: randomImage(),
-        }, {
-            weight: 1,
-            source: randomImage(),
-        }]],
-    }
+  {
+    key: 1,
+    images: [[{
+      weight: 2,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 3,
+      source: randomImage(),
+    }], [{
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 3,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }]],
+  },
+  {
+    key: 2,
+    images: [[{
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 3,
+      source: randomImage(),
+    }], [{
+      weight: 3,
+      source: randomImage(),
+    }, {
+      weight: 3,
+      source: randomImage(),
+    }]],
+  },
+  {
+    key: 3,
+    images: [[{
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 2,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 2,
+      source: randomImage(),
+    }], [{
+      weight: 2,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }, {
+      weight: 2,
+      source: randomImage(),
+    }, {
+      weight: 1,
+      source: randomImage(),
+    }]],
+  }
 ];

example/src/screens/transitions/sharedElementTransitions/Profiles/Profiles.js

@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {
-    ScrollView,
-    TouchableOpacity,
-    StyleSheet,
-    Image,
-    Text,
-    View,
-    ScrolView
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  Text,
+  View,
+  ScrolView
 } from 'react-native';
-import { SharedElementTransition } from 'react-native-navigation';
+import {SharedElementTransition} from 'react-native-navigation';
 import * as Animatable from 'react-native-animatable';
 
 const FADE_DURATION = 500;
@@ -19,195 +19,195 @@ const ICON_MARGIN = 24;
 
 class Profiles extends Component {
 
-    constructor(props) {
-        super(props);
-        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-        this.state = {
-            animationType: 'fadeIn'
-        }
+  constructor(props) {
+    super(props);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+    this.state = {
+      animationType: 'fadeIn'
     }
+  }
 
-    componentDidMount() {
-        if (__STRESS_TEST__) {
-            setTimeout(() => {
-                this.setState({
-                    animationType: 'fadeOut'
-                });
-                this.props.navigator.pop();
-            }, 650);
-        }
+  componentDidMount() {
+    if (__STRESS_TEST__) {
+      setTimeout(() => {
+        this.setState({
+          animationType: 'fadeOut'
+        });
+        this.props.navigator.pop();
+      }, 650);
     }
+  }
 
-    onNavigatorEvent(event) {
-        if (event.id === 'backPress') {
-            this.setState({
-                animationType: 'fadeOut'
-            });
-            this.props.navigator.pop();
-        }
+  onNavigatorEvent(event) {
+    if (event.id === 'backPress') {
+      this.setState({
+        animationType: 'fadeOut'
+      });
+      this.props.navigator.pop();
     }
+  }
 
-    _renderHeader() {
-        return (
-            <Animatable.View
-                animation={this.state.animationType}
-                duration={FADE_DURATION}
-                style={[styles.header, { backgroundColor: this.props.primaryColor }]}
-                useNativeDriver={true}
-            >
-                <View style={{ height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white' }} />
-                <View style={{ flex: 1, flexDirection: 'row' }}>
-                    {this._renderIcon()}
-                    {this._renderTitle()}
-                </View>
-            </Animatable.View>
-        );
-    }
+  _renderHeader() {
+    return (
+      <Animatable.View
+        animation={this.state.animationType}
+        duration={FADE_DURATION}
+        style={[styles.header, {backgroundColor: this.props.primaryColor}]}
+        useNativeDriver={true}
+      >
+        <View style={{height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white'}}/>
+        <View style={{flex: 1, flexDirection: 'row'}}>
+          {this._renderIcon()}
+          {this._renderTitle()}
+        </View>
+      </Animatable.View>
+    );
+  }
 
-    _renderTitle() {
-        return (
-            <View style={{ alignSelf: 'flex-end' }}>
-                <SharedElementTransition
-                    style={styles.titleContainer}
-                    sharedElementId={this.props.sharedTitleId}
-                    showDuration={SHOW_DURATION}
-                    hideDuration={HIDE_DURATION}
-                    showInterpolation={
-                        {
-                            type: 'path',
-                            controlX1: '0.5',
-                            controlY1: '1',
-                            controlX2: '0',
-                            controlY2: '0.5',
-                            easing: 'FastOutSlowIn'
-                        }
-                    }
-                    hideInterpolation={
-                        {
-                            type: 'path',
-                            controlX1: '0.5',
-                            controlY1: '0',
-                            controlX2: '1',
-                            controlY2: '0.5',
-                            easing: 'FastOutSlowIn'
-                        }
-                    }
-                >
-                    <Text style={[styles.title, { color: this.props.titleColor }]}>{this.props.title}</Text>
-                </SharedElementTransition>
-            </View>
-        );
-    }
+  _renderTitle() {
+    return (
+      <View style={{alignSelf: 'flex-end'}}>
+        <SharedElementTransition
+          style={styles.titleContainer}
+          sharedElementId={this.props.sharedTitleId}
+          showDuration={SHOW_DURATION}
+          hideDuration={HIDE_DURATION}
+          showInterpolation={
+            {
+              type: 'path',
+              controlX1: '0.5',
+              controlY1: '1',
+              controlX2: '0',
+              controlY2: '0.5',
+              easing: 'FastOutSlowIn'
+            }
+          }
+          hideInterpolation={
+            {
+              type: 'path',
+              controlX1: '0.5',
+              controlY1: '0',
+              controlX2: '1',
+              controlY2: '0.5',
+              easing: 'FastOutSlowIn'
+            }
+          }
+        >
+          <Text style={[styles.title, {color: this.props.titleColor}]}>{this.props.title}</Text>
+        </SharedElementTransition>
+      </View>
+    );
+  }
 
-    _renderContent() {
-        return (
-            <Animatable.View
-                animation={this.state.animationType}
-                duration={FADE_DURATION}
-                style={styles.body}
-                useNativeDriver={true}>
-                <View
-                    style={styles.list}
-                    initialListSize={20}>
-                    {this._genRows()}
-                </View>
-            </Animatable.View>
-        );
-    }
+  _renderContent() {
+    return (
+      <Animatable.View
+        animation={this.state.animationType}
+        duration={FADE_DURATION}
+        style={styles.body}
+        useNativeDriver={true}>
+        <View
+          style={styles.list}
+          initialListSize={20}>
+          {this._genRows()}
+        </View>
+      </Animatable.View>
+    );
+  }
 
-    _genRows() {
-        const children = [];
-        for (let ii = 0; ii < 30; ii++) {
-            children.push(
-                <Text>{'row ' + ii}</Text>
-            );
-        }
-        return children;
+  _genRows() {
+    const children = [];
+    for (let ii = 0; ii < 30; ii++) {
+      children.push(
+        <Text>{'row ' + ii}</Text>
+      );
     }
+    return children;
+  }
 
-    _renderIcon() {
-        return (
-            <SharedElementTransition
-                sharedElementId={this.props.sharedIconId}
-                style={styles.iconContainer}
-                showDuration={SHOW_DURATION}
-                hideDuration={HIDE_DURATION}
-                showInterpolation={
-                    {
-                        type: 'path',
-                        controlX1: '0.5',
-                        controlY1: '1',
-                        controlX2: '0',
-                        controlY2: '0.5',
-                        easing: 'FastOutSlowIn'
-                    }
-                }
-                hideInterpolation={
-                    {
-                        type: 'path',
-                        controlX1: '0.5',
-                        controlY1: '0',
-                        controlX2: '1',
-                        controlY2: '0.5',
-                        easing: 'FastOutSlowIn'
-                    }
-                }
-            >
-                <Image
-                    source={this.props.icon}
-                    style={styles.heroIcon}
-                    fadeDuration={0}
-                />
-            </SharedElementTransition>
-        );
-    }
+  _renderIcon() {
+    return (
+      <SharedElementTransition
+        sharedElementId={this.props.sharedIconId}
+        style={styles.iconContainer}
+        showDuration={SHOW_DURATION}
+        hideDuration={HIDE_DURATION}
+        showInterpolation={
+          {
+            type: 'path',
+            controlX1: '0.5',
+            controlY1: '1',
+            controlX2: '0',
+            controlY2: '0.5',
+            easing: 'FastOutSlowIn'
+          }
+        }
+        hideInterpolation={
+          {
+            type: 'path',
+            controlX1: '0.5',
+            controlY1: '0',
+            controlX2: '1',
+            controlY2: '0.5',
+            easing: 'FastOutSlowIn'
+          }
+        }
+      >
+        <Image
+          source={this.props.icon}
+          style={styles.heroIcon}
+          fadeDuration={0}
+        />
+      </SharedElementTransition>
+    );
+  }
 
-    render() {
-        return (
-            <ScrollView style={[styles.container]}>
-                {this._renderHeader()}
-                {this._renderContent()}
-            </ScrollView>
-        );
-    }
+  render() {
+    return (
+      <ScrollView style={[styles.container]}>
+        {this._renderHeader()}
+        {this._renderContent()}
+      </ScrollView>
+    );
+  }
 
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        backgroundColor: 'transparent'
-    },
-    header: {
-        height: 110,
-        flexDirection: 'column-reverse'
-    },
-    titleContainer: {
-        marginLeft: ICON_MARGIN + 90 + +16,
-        marginBottom: 8
-    },
-    title: {
-        fontSize: 23,
-    },
-    iconContainer: {
-        position: 'absolute',
-        bottom: -ICON_MARGIN,
-        left: ICON_MARGIN
-    },
-    heroIcon: {
-        width: 90,
-        height: 90,
-        resizeMode: 'contain'
-    },
-    body: {
-        flex: 4,
-        backgroundColor: 'white',
-    },
-    list: {
-        marginTop: 16,
-        marginHorizontal: 8
-    }
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: 'transparent'
+  },
+  header: {
+    height: 110,
+    flexDirection: 'column-reverse'
+  },
+  titleContainer: {
+    marginLeft: ICON_MARGIN + 90 + +16,
+    marginBottom: 8
+  },
+  title: {
+    fontSize: 23,
+  },
+  iconContainer: {
+    position: 'absolute',
+    bottom: -ICON_MARGIN,
+    left: ICON_MARGIN
+  },
+  heroIcon: {
+    width: 90,
+    height: 90,
+    resizeMode: 'contain'
+  },
+  body: {
+    flex: 4,
+    backgroundColor: 'white',
+  },
+  list: {
+    marginTop: 16,
+    marginHorizontal: 8
+  }
 });
 
 export default Profiles;

example/src/screens/transitions/sharedElementTransitions/Profiles/data.js

@@ -1,32 +1,32 @@
 export default heroes = [
-    {
-        title: 'Bounty Hunter',
-        icon: require('../../../../../img/heroes/bouny_hunter.png'),
-        primaryColor: '#f0cb3c',
-        titleColor: '#993825'
-    },
-    {
-        title: 'Templar Assasin',
-        icon: require('../../../../../img/heroes/templar_assasin.png'),
-        primaryColor: '#f6f6f6',
-        titleColor: 'red',
-    },
-    {
-        title: 'Oracle',
-        icon: require('../../../../../img/heroes/oracle.png'),
-        primaryColor: '#19b0b9',
-        titleColor: '#a2195b'
-    },
-    {
-        title: 'Earthspirit',
-        icon: require('../../../../../img/heroes/earthspirit.png'),
-        primaryColor: '#819c97',
-        titleColor: 'red',
-    },
-    {
-        title: 'Skywrath Mage',
-        icon: require('../../../../../img/heroes/skywrath_mage.png'),
-        primaryColor: '#dfb42e',
-        titleColor: '#1e5ea6'
-    }
+  {
+    title: 'Bounty Hunter',
+    icon: require('../../../../../img/heroes/bouny_hunter.png'),
+    primaryColor: '#f0cb3c',
+    titleColor: '#993825'
+  },
+  {
+    title: 'Templar Assasin',
+    icon: require('../../../../../img/heroes/templar_assasin.png'),
+    primaryColor: '#f6f6f6',
+    titleColor: 'red',
+  },
+  {
+    title: 'Oracle',
+    icon: require('../../../../../img/heroes/oracle.png'),
+    primaryColor: '#19b0b9',
+    titleColor: '#a2195b'
+  },
+  {
+    title: 'Earthspirit',
+    icon: require('../../../../../img/heroes/earthspirit.png'),
+    primaryColor: '#819c97',
+    titleColor: 'red',
+  },
+  {
+    title: 'Skywrath Mage',
+    icon: require('../../../../../img/heroes/skywrath_mage.png'),
+    primaryColor: '#dfb42e',
+    titleColor: '#1e5ea6'
+  }
 ];

example/src/screens/types/Drawer.js

@@ -1,25 +1,25 @@
 import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 
 class MyClass extends React.Component {
 
-    render() {
-        return (
-            <View style={styles.container}>
+  render() {
+    return (
+      <View style={styles.container}>
 
-            </View>
-        );
-    }
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        width: 300,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#ffffff',
-    },
+  container: {
+    flex: 1,
+    width: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffffff',
+  },
 });
 
 export default MyClass;

example/src/screens/types/LightBox.js

@@ -1,41 +1,41 @@
 import React from 'react';
-import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+import {StyleSheet, View, Text, Dimensions, Button} from 'react-native';
 
 class Lightbox extends React.Component {
 
-    render() {
-        return (
-            <View style={styles.container}>
-                <View style={{ flex: 8 }}>
-                    <Text style={styles.title}>{this.props.title}</Text>
-                    <Text style={styles.content}>{this.props.content}</Text>
-                </View>
-                <View style={{ flex: 2 }}>
-                    <Button
-                        title={'Close'}
-                        onPress={() => this.props.onClose()}
-                    />
-                </View>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={{flex: 8}}>
+          <Text style={styles.title}>{this.props.title}</Text>
+          <Text style={styles.content}>{this.props.content}</Text>
+        </View>
+        <View style={{flex: 2}}>
+          <Button
+            title={'Close'}
+            onPress={() => this.props.onClose()}
+          />
+        </View>
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        width: Dimensions.get('window').width * 0.7,
-        height: Dimensions.get('window').height * 0.3,
-        backgroundColor: '#ffffff',
-        borderRadius: 5,
-        padding: 16,
-    },
-    title: {
-        fontSize: 17,
-        fontWeight: '700',
-    },
-    content: {
-      marginTop: 8,
-    },
+  container: {
+    width: Dimensions.get('window').width * 0.7,
+    height: Dimensions.get('window').height * 0.3,
+    backgroundColor: '#ffffff',
+    borderRadius: 5,
+    padding: 16,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '700',
+  },
+  content: {
+    marginTop: 8,
+  },
 });
 
 export default Lightbox;

example/src/screens/types/Modal.js

@@ -1,24 +1,24 @@
 import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 
 class Modal extends React.Component {
 
-    render() {
-        return (
-            <View style={styles.container}>
-                <Text>Modal Screen</Text>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Modal Screen</Text>
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#ffffff',
-    },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffffff',
+  },
 });
 
 export default Modal;

example/src/screens/types/Notification.js

@@ -1,33 +1,33 @@
 import React from 'react';
-import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+import {StyleSheet, View, Text, Dimensions, Button} from 'react-native';
 
 class Notification extends React.Component {
 
-    render() {
-        return (
-            <View style={styles.container}>
-                <Text style={styles.title}>In-App Notification</Text>
-                <Text style={styles.content}>You have 10 unread notifications!</Text>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>In-App Notification</Text>
+        <Text style={styles.content}>You have 10 unread notifications!</Text>
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        height: 100,
-        backgroundColor: '#ff505c',
-        padding: 16,
-        margin: 10,
-    },
-    title: {
-        fontSize: 18,
-        textAlign: 'center',
-    },
-    content: {
-        textAlign: 'center',
-        marginTop: 10,
-    },
+  container: {
+    height: 100,
+    backgroundColor: '#ff505c',
+    padding: 16,
+    margin: 10,
+  },
+  title: {
+    fontSize: 18,
+    textAlign: 'center',
+  },
+  content: {
+    textAlign: 'center',
+    marginTop: 10,
+  },
 });
 
 export default Notification;

example/src/screens/types/Push.js

@@ -1,24 +1,24 @@
 import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 
 class Push extends React.Component {
 
-    render() {
-        return (
-            <View style={styles.container}>
-                <Text>Pushed Screen</Text>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Pushed Screen</Text>
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#ffffff',
-    },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffffff',
+  },
 });
 
 export default Push;

example/src/screens/types/TopTabs.js

@@ -1,19 +1,19 @@
 import React from 'react';
-import { PixelRatio } from 'react-native';
+import {PixelRatio} from 'react-native';
 
 class TopTabs extends React.Component {
-    static navigatorStyle = {
-        topTabTextColor: '#ffffff',
-        selectedTopTabTextColor: '#ff505c',
+  static navigatorStyle = {
+    topTabTextColor: '#ffffff',
+    selectedTopTabTextColor: '#ff505c',
 
-        // Icons
-        topTabIconColor: '#ffffff',
-        selectedTopTabIconColor: '#ff505c',
+    // Icons
+    topTabIconColor: '#ffffff',
+    selectedTopTabIconColor: '#ff505c',
 
-        // Tab indicator
-        selectedTopTabIndicatorHeight: PixelRatio.get() * 2,
-        selectedTopTabIndicatorColor: '#ff505c',
-    };
+    // Tab indicator
+    selectedTopTabIndicatorHeight: PixelRatio.get() * 2,
+    selectedTopTabIndicatorColor: '#ff505c',
+  };
 }
 
 export default TopTabs;

example/src/screens/types/tabs/TabOne.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+import {StyleSheet, View, Text, Dimensions, Button} from 'react-native';
 
 class TabOne extends React.Component {
 
-    render() {
-        return (
-            <View>
-                <Text>Tab One</Text>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View>
+        <Text>Tab One</Text>
+      </View>
+    );
+  }
 }
 
 export default TabOne;

example/src/screens/types/tabs/TabTwo.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+import {StyleSheet, View, Text, Dimensions, Button} from 'react-native';
 
 class TabOne extends React.Component {
 
-    render() {
-        return (
-            <View>
-                <Text>Tab Two</Text>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View>
+        <Text>Tab Two</Text>
+      </View>
+    );
+  }
 }
 
 export default TabOne;