diff --git a/example/src/app.js b/example/src/app.js index 08883704a17..027d78a4238 100644 --- a/example/src/app.js +++ b/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' } } }); diff --git a/example/src/screens/FirstTabScreen.js b/example/src/module_1/FirstTabScreen.js similarity index 83% rename from example/src/screens/FirstTabScreen.js rename to example/src/module_1/FirstTabScreen.js index 88ed3b73350..8e9f024f2d5 100644 --- a/example/src/screens/FirstTabScreen.js +++ b/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); diff --git a/example/src/screens/ModalScreen.js b/example/src/module_1/ModalScreen.js similarity index 78% rename from example/src/screens/ModalScreen.js rename to example/src/module_1/ModalScreen.js index fde883d432d..6d7709521e5 100644 --- a/example/src/screens/ModalScreen.js +++ b/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); +}); \ No newline at end of file diff --git a/example/src/screens/SideMenu.js b/example/src/module_1/SideMenu.js similarity index 52% rename from example/src/screens/SideMenu.js rename to example/src/module_1/SideMenu.js index 76de10bcc79..3236ad65819 100644 --- a/example/src/screens/SideMenu.js +++ b/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 ( - Side Menu - ); - } } 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); diff --git a/example/src/screens/StyledScreen.js b/example/src/module_1/StyledScreen.js similarity index 82% rename from example/src/screens/StyledScreen.js rename to example/src/module_1/StyledScreen.js index e3735b397f1..00a7759af49 100644 --- a/example/src/screens/StyledScreen.js +++ b/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); +}); \ No newline at end of file diff --git a/example/src/module_1/index.js b/example/src/module_1/index.js new file mode 100644 index 00000000000..f2cf9dac1c0 --- /dev/null +++ b/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); + +} \ No newline at end of file diff --git a/example/src/screens/PushedScreen.js b/example/src/module_2/PushedScreen.js similarity index 78% rename from example/src/screens/PushedScreen.js rename to example/src/module_2/PushedScreen.js index 9fa6fa4648d..29e6129e656 100644 --- a/example/src/screens/PushedScreen.js +++ b/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); +}); \ No newline at end of file diff --git a/example/src/screens/SecondTabScreen.js b/example/src/module_2/SecondTabScreen.js similarity index 88% rename from example/src/screens/SecondTabScreen.js rename to example/src/module_2/SecondTabScreen.js index 05e1cd52ceb..37a46ad5857 100644 --- a/example/src/screens/SecondTabScreen.js +++ b/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); +}); \ No newline at end of file diff --git a/example/src/screens/ThirdTabScreen.js b/example/src/module_2/ThirdTabScreen.js similarity index 73% rename from example/src/screens/ThirdTabScreen.js rename to example/src/module_2/ThirdTabScreen.js index 17db9557fd3..8681712c671 100644 --- a/example/src/screens/ThirdTabScreen.js +++ b/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); diff --git a/example/src/module_2/index.js b/example/src/module_2/index.js new file mode 100644 index 00000000000..2f536217dc2 --- /dev/null +++ b/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); + +} +