services

src/services/darkmode.ts

@@ -0,0 +1,20 @@
+import { Appearance } from 'react-native';
+
+import { stores } from '../stores';
+import { generateTheme } from '../utils/useStyles';
+
+class DarkModeService implements IService {
+  init = async () => {
+    await this.setListener();
+  }
+
+  private setListener = async () => {
+    Appearance.addChangeListener(ap => {
+      const cs = ap.colorScheme as ThemeNameType;
+
+      stores.ui.toggleThemeTo(generateTheme(cs));
+    })
+  }
+}
+
+export default new DarkModeService();

src/services/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import NavigationService from './navigation';
+import DarkmodeService from './darkmode';
+
+export const services = {
+  navigation: NavigationService,
+  // darkmode: DarkmodeService,
+};
+
+const servicesContext = React.createContext(services);
+
+export const withServicesProvider = (C: React.FC) => (props: any) => {
+  return (
+    <servicesContext.Provider value={services}>
+      <C {...props} />
+    </servicesContext.Provider>
+  );
+};
+
+export const useServices = () => React.useContext(servicesContext);
+
+// one method to init all services, you should add it manually
+// you can use services for having one for metrics or handling navigation actions
+export const initServices = async () => {
+  await services.navigation.init();
+  // await services.darkmode.init();
+};

src/services/navigation.ts

@@ -0,0 +1,60 @@
+import { Navigation } from 'react-native-navigation';
+import Constants from '../utils/constants';
+import { stores } from '../stores';
+
+class NavigationService implements IService {
+  init = async () => {
+    await this.setUpComponentIdListener();
+    await this.setDefaultOptions();
+  }
+
+  dismissModal = (cId: string) => {
+    Navigation.dismissModal(cId);
+  }
+
+  dismissAllModals = () => {
+    Navigation.dismissAllModals();
+  }
+
+  pushExpo = (cId: string) => {
+    this.push(cId, Constants.ScreenNames.ExpoScreen);
+  }
+
+  showExpo = () => {
+    this.show(Constants.ScreenNames.ExpoScreen);
+  }
+
+  private push = (cId: string, cName: string) => {
+    Navigation.push(cId, {
+      component:{name: cName}
+    })
+  }
+
+  private show = (cName: string) => {
+    Navigation.showModal({
+      stack: {
+        children: [{component:{name: cName}}]
+      }
+    });
+  }
+
+  // Listeners
+  private setUpComponentIdListener = async () => {
+    Navigation.events().registerComponentDidAppearListener(async e => {
+      stores.ui.componentId = e.componentId;
+    });
+  }
+
+  private setDefaultOptions = async () => {
+    Navigation.setDefaultOptions({
+      layout: {
+        orientation: ['portrait'],
+      },
+      bottomTabs: {
+        titleDisplayMode: 'alwaysShow',
+      }
+    });
+  }
+}
+
+export default new NavigationService();