propose cleaner, more familiar usage patterns

example/src/app.js

@@ -1,29 +1,31 @@
 import { Navigation } from 'react-native-navigation';
 
-import './screens/FirstTabScreen';
-import './screens/SecondTabScreen';
-import './screens/ThirdTabScreen';
-import './screens/SideMenu';
+//import and call the default function from each module
+//The default function of a module should register all the pushable screens
+import register1 from './module_1';
+import register2 from './module_2';
+register1();
+register2();
 
 Navigation.startTabBasedApp({
   tabs: [
     {
       label: 'One',
-      screen: 'example.FirstTabScreen',
+      screen: 'module_1.FirstTabScreen',
       icon: require('../img/one.png'),
       selectedIcon: require('../img/one_selected.png'),
       title: 'Screen One'
     },
     {
       label: 'Two',
-      screen: 'example.SecondTabScreen',
+      screen: 'module_2.SecondTabScreen',
       icon: require('../img/two.png'),
       selectedIcon: require('../img/two_selected.png'),
       title: 'Screen Two'
     },
     {
       label: 'Three',
-      screen: 'example.ThirdTabScreen',
+      screen: 'module_2.ThirdTabScreen',
       icon: require('../img/three.png'),
       selectedIcon: require('../img/three_selected.png'),
       title: 'Screen Three',
@@ -37,7 +39,7 @@ Navigation.startTabBasedApp({
   ],
   drawer: {
     left: {
-      screen: 'example.SideMenu'
+      screen: 'module_1.SideMenu'
     }
   }
 });

example/src/screens/FirstTabScreen.js → example/src/module_1/FirstTabScreen.js

@@ -10,13 +10,8 @@ import React, {
 // important imports, the magic is here
 import { Navigation, Screen } from 'react-native-navigation';
 
-// need to import every screen we push
-import './PushedScreen';
-import './StyledScreen';
-import './ModalScreen';
-
 // instead of React.Component, we extend Screen (imported above)
-class FirstTabScreen extends Screen {
+export default class FirstTabScreen extends Screen {
   static navigatorButtons = {
     leftButtons: [{
       icon: require('../../img/navicon_menu.png'),
@@ -72,19 +67,19 @@ class FirstTabScreen extends Screen {
   onPushPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.PushedScreen"
+      screen: "module_2.PushedScreen"
     });
   }
   onPushStyledPress() {
     this.navigator.push({
       title: "Styled",
-      screen: "example.StyledScreen"
+      screen: "module_1.StyledScreen"
     });
   }
   onModalPress() {
     this.navigator.showModal({
       title: "Modal",
-      screen: "example.ModalScreen"
+      screen: "module_1.ModalScreen"
     });
   }
 }
@@ -98,6 +93,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.FirstTabScreen', () => FirstTabScreen);

example/src/screens/ModalScreen.js → example/src/module_1/ModalScreen.js

@@ -7,14 +7,10 @@ import React, {
 } from 'react-native';
 
 // important imports, the magic is here
-import { Navigation, Screen } from 'react-native-navigation';
-
-// need to import every screen we push
-import './PushedScreen';
-import './StyledScreen';
+import { Screen } from 'react-native-navigation';
 
 // instead of React.Component, we extend Screen (imported above)
-class ModalScreen extends Screen {
+export default class ModalScreen extends Screen {
   static navigatorButtons = {
     leftButtons: [{
       title: 'Close',
@@ -51,13 +47,13 @@ class ModalScreen extends Screen {
   onPushPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.PushedScreen"
+      screen: "module_2.PushedScreen"
     });
   }
   onPushStyledPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.StyledScreen"
+      screen: "module_1.StyledScreen"
     });
   }
   onClosePress() {
@@ -73,7 +69,4 @@ const styles = StyleSheet.create({
     marginTop:10,
     color: 'blue'
   }
-});
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.ModalScreen', () => ModalScreen);
+});

example/src/screens/SideMenu.js → example/src/module_1/SideMenu.js

@@ -7,23 +7,14 @@ import React, {
   AlertIOS
 } from 'react-native';
 
-// important imports, the magic is here
-import { Navigation, Screen } from 'react-native-navigation';
-
-// instead of React.Component, we extend Screen (imported above)
-class SideMenu extends Screen {
-  constructor(props) {
-    super(props);
-  }
-  render() {
+// Note that it's not necessary to extend Navigation.Screen for all pushed screens
+// It's only necessary if you want to access the navigator from inside the screen
+export default function() {
     return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-
         <Text>Side Menu</Text>
-
       </View>
     );
-  }
 }
 
 const styles = StyleSheet.create({
@@ -35,6 +26,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.SideMenu', () => SideMenu);

example/src/screens/StyledScreen.js → example/src/module_1/StyledScreen.js

@@ -9,14 +9,10 @@ import React, {
 } from 'react-native';
 
 // important imports, the magic is here
-import { Navigation, Screen } from 'react-native-navigation';
-
-// need to import every screen we push
-import './PushedScreen';
-import './StyledScreen';
+import { Screen } from 'react-native-navigation';
 
 // instead of React.Component, we extend Screen (imported above)
-class StyledScreen extends Screen {
+export default class StyledScreen extends Screen {
   static navigatorStyle = {
     drawUnderNavBar: true,
     drawUnderTabBar: true,
@@ -65,13 +61,13 @@ class StyledScreen extends Screen {
   onPushPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.PushedScreen"
+      screen: "module_2.PushedScreen"
     });
   }
   onPushStyledPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.StyledScreen"
+      screen: "module_1.StyledScreen"
     });
   }
   onPopPress() {
@@ -87,7 +83,4 @@ const styles = StyleSheet.create({
     marginTop:10,
     color: 'blue'
   }
-});
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.StyledScreen', () => StyledScreen);
+});

example/src/module_1/index.js

@@ -0,0 +1,14 @@
+// need to import and register every screen we want to be pushable
+import StyledScreen from './StyledScreen';
+import ModalScreen from './ModalScreen';
+import FirstTabScreen from './FirstTabScreen';
+import SideMenu from './SideMenu';
+
+//the names must be unique across the entire application. Scope them to the module/package to avoid conflicts
+export default function() {
+  Navigation.registerScreen('module_1.ModalScreen', () => ModalScreen);
+  Navigation.registerScreen('module_1.StyledScreen', () => StyledScreen);
+  Navigation.registerScreen('module_1.FirstTabScreen', () => FirstTabScreen);
+  Navigation.registerScreen('module_1.SideMenu', () => SideMenu);
+
+}

example/src/screens/PushedScreen.js → example/src/module_2/PushedScreen.js

@@ -7,14 +7,10 @@ import React, {
 } from 'react-native';
 
 // important imports, the magic is here
-import { Navigation, Screen } from 'react-native-navigation';
-
-// need to import every screen we push
-import './PushedScreen';
-import './StyledScreen';
+import { Screen } from 'react-native-navigation';
 
 // instead of React.Component, we extend Screen (imported above)
-class PushedScreen extends Screen {
+export default class PushedScreen extends Screen {
   constructor(props) {
     super(props);
   }
@@ -44,13 +40,13 @@ class PushedScreen extends Screen {
   onPushPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.PushedScreen"
+      screen: "module_2.PushedScreen"
     });
   }
   onPushStyledPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.StyledScreen"
+      screen: "module_1.StyledScreen"
     });
   }
   onPopPress() {
@@ -69,7 +65,4 @@ const styles = StyleSheet.create({
     marginTop:10,
     color: 'blue'
   }
-});
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.PushedScreen', () => PushedScreen);
+});

example/src/screens/SecondTabScreen.js → example/src/module_2/SecondTabScreen.js

@@ -8,10 +8,10 @@ import React, {
 } from 'react-native';
 
 // important imports, the magic is here
-import { Navigation, Screen } from 'react-native-navigation';
+import { Screen } from 'react-native-navigation';
 
 // instead of React.Component, we extend Screen (imported above)
-class SecondTabScreen extends Screen {
+export default class SecondTabScreen extends Screen {
   constructor(props) {
     super(props);
     this.buttonsCounter = 0;
@@ -85,7 +85,4 @@ const styles = StyleSheet.create({
     marginTop:10,
     color: 'blue'
   }
-});
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.SecondTabScreen', () => SecondTabScreen);
+});

example/src/screens/ThirdTabScreen.js → example/src/module_2/ThirdTabScreen.js

@@ -7,15 +7,10 @@ import React, {
 } from 'react-native';
 
 // important imports, the magic is here
-import { Navigation, Screen } from 'react-native-navigation';
-
-// need to import every screen we push
-import './PushedScreen';
-import './StyledScreen';
-import './ModalScreen';
+import { Screen } from 'react-native-navigation';
 
 // instead of React.Component, we extend Screen (imported above)
-class ThirdTabScreen extends Screen {
+export default class ThirdTabScreen extends Screen {
   constructor(props) {
     super(props);
   }
@@ -41,19 +36,19 @@ class ThirdTabScreen extends Screen {
   onPushPress() {
     this.navigator.push({
       title: "More",
-      screen: "example.PushedScreen"
+      screen: "module_2.PushedScreen"
     });
   }
   onPushStyledPress() {
     this.navigator.push({
       title: "Styled",
-      screen: "example.StyledScreen"
+      screen: "module_1.StyledScreen"
     });
   }
   onModalPress() {
     this.navigator.showModal({
       title: "Modal",
-      screen: "example.ModalScreen"
+      screen: "module_1.ModalScreen"
     });
   }
 }
@@ -67,6 +62,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.ThirdTabScreen', () => ThirdTabScreen);

example/src/module_2/index.js

@@ -0,0 +1,14 @@
+// need to import and register every screen we want to be pushable
+import PushedScreen from './PushedScreen';
+import SecondTabScreen from './SecondTabScreen';
+import ThirdTabScreen from './ThirdTabScreen';
+
+
+export default function () {
+  //the names must be unique across the entire application. Scope them to the module/package to avoid conflicts
+  Navigation.registerScreen('module_2.PushedScreen', () => PushedScreen);
+  Navigation.registerScreen('module_2.ThirdTabScreen', () => ThirdTabScreen);
+  Navigation.registerScreen('module_2.SecondTabScreen', () => SecondTabScreen);
+
+}
+