Simplify navigation component registration (#116)

* Add registerNavigationComponent

* Fix Android onboarding styles

* Add registerNavigationComponent description

template/src/modules/onboarding/Onboarding.android.tsx

@@ -74,8 +74,8 @@ export const Onboarding: NavigationFunctionComponent = () => {
           <View style={styles.illustration}>
             <IconPlatform
               androidName={item.icon}
-              size={moderateScale(120)}
-              color={PlatformColor(PlatformColorsAndroid.primary)}
+              size={iconSize}
+              color={iconColor}
             />
           </View>
           <View style={styles.itemTextContainer}>
@@ -97,6 +97,7 @@ export const Onboarding: NavigationFunctionComponent = () => {
   return (
     <SafeAreaView style={CommonStyles.flex1}>
       <Carousel
+        style={CommonStyles.flex1}
         data={carouselData}
         renderItem={carouselItem}
         onSnapToItem={setActiveSlide}
@@ -122,6 +123,9 @@ export const Onboarding: NavigationFunctionComponent = () => {
   );
 };
 
+const iconSize = moderateScale(120);
+const iconColor = PlatformColor(PlatformColorsAndroid.primary);
+
 const initialStyles = StyleSheet.create({
   itemContainer: {
     flex: 1,

template/src/navigation/helpers/navigationActions.ts

@@ -1,5 +1,31 @@
-import {Navigation, Options} from 'react-native-navigation';
+import {
+  Navigation,
+  NavigationFunctionComponent,
+  Options,
+} from 'react-native-navigation';
 import {INavigationPage} from '../../types';
+import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
+import {reduxProvider} from '../../core/store/store';
+
+export function registerNavigationComponent(
+  page: INavigationPage,
+  Component: NavigationFunctionComponent<any>,
+  reduxEnabled?: boolean,
+) {
+  if (reduxEnabled) {
+    return Navigation.registerComponent(
+      page.name,
+      () => gestureHandlerRootHOC(reduxProvider(Component)),
+      () => Component,
+    );
+  } else {
+    return Navigation.registerComponent(
+      page.name,
+      () => gestureHandlerRootHOC<any>(Component),
+      () => Component,
+    );
+  }
+}
 
 export function navigateToPage<T>(
   page: INavigationPage,

template/src/navigation/navigation.ts

@@ -1,9 +1,7 @@
 import {Navigation} from 'react-native-navigation';
 import {Pages} from './pages';
 import {Main} from '../modules/main/Main';
-import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {Splash} from '../modules/splash/Splash';
-import {reduxProvider} from '../core/store/store';
 import {Platform} from 'react-native';
 import {localization} from '../common/localization/localization';
 import {PlatformColorsAndroid, PlatformColorsIOS} from '../core/theme/colors';
@@ -15,6 +13,8 @@ import {Onboarding} from '../modules/onboarding/Onboarding';
 import {Search} from '../modules/search/Search';
 import {Settings} from '../modules/settings/Settings';
 import {StorybookUIRoot} from '../../.storybook/Storybook';
+import {registerNavigationComponent} from './helpers/navigationActions';
+
 export function setDefaultOptions() {
   Navigation.setDefaultOptions({
     animations: {
@@ -124,17 +124,13 @@ export function setDefaultOptions() {
 
 export function registerComponents() {
   if (__DEV__) {
-    Navigation.registerComponent(Pages.storybook.name, () => StorybookUIRoot);
+    registerNavigationComponent(Pages.storybook, StorybookUIRoot);
   }
-  Navigation.registerComponent(
-    Pages.splash.name,
-    () => gestureHandlerRootHOC(reduxProvider(Splash)),
-    () => Splash,
-  );
-  Navigation.registerComponent(Pages.onboarding.name, () => Onboarding);
-  Navigation.registerComponent(Pages.main.name, () => Main);
-  Navigation.registerComponent(Pages.search.name, () => Search);
-  Navigation.registerComponent(Pages.settings.name, () => Settings);
-  Navigation.registerComponent(Pages.toast.name, () => ToastOverlay);
-  Navigation.registerComponent(Pages.datePicker.name, () => DatePickerOverlay);
+  registerNavigationComponent(Pages.splash, Splash, true);
+  registerNavigationComponent(Pages.onboarding, Onboarding);
+  registerNavigationComponent(Pages.main, Main);
+  registerNavigationComponent(Pages.search, Search);
+  registerNavigationComponent(Pages.settings, Settings);
+  registerNavigationComponent(Pages.toast, ToastOverlay);
+  registerNavigationComponent(Pages.datePicker, DatePickerOverlay);
 }

website/docs/navigation/pages.md

@@ -50,7 +50,9 @@ export const Pages = {
 
 Pages are defined as the object which contains page names as parameters which are objects with `name` and `id`.
 
-Here besides pages itself you add modals, overlays and other components which will be registered in navigation (i.e. `Navigation.registerComponent`).
+Here besides pages itself you add modals, overlays and other components which will be registered in navigation (i.e. `registerNavigationComponent`).
+
+`registerNavigationComponent` - shorthand function to simplify registration of a page.
 
 Such examples are `toast` and `datePicker` properties of `Pages`.
 
@@ -64,37 +66,29 @@ All the pages are being registered in `src/navigation/navigation.ts`'s `register
 
 ```typescript
 export function registerComponents() {
-  if (__DEV__) {
-    Navigation.registerComponent(Pages.storybook.name, () => StorybookUIRoot);
-  }
-  Navigation.registerComponent(
-    Pages.splash.name,
-    () => gestureHandlerRootHOC(reduxProvider(Splash)),
-    () => Splash,
-  );
-  Navigation.registerComponent(Pages.onboarding.name, () => Onboarding);
-  Navigation.registerComponent(Pages.main.name, () => Main);
-  Navigation.registerComponent(Pages.search.name, () => Search);
-  Navigation.registerComponent(Pages.settings.name, () => Settings);
-  Navigation.registerComponent(Pages.toast.name, () => ToastOverlay);
-  Navigation.registerComponent(Pages.datePicker.name, () => DatePickerOverlay);
+    if (__DEV__) {
+        registerNavigationComponent(Pages.storybook, StorybookUIRoot);
+    }
+    registerNavigationComponent(Pages.splash, Splash, true);
+    registerNavigationComponent(Pages.onboarding, Onboarding);
+    registerNavigationComponent(Pages.main, Main);
+    registerNavigationComponent(Pages.search, Search);
+    registerNavigationComponent(Pages.settings, Settings);
+    registerNavigationComponent(Pages.toast, ToastOverlay);
+    registerNavigationComponent(Pages.datePicker, DatePickerOverlay);
 }
 ```
 
 If your page or component is going to be a simple component which won't be communication with `redux` then you can simply register it the next way:
 
 ```typescript
-  Navigation.registerComponent(Pages.yourPage.name, () => YourPage);
+  registerNavigationComponent(Pages.yourPage, YourPage);
 ```
 
-Otherwise, it should be wrapped with `gestureHandlerRootHOC` and `reduxProvider` like so:
+Otherwise, add a third parameter with `true`:
 
 ```typescript
-  Navigation.registerComponent(
-    Pages.splash.name,
-    () => gestureHandlerRootHOC(reduxProvider(Splash)),
-    () => Splash,
-  );
+  registerNavigationComponent(Pages.yourPage, YourPage, true);
 ```
 
 The communication with `redux` and usage will be explained later.