Upgraded Project to new RN 0.72.6 + various fixes (#1281)

* Updaged chore, refactor, removed redux-flipper, removed old splashscreen package

* Chore redux, added Lato as main project font

* UI fixes, clean code

* Fixed android compilation, fixed duped arrow back on the header on Android

* Config fixes

* Chore dependencies

Author: IronTony

.all-contributorsrc

@@ -29,17 +29,6 @@
         "example"
       ]
     },
-    {
-      "login": "panz3r",
-      "name": "Mattia Panzeri",
-      "avatar_url": "https://avatars3.githubusercontent.com/u/1754457?v=4",
-      "profile": "http://panz3r.dev",
-      "contributions": [
-        "ideas",
-        "doc",
-        "tool"
-      ]
-    }
   ],
   "contributorsPerLine": 7
 }

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', 'react-hooks'],
   extends: [
-    '@react-native-community',
+    '@react-native',
     'plugin:prettier/recommended',
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',

.gitignore

@@ -98,3 +98,8 @@ src/env.js
 
 deps-graph.svg
 .eslintcache
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+# testing
+/coverage

.nvmrc

@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '2.7.5'
+ruby ">= 2.6.10"
 
-gem 'cocoapods', '~> 1.11', '>= 1.11.2'
+gem 'cocoapods', '~> 1.13'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'

.ruby-version

@@ -1,41 +1,40 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.5)
+    CFPropertyList (3.0.6)
       rexml
-    activesupport (6.1.5)
+    activesupport (7.0.8)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.5)
+      public_suffix (>= 2.0.2, < 6.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
     claide (1.1.0)
-    cocoapods (1.11.3)
+    cocoapods (1.13.0)
       addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.11.3)
+      cocoapods-core (= 1.13.0)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-downloader (>= 1.6.0, < 2.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
       cocoapods-search (>= 1.0.0, < 2.0)
-      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
       cocoapods-try (>= 1.1.0, < 2.0)
       colored2 (~> 3.1)
       escape (~> 0.0.4)
       fourflusher (>= 2.3.0, < 3.0)
       gh_inspector (~> 1.0)
       molinillo (~> 0.8.0)
       nap (~> 1.0)
-      ruby-macho (>= 1.0, < 3.0)
-      xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.11.3)
-      activesupport (>= 5.0, < 7)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.13.0)
+      activesupport (>= 5.0, < 8)
       addressable (~> 2.8)
       algoliasearch (~> 1.0)
       concurrent-ruby (~> 1.1)
@@ -54,47 +53,47 @@ GEM
       netrc (~> 0.11)
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
-    concurrent-ruby (1.1.10)
+    concurrent-ruby (1.2.2)
     escape (0.0.4)
-    ethon (0.15.0)
+    ethon (0.16.0)
       ffi (>= 1.15.0)
-    ffi (1.15.5)
+    ffi (1.16.3)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.8.3)
-    i18n (1.10.0)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    json (2.6.1)
-    minitest (5.15.0)
+    json (2.6.3)
+    minitest (5.20.0)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
     public_suffix (4.0.7)
-    rexml (3.2.5)
+    rexml (3.2.6)
     ruby-macho (2.5.1)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
-    tzinfo (2.0.4)
+    tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    xcodeproj (1.21.0)
+    xcodeproj (1.23.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
       rexml (~> 3.2.4)
-    zeitwerk (2.5.4)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  cocoapods (~> 1.11, >= 1.11.2)
+  activesupport (>= 6.1.7.3, < 7.1.0)
+  cocoapods (~> 1.13)
 
 RUBY VERSION
-   ruby 2.7.4p191
+   ruby 3.0.0p0
 
 BUNDLED WITH
-   2.2.27
+   2.2.3

Gemfile

@@ -2,7 +2,7 @@
 
 > A React Native boilerplate app to bootstrap your next app with Redux Toolkit and Saga!
 
-## 🔥🔥🔥 Upgraded to the latest React-Native (> 0.69.x) with brand New Architecture (Fabric) 🔥🔥🔥
+## 🔥🔥🔥 Upgraded to the latest React-Native (> 0.72.x) with brand New Architecture (Fabric) 🔥🔥🔥
 
 <br/>
 <div align="center">
@@ -27,19 +27,20 @@
 
 # Table of Contents <!-- omit in toc -->
 
-- [🔥🔥🔥 Upgraded to the latest React-Native (> 0.69.x) with brand New Architecture (Fabric) 🔥🔥🔥](#-upgraded-to-the-latest-react-native--069x-with-brand-new-architecture-fabric-)
+- [🔥🔥🔥 Upgraded to the latest React-Native (\> 0.72.x) with brand New Architecture (Fabric) 🔥🔥🔥](#-upgraded-to-the-latest-react-native--072x-with-brand-new-architecture-fabric-)
 - [🔥🔥 Checkout also my brand new React Native React-Query (no redux toolkit) here 🔥🔥](#-checkout-also-my-brand-new-react-native-react-query-no-redux-toolkit-here-)
-- [Installation :inbox_tray:](#installation-inbox_tray)
+- [Installation :inbox\_tray:](#installation-inbox_tray)
 - [Rename project and bundles :memo: :package:](#rename-project-and-bundles-memo-package)
-  - [iOS & Android](#ios--android)
-- [Environment Setup :globe_with_meridians:](#environment-setup-globe_with_meridians)
+  - [iOS \& Android](#ios--android)
+- [Environment Setup :globe\_with\_meridians:](#environment-setup-globe_with_meridians)
 - [Scripts :wrench:](#scripts-wrench)
   - [Run the app](#run-the-app)
   - [Generate app icons](#generate-app-icons)
   - [Generate Splashscreen](#generate-splashscreen)
   - [To enabled React-Native (Fabric) new architecture](#to-enabled-react-native-fabric-new-architecture)
   - [Setup iOS](#setup-ios)
   - [Typescript (optional)](#typescript-optional)
+  - [ATTENTION Circular dependencies script checker](#attention-circular-dependencies-script-checker)
 - [Roadmap :running:](#roadmap-running)
 - [Screenshots](#screenshots)
 - [Contributors :sparkles:](#contributors-sparkles)
@@ -95,6 +96,14 @@ If you want to use IDEs such Xcode or Android Studio, you have to set up the ENV
 - `yarn env:stage`, to set the staging ENV variables
 - `yarn env:prod`, to set the production ENV variables
 
+If you want to use this in any file, just:
+
+`import env from '@env';`
+
+and use like this:
+
+`env.API_URL`
+
 ---
 
 ## Scripts :wrench:
@@ -111,6 +120,24 @@ To run the app use one of the following scripts:
 - `yarn ios:stage`, to start the app on iOS with the `staging` environment variables.
 - `yarn ios:prod`, to start the app on iOS with the `production` environment variables.
 
+If using the `ios` commands you will receive an error like this:
+
+<img src="./docs/error.png" maxWidth="700px" />
+
+Just do the following steps:
+
+- Launch Xcode
+- Settings
+- Locations
+
+Make sure there's a dropdown option selected for the command line tools
+NOTE: Even if you're seeing Command Line Tools dropdown being selected with proper version, you might want to re-select it again. It will ask for login password.
+
+<img src="./docs/ios_locations.png" maxWidth="700px" />
+
+_REMEMBER: The Command Line Tools should be the latest one or the one matching your Xcode version_
+
+
 ### Generate app icons
 
 To setup the app icons:
@@ -125,16 +152,29 @@ yarn assets:icons
 
 ### Generate Splashscreen
 
-To setup the app splashscreen:
+To setup the iOS app splashscreen:
 
 - create an image at least `1242x2208px`
-- place it under `/assets` folder as `splashscreen.png`
+- place it under `/assets` folder as `ios_splashscreen.png`
 - run
 
 ```sh
-yarn assets:splashscreen
+yarn assets:splashscreen:ios
 ```
 
+To setup the Android app splashscreen:
+
+- create an image at least `150x134px`
+- place it under `/assets` folder as `android_splashscreen.png`
+- run
+
+```sh
+yarn assets:splashscreen:android
+```
+
+If you want to customize the output icon, open the `package.json` file and customized the backgtound color, size, ..... in the following command `assets:splashscreen:android`
+
+
 ### To enabled React-Native (Fabric) new architecture
 
 Check the official documentation [here](https://reactnative.dev/docs/new-architecture-intro)
@@ -169,17 +209,24 @@ _REMEMBER: the entry point file in the root of the project MUST be index.js_
 
 ---
 
+### ATTENTION Circular dependencies script checker
+
+If running this script `dependencies:graph`, you get this error:
+`Error: Graphviz could not be found. Ensure that "gvpr" is in your $PATH`
+
+If you are on a Mac: `brew install graphviz`
+On Windows, after installation, do this: <img src="https://user-images.githubusercontent.com/24865815/91755813-b8224a00-eb99-11ea-9489-10973000c043.png" maxWidth="700px" />
+
 ## Roadmap :running:
 
 ✅ Initial Setup<br/>
-✅ `react-native-splashscreen` (https://github.com/crazycodeboy/react-native-splash-screen)<br/>
-✅ `react-native-toolbox` to generate Splashscreen and icons automagically (https://github.com/panz3r/react-native-toolbox)<br/>
+✅ `react-native-bootsplash` (https://github.com/zoontek/react-native-bootsplash)<br/>
+✅ `react-native-toolbox` to generate Splashscreen and icons automagically (https://github.com/Forward-Software/react-native-toolbox)<br/>
 ✅ Standard tree folders structure<br/>
-✅ `React-Native 0.69 (new architecture)`<br/>
+✅ `React-Native 0.72.6`<br/>
 ✅ `redux-toolkit`<br/>
 ✅ `redux-persist` (https://github.com/rt2zz/redux-persist)<br/>
 ✅ `React Native Debugger`<br/>
-✅ `React Native Flipper Integration`<br/>
 ✅ `redux-saga`<br/>
 ✅ `i18next`<br/>
 ✅ `react-navigation v6` ❤️<br/>
@@ -218,7 +265,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <table>
   <tr>
     <td align="center"><a href="https://github.com/IronTony"><img src="https://avatars3.githubusercontent.com/u/3645225?v=4" width="100px;" alt=""/><br /><sub><b>IronTony</b></sub></a><br /><a href="#ideas-IronTony" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/IronTony/react-native-redux-toolkit-starter-app/commits?author=IronTony" title="Code">💻</a> <a href="https://github.com/IronTony/react-native-redux-toolkit-starter-app/commits?author=IronTony" title="Documentation">📖</a> <a href="https://github.com/IronTony/react-native-redux-toolkit-starter-app/issues?q=author%3AIronTony" title="Bug reports">🐛</a> <a href="#maintenance-IronTony" title="Maintenance">🚧</a> <a href="#platform-IronTony" title="Packaging/porting to new platform">📦</a> <a href="#question-IronTony" title="Answering Questions">💬</a> <a href="https://github.com/IronTony/react-native-redux-toolkit-starter-app/pulls?q=is%3Apr+reviewed-by%3AIronTony" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/IronTony/react-native-redux-toolkit-starter-app/commits?author=IronTony" title="Tests">⚠️</a> <a href="#example-IronTony" title="Examples">💡</a></td>
-    <td align="center"><a href="http://panz3r.dev"><img src="https://avatars3.githubusercontent.com/u/1754457?v=4" width="100px;" alt=""/><br /><sub><b>Mattia Panzeri</b></sub></a><br /><a href="#ideas-panz3r" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/IronTony/react-native-redux-toolkit-starter-app/commits?author=panz3r" title="Documentation">📖</a> <a href="#tool-panz3r" title="Tools">🔧</a></td>
   </tr>
 </table>
 

Gemfile.lock

@@ -6,6 +6,9 @@ import 'react-native';
 import React from 'react';
 import App from '../App';
 
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
+
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';