Merge pull request #16 from kanzitelli/simplified-better-version-of-s…

…tarter Simplified better version of starter
kanzitelli · Oct 6, 2020 · f36e6b9 · f36e6b9
2 parents ae57f1c + 40a4d55
commit f36e6b9
Show file tree

Hide file tree

Showing 63 changed files with 1,078 additions and 1,692 deletions.
diff --git a/EXPO_CONFIGURATION.md b/EXPO_CONFIGURATION.md
@@ -0,0 +1,21 @@
+## 🎛 Expo Configuration
+#### Prerequisites
+1. Get familiar with [Expo](https://expo.io) and [their documentation](https://docs.expo.io/) if you haven't yet.
+2. Create new account at [Expo.io](https://expo.io/signup)
+3. Install [expo-cli](https://docs.expo.io/workflow/expo-cli/).
+4. Login using expo-cli in the terminal.
+
+### expo-updates
+If you decided to use this module, then you will need to follow steps below carefully:
+1. Decide how your app's `slug` will look like. For example, for the starter I am using `expo-rnn-starter`.
+2. Open `app.json` from the root of the project and change `"expo" --> "slug"` property to your own.
+3. We need to define `EXPO UPDATE URL` for the project which we will put in to iOS and Android config files. It has following pattern -- `https://exp.host/@my-expo-username/my-app-slug`. For example, for the starter it would be `https://exp.host/@kanzitelli/expo-rnn-starter`.
+4. Open `ios/Supporting/Expo.plist` and change `EXUpdatesURL` property to your own.
+5. Open `android/app/src/main/AndroidManifest.xml` and change `EXPO_UPDATE_URL` meta-data property to your own.
+6. Run `expo publish` from the root of the project. It will take some time.
+7. Now you should be able to see the app in [Expo dashboard](https://expo.io/dashboard).
+8. In order to test it, you will need to build the app in Release mode for both platforms. Once you do some changes in your code, don't forget to run `expo publish`.
+
+If you would like to enable or disable `expo-updates`, open `ios/Supporting/Expo.plist` and change `EXUpdatesEnabled `; and for Android open `android/app/src/main/AndroidManifest.xml` and change `ENABLED` meta-data property.
+
+Before using `expo-updates` in production, make sure you have read the documentation about this module, release channels etc.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Batr Kanzitelli
+Copyright (c) 2020 Batyr Kanzitdinov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,6 +1,13 @@
-<img src="https://i.postimg.cc/Vvv1X3hy/image1.png" width="100%" title="Logo">
+<img src="https://i.postimg.cc/Qx2m8TkP/ezgif-com-optimize.gif" width="100%" title="Logo">
 
-##  🦥 Motivation
+## Table of contents
+- [🦥 Motivation](#motivation)
+- [🏃‍♂️ Getting Started](#getting-started)
+- [📖 What's inside](#whats-inside)
+- [🧙‍♂️ Enhancements](#enhancements)
+- [⚠️ Known issues (warnings)](#known-issues-warnings)
+
+##  Motivation
 1. I love [React Native](https://reactnative.dev/) 💚
 2. I love [Expo](https://expo.io/) 💙
 3. I love [React Native Navigation](https://wix.github.io/react-native-navigation) ❤️
@@ -9,7 +16,7 @@ So why not put them all together? 😏
 
 Big love and gratitude to all people who are working on React Native, Expo and React Native Navigation!
 
-## 🏃‍♂️ Getting Started
+## Getting Started
 
 1. Clone the repo
 ```bash
@@ -27,61 +34,38 @@ yarn ios
 yarn android
 ```
 
-👁‍🗨 If you are planning to use Expo modules, such as preconfigured `expo-updates` and others, or add new ones, what I strongly recommend, then proceed to Expo Configuration section and follow those steps carefully.
+👁‍🗨 If you are planning to use Expo modules, such as preconfigured `expo-updates` and others, or add new ones, what I strongly recommend, then proceed to [Expo Configuration](/EXPO_CONFIGURATION.md) and follow the steps carefully.
 
 If you would like to rename the app, you can use [react-native-rename](https://github.com/junedomingo/react-native-rename). Don't forget to run `yarn ios:pods` after the process is finished. Also keep in mind that bundle identifier must be valid for both platforms or change it manually.
 
-## 🎛 Expo Configuration
-#### Prerequisites
-1. Get familiar with [Expo](https://expo.io) and [their documentation](https://docs.expo.io/) if you haven't yet.
-2. Create new account at [Expo.io](https://expo.io/signup)
-3. Install [expo-cli](https://docs.expo.io/workflow/expo-cli/).
-4. Login using expo-cli in the terminal.
-
-### expo-updates
-If you decided to use this module, then you will need to follow steps below carefully:
-1. Decide how your app's `slug` will look like. For example, for the starter I am using `expo-rnn-starter`.
-2. Open `app.json` from the root of the project and change `"expo" --> "slug"` property to your own.
-3. We need to define `EXPO UPDATE URL` for the project which we will put in to iOS and Android config files. It has following pattern -- `https://exp.host/@my-expo-username/my-app-slug`. For example, for the starter it would be `https://exp.host/@kanzitelli/expo-rnn-starter`.
-4. Open `ios/Supporting/Expo.plist` and change `EXUpdatesURL` property to your own.
-5. Open `android/app/src/main/AndroidManifest.xml` and change `EXPO_UPDATE_URL` meta-data property to your own.
-6. Run `expo publish` from the root of the project. It will take some time.
-7. Now you should be able to see the app in [Expo dashboard](https://expo.io/dashboard).
-8. In order to test it, you will need to build the app in Release mode for both platforms. Once you do some changes in your code, don't forget to run `expo publish`.
-
-If you would like to disable `expo-updates`, open `ios/Supporting/Expo.plist` and change `EXUpdatesEnabled ` to `NO`; and for Android open `android/app/src/main/AndroidManifest.xml` and change `ENABLED` meta-data property to `false`.
-
-## 📖 What's inside
-- [Expo Unimodules](https://github.com/expo/expo) - universal set of amazing libraries which are needed for every app.
-- [Expo Updates]() - continuous delivery tool maintained by Expo team and is part of Expo Ecosystem. Best alternative to CodePush.
+## What's inside
+- [Expo SDK](https://github.com/expo/expo) - universal set of amazing libraries (such as `expo-updates`) which are needed for building sustainable apps
 - [React Native Navigation](https://github.com/wix/react-native-navigation) - truly native navigation experience for iOS and Android
+- [Reanimated 2](https://github.com/software-mansion/react-native-reanimated) - React Native's Animated library reimplemented
+- [MobX](https://github.com/mobxjs/mobx) - simple, scalable state management, with [mobx-persist](https://github.com/pinqy520/mobx-persist) for persisting your stores
+### Extra helpful libraries
 - [React Native Navigation Hooks](https://github.com/underscopeio/react-native-navigation-hooks) - a set of React hooks for React Native Navigation
-- [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) - customizable icons for React Native
+- [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) - customizable icons for React Native. Even though Expo SDK includes `expo-icons` which you can still use, but the reason of adding `react-native-vector-icons` is to get icons as sources before launching tab based app
 - [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler) - native touches and gesture system for React Native
+- [React Native Defice Info](https://github.com/react-native-community/react-native-device-info) - device information for React Native iOS and Android
 - [Typescript](https://www.typescriptlang.org/) - strict syntactical superset of JavaScript
+### Small useful libraries/hooks from me
+- `useStyles()` - a hook that takes care of dark mode in your app. Supports toggling modes while you are in app. No dependencies (needs only `react-native`, so could be reusable). It is not a theme provider but could be used as one. It only has two themes light or dark
 
-and pick your favourite state management tool (examples inside)
-
-| MOBX | REDUX |
-| :---: | :---: |
-| [MobX](https://github.com/mobxjs/mobx) - simple, scalable state management | [Redux](https://github.com/reduxjs/redux) - a predictable state container  |
-| [MobX React](https://github.com/mobxjs/mobx-react) - official React bindings for MobX | [React Redux](https://github.com/reduxjs/react-redux) - official React bindings for Redux  |
-| [MobX State Tree (MST)](https://github.com/mobxjs/mobx-state-tree) - opinionated, transactional, MobX powered state container | [Redux Saga](https://github.com/redux-saga/redux-saga) - side effect model for Redux apps |
-| [Persistence](https://github.com/kanzitelli/react-native-navigation-starter/blob/master/srcMobX/store/redditStore.ts#L130) and [Hydration](https://github.com/kanzitelli/react-native-navigation-starter/blob/master/srcMobX/store/redditStore.ts#L97) are done by our hands | [Redux Persist](https://github.com/rt2zz/redux-persist) - persist and rehydrate a Redux store |
-
-## 🧙‍♂️ Enhancements
+## Enhancements
 There are still some things I would like to add to the starter:
-- [Expo Notifications](https://docs.expo.io/versions/v38.0.0/sdk/notifications/).
-- Dark Mode support.
-- Localization via [i18next](https://github.com/i18next/i18next/).
+- 🔳 Dark Mode support.
+- ⬜️ Localization via [i18next](https://github.com/i18next/i18next/).
+- ⬜️ [Expo Notifications](https://docs.expo.io/versions/v39.0.0/sdk/notifications/).
 
 Feel free to open an issue for suggestions.
 
-## ⚠️ Known issues (warnings)
-* Expo splash screen. There is some weird behavior using `expo-splash-screen` with `react-native-navigation`. That is why I have excluded this module from `react-native-unimodules`.
+## Known issues (warnings)
+- Expo splash screen. There is some weird behavior using `expo-splash-screen` with `react-native-navigation`. That is why this module has been excluded: [ios](https://github.com/kanzitelli/expo-rnn-starter/blob/master/ios/Podfile#L8) & [android](https://github.com/kanzitelli/expo-rnn-starter/blob/mater/android/app/build.gradle#L196).
+- Dark Mode in Android. React Native Navigation doesn't toggle navigation and tab bars' background color to dark when dark mode is toggled on. However it does so on iOS. As a workaround, we can subscribe to toggle events and then using `Navigation.mergeOptions` & `Navigation.setDefaultOptions` to change stylings for navigations and tab bars. Anyways, it needs some time to dive into it and come up with better solution.
 
 Feel free to open an issue for any other warning or problems.
 
-## 📃 License
+## License
 
 This project is [MIT licensed](/LICENSE.md)
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -17,10 +17,16 @@
           android:value="https://exp.host/@my-expo-username/my-app-slug" />
         <meta-data
           android:name="expo.modules.updates.EXPO_SDK_VERSION"
-          android:value="38.0.0" />
+          android:value="39.0.0" />
         <meta-data
           android:name="expo.modules.updates.ENABLED"
-          android:value="true"/>
+          android:value="false"/>
+        <meta-data
+          android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH"
+          android:value="ALWAYS"/>
+        <meta-data
+          android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS"
+          android:value="0"/>
 
         <activity
           android:name=".MainActivity"

diff --git a/android/app/src/main/java/com/rnn_starter/MainApplication.java b/android/app/src/main/java/com/rnn_starter/MainApplication.java
@@ -23,6 +23,9 @@
 import expo.modules.updates.UpdatesController;
 import javax.annotation.Nullable;
 
+import com.facebook.react.bridge.JSIModulePackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
+
 public class MainApplication extends NavigationApplication {
 
   private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(new BasePackageList().getPackageList(), null);
@@ -56,6 +59,11 @@ protected String getJSMainModuleName() {
             return "index";
         }
 
+        @Override
+        protected JSIModulePackage getJSIModulePackage() {
+          return new ReanimatedJSIModulePackage();
+        }
+
           @Override
           protected @Nullable String getJSBundleFile() {
             if (BuildConfig.DEBUG) {

diff --git a/android/build.gradle b/android/build.gradle
@@ -14,7 +14,7 @@ buildscript {
     }
     dependencies {
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
-        classpath("com.android.tools.build:gradle:3.5.3")
+        classpath('com.android.tools.build:gradle:4.0.0')
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,9 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [
+    'module:metro-react-native-babel-preset',
+  ],
+  plugins: [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    'react-native-reanimated/plugin',
+  ]
 };
diff --git a/index.js b/index.js
@@ -1,13 +1,7 @@
 import 'expo-asset';
 import { Navigation } from 'react-native-navigation';
 
-// Note:
-// in order to test Redux and MobX separately,
-// please comment unnecessary import, this is important
-// because RNN registers screens for both of them if two imports are presented
-
-// import { startApp } from './srcRedux/App';
-import { startApp } from './srcMobX/App';
+import { startApp } from './src/App';
 
 Navigation.events().registerAppLaunchedListener(() => {
     startApp();

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -34,7 +34,7 @@ PODS:
   - EXSQLite (8.4.0):
     - UMCore
     - UMFileSystemInterface
-  - EXUpdates (0.3.4):
+  - EXUpdates (0.3.5):
     - React
     - UMCore
   - FBLazyVector (0.63.2)
@@ -337,8 +337,39 @@ PODS:
     - ReactNativeNavigation/Core (= 7.1.0)
   - RNCAsyncStorage (1.12.0):
     - React
+  - RNDeviceInfo (6.2.0):
+    - React-Core
   - RNGestureHandler (1.8.0):
     - React
+  - RNReanimated (2.0.0-alpha.7):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - Folly
+    - glog
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - React-RCTVibration
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNVectorIcons (7.1.0):
     - React
   - UMAppLoader (1.3.0)
@@ -423,7 +454,9 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeNavigation (from `../node_modules/react-native-navigation`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - UMAppLoader (from `../node_modules/unimodules-app-loader/ios`)
   - UMBarCodeScannerInterface (from `../node_modules/unimodules-barcode-scanner-interface/ios`)
@@ -534,8 +567,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-navigation"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   UMAppLoader:
@@ -583,7 +620,7 @@ SPEC CHECKSUMS:
   EXNetwork: 05c1b87ba7077cb3eea7a3968640e5007e32eb6b
   EXPermissions: 30cbe5b72bd209b65c00884180ad058a60bb413d
   EXSQLite: d0d8677c13e60d5db2812387f059c697be27d3fb
-  EXUpdates: 9ed0693ab1c8df9f0472cfb4549d5edccdf05849
+  EXUpdates: 74b39409f68eca207075d87b0077bdf37865a8bf
   FBLazyVector: 3ef4a7f62e7db01092f9d517d2ebc0d0677c4a37
   FBReactNativeSpec: dc7fa9088f0f2a998503a352b0554d69a4391c5a
   Flipper: 33585e2d9810fe5528346be33bcf71b37bb7ae13
@@ -618,7 +655,9 @@ SPEC CHECKSUMS:
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
   ReactNativeNavigation: 65025dab27b404053678593b2450ed7a022e3173
   RNCAsyncStorage: 2a692bcb9b69b76a2f1a95f33db057129700af64
+  RNDeviceInfo: eb63f95c93ff1aae15353d113c130aebc6127915
   RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
+  RNReanimated: c40c29429b22a1564e505b789132cfcef456c6bd
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   UMAppLoader: 5db5dc03176c6238da9c8b3657a370137882a4ad
   UMBarCodeScannerInterface: 017672479f93de88d94c3a50dfb66b5348b65989

diff --git a/ios/Supporting/Expo.plist b/ios/Supporting/Expo.plist
@@ -1,5 +1,7 @@
 {
 	EXUpdatesURL = "https://exp.host/@my-expo-username/my-app-slug";
-	EXUpdatesSDKVersion = "38.0.0";
-	EXUpdatesEnabled = "YES";
+	EXUpdatesSDKVersion = "39.0.0";
+	EXUpdatesEnabled = "NO";
+	EXUpdatesCheckOnLaunch = "ALWAYS";
+	EXUpdatesLaunchWaitMs = 0;
 }