Merge pull request #17 from kanzitelli/6.1.0

6.1.0

README.md

@@ -6,6 +6,7 @@
 - [📖 What's inside](#whats-inside)
 - [🧙‍♂️ Enhancements](#enhancements)
 - [⚠️ Known issues (warnings)](#known-issues-warnings)
+- [⭕️ Limitations](#limitations)
 
 ##  Motivation
 1. I love [React Native](https://reactnative.dev/) 💚
@@ -23,7 +24,7 @@ Big love and gratitude to all people who are working on React Native, Expo and R
 git clone https://github.com/kanzitelli/expo-rnn-starter.git <new-app> && cd <new-app>
 ```
 
-2. Remove `.git` file (if are not going to contribute)
+2. Remove `.git` file (if are not planning to contribute)
 ```bash
 rm -rf .git
 ```
@@ -61,7 +62,7 @@ yarn android
 There are still some things I would like to add to the starter:
 - 🔳 Dark Mode support.
 - ⬜️ Localization via [i18next](https://github.com/i18next/i18next/).
-- ⬜️ [Expo Notifications](https://docs.expo.io/versions/v39.0.0/sdk/notifications/).
+- ⬜️ Notifications (remote).
 
 Feel free to open an issue for suggestions.
 
@@ -71,6 +72,10 @@ Feel free to open an issue for suggestions.
 
 Feel free to open an issue for any other warning or problems.
 
+## Limitations
+- Apps bootstrapped from this starter won't be able to be run on web as Expo apps do. Theoretically, it is possible to create some sort of an adapter between `react-navigation` and `react-native-navigation`. Maybe there will be other issues, but would be cool to have this feature.
+- Apps bootstrapped from this starter won't be available through Expo app for iOS and Android as of differences in navigation approach. Theoretically, it is possible to create an app like Expo that will include `react-native-navigation` and somehow download needed bundles. Needs more research.
+
 ## License
 
 This project is [MIT licensed](/LICENSE.md)

index.js

@@ -1,8 +1,12 @@
 import 'expo-asset';
+import 'react-native-gesture-handler';
 import { Navigation } from 'react-native-navigation';
+import { registerRootComponent } from 'expo';
 
 import { startApp } from './src/App';
+import ExpoApp from './src/screens/ExpoAppScreen';
 
+registerRootComponent(ExpoApp); // Without this line, it was causing a crash on iOS (14?) in release build
 Navigation.events().registerAppLaunchedListener(() => {
     startApp();
 });

ios/Supporting/Expo.plist

@@ -1,7 +1,16 @@
-{
-	EXUpdatesURL = "https://exp.host/@my-expo-username/my-app-slug";
-	EXUpdatesSDKVersion = "39.0.0";
-	EXUpdatesEnabled = "NO";
-	EXUpdatesCheckOnLaunch = "ALWAYS";
-	EXUpdatesLaunchWaitMs = 0;
-}
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>EXUpdatesCheckOnLaunch</key>
+	<string>ALWAYS</string>
+	<key>EXUpdatesEnabled</key>
+	<false/>
+	<key>EXUpdatesLaunchWaitMs</key>
+	<integer>0</integer>
+	<key>EXUpdatesSDKVersion</key>
+	<string>39.0.0</string>
+	<key>EXUpdatesURL</key>
+	<string>https://exp.host/@my-expo-username/my-app-slug</string>
+</dict>
+</plist>

src/components/Button.tsx

@@ -25,7 +25,7 @@ export const ButtonTitle: React.FC<ButtonTitleProps> = ({
   centered = false,
   onPress,
 }) => {
-  const styles = useStyles(_styles);
+  const { styles } = useStyles(_styles);
 
   return (
     <>
@@ -42,7 +42,7 @@ export const ButtonIcon: React.FC<ButtonIconProps> = ({
   icon,
   onPress,
 }) => {
-  const styles = useStyles(_styles);
+  const { styles } = useStyles(_styles);
 
   return (
     <>

src/screens/CounterScreen.tsx

@@ -19,7 +19,7 @@ const CounterScreen: NavigationFunctionComponent = observer(({
   componentId,
 }) => {
   const { counter } = useStores();
-  const styles = useStyles(_styles);
+  const { styles } = useStyles(_styles);
 
   useNavigationButtonPress(counter.decrement, componentId, Constants.CounterScreen.decButtonId);
   useNavigationButtonPress(counter.increment, componentId, Constants.CounterScreen.incButtonId);

src/screens/ExpoAppScreen.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import useStyles from '../utils/useStyles';
+
+// This component is used to pass it to registerRootComponent(...) for Expo SDK
+// Otherwise, it was causing a crash on iOS (14?) in release build
+
+const ExpoApp: React.FC = () => {
+  const { styles } = useStyles(_styles);
+
+  return <View style={styles.container} />;
+}
+
+const _styles = (theme: ThemeType) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.bg,
+  }
+});
+
+export default ExpoApp;

src/screens/ExpoScreen.tsx

@@ -18,7 +18,7 @@ import { useStores } from '../stores';
 import { useServices } from '../services';
 import Reanimated2 from '../components/Reanimated2';
 import { ButtonTitle } from '../components/Button';
-import useStyles, { ThemedStylesFuncType } from '../utils/useStyles';
+import useStyles from '../utils/useStyles';
 import { ScrollView } from 'react-native-gesture-handler';
 
 
@@ -27,7 +27,7 @@ const ExpoScreen: NavigationFunctionComponent = observer(({
 }) => {
   const { ui } = useStores();
   const { navigation } = useServices();
-  const styles = useStyles(_styles);
+  const { styles } = useStyles(_styles);
 
   useNavigationComponentDidAppear(() => {
     getNetworkType();

src/screens/example-screen.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+    SafeAreaView,
+    Text,
+    View,
+    StyleSheet,
+} from 'react-native';
+import { observer } from 'mobx-react';
+import { NavigationFunctionComponent } from 'react-native-navigation';
+
+import { useStores } from '../stores';
+import { useServices } from '../services';
+import Constants from '../utils/constants';
+import useStyles from '../utils/useStyles';
+
+// This is an example that can be used to bootstrap your new screen
+// Once you add a new screen, don't forget to go through following steps:
+//   1. Open src/utils/constants.ts and add a new screen's name to ScreenNames, and ScreenTitle (if going to use)
+//   2. Open stc/App.tsx and register a new screen
+
+const ExampleScreen: NavigationFunctionComponent = observer(({
+  componentId,
+}) => {
+  const { } = useStores();
+  const { } = useServices();
+  const { styles } = useStyles(_styles);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.counterContainer}>
+        <Text style={styles.text}>
+          { 'Example' }
+        </Text>
+      </View>
+    </SafeAreaView>
+  );
+});
+
+const _styles = (theme: ThemeType) => StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.bg,
+  },
+  counterContainer: {
+    padding: theme.sizes.s,
+    flexDirection: 'row',
+    width: '80%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 64,
+    margin: theme.sizes.s,
+    textAlign: 'center',
+    color: theme.colors.text,
+  },
+});
+
+ExampleScreen.options = props => ({
+  topBar: {
+    title: {
+      text: Constants.ScreenTitles.ExampleScreen,
+    },
+  },
+});
+
+export default ExampleScreen;

src/services/index.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
 import NavigationService from './navigation';
-// import DarkmodeService from './darkmode';
 
 export const services = {
   navigation: NavigationService,
-  // darkmode: DarkmodeService, // not really needed
 };
 
 const servicesContext = React.createContext(services);
@@ -24,5 +22,4 @@ export const useServices = () => React.useContext(servicesContext);
 // 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/stores/uiStore.ts

@@ -1,22 +1,14 @@
 import { observable, action, makeObservable } from 'mobx';
-import { persist } from 'mobx-persist';
-
-import { generateTheme } from '../utils/useStyles';
 
 class UIStore implements IStore {
   STORAGE_ID = 'UIStore';
   constructor() { makeObservable(this) }
 
   @observable networkType: string | undefined = '';
-  @observable theme = generateTheme(); // current theme, set in services.darkmode
   @observable componentId: string = ''; // current component id
 
   @action setNetworkType = (value: string | undefined) => this.networkType = value;
   @action setComponentId = (value: string) => this.componentId = value;
-
-  @action toggleThemeTo = (theme: ThemeType) => {
-    this.theme = theme;
-  }
 }
 
 export default new UIStore();

src/utils/constants.ts

@@ -1,7 +1,11 @@
+const prefix = 'rnn_starter';
+
 class Contants {
   ScreenNames = {
-    CounterScreen: 'rnn_starter.CounterScreen',
-    ExpoScreen: 'rnn_starter.ExpoScreen',
+    CounterScreen: `${prefix}.CounterScreen`,
+    ExpoScreen: `${prefix}.ExpoScreen`,
+
+    ExampleScreen: `${prefix}.ExampleScreen`,
   }
 
   BottomTabsTitles = {
@@ -12,6 +16,8 @@ class Contants {
   ScreenTitles = {
     CounterScreen: 'Counter',
     ExpoScreen: 'Expo',
+
+    ExampleScreen: 'Example',
   }
 
   CounterScreen = {

src/utils/useStyles.ts

@@ -44,11 +44,13 @@ export const setOptionsForUseStyles = (_options: UseStylesOptionsType) => {
 
 function useStyles<T>(themedStylesFunc: ThemedStylesFuncType<T>) {
   const [themeName, setThemeName] = useState<ThemeNameType>(generateThemeName()); // here we should ger the mode
-  let themedStyles = themedStylesFunc(generateTheme(themeName));
+  const theme = generateTheme(themeName);
+  let themedStyles = themedStylesFunc(theme);
 
   useEffect(() => {
     const onModeChange = (_cs: any) => {
-      const cs = _cs.colorScheme as ThemeNameType;
+      // const cs = _cs.colorScheme as ThemeNameType; // somehow _cs.colorScheme gives wrong value when app goes to background mode
+      const cs = Appearance.getColorScheme() as ThemeNameType;
 
       setThemeName(cs);
     };
@@ -86,7 +88,10 @@ function useStyles<T>(themedStylesFunc: ThemedStylesFuncType<T>) {
     }
   }
 
-  return themedStyles;
+  return {
+    styles: themedStyles,
+    theme,
+  };
 }
 
 const normalize = (