React 0.66.0 - Type Definitions (#76)

* React 0.66.0 - Type Definitions

Co-authored-by: Amit Mangal <amangal@vrbo.com>

Author: AmitM30

.gitignore

@@ -175,6 +175,7 @@ out/
 
 # Local configuration file (sdk path, etc)
 local.properties
+*.hprof
 
 # Proguard folder generated by Eclipse
 proguard/

README.md

@@ -8,10 +8,16 @@ The project has been setup based off [RN Getting Started](https://facebook.githu
 
 ___
 
-### Supports React Native 0.64.1, React Native Navigation v7, Flipper and Hermes
+### Supports React 17, React Native 0.66.0, React Native Navigation v7, Flipper and Hermes
+
+Update (Nov 2021):
+- Added Types (actions, reducers, store, components and more).
+- Core API service using fetch
+- Support for M1
 
 | Updates | RNN | RN | React | Comments |
 |---|---|---|---|---|
+|  Nov '21 | 7.23.1 | 0.66.0 | 17.0.2 | Type definitions
 |  May '21 | 7.14.0 | 0.64.1 | 17.0.1 | Update RN RNN, Hermes Support
 |  Oct '20 | 7.1.0 | 0.63.3 | 16.13.1 | Support for Flipper
 |  Apr '20 | 3.7.0 | 0.61.5 | 16.9.0 | Support for RN > 0.60, Android X
@@ -34,6 +40,8 @@ Jumpstart building robust apps using React Native and TypeScript with most commo
   - **widgets**: Any component providing a complete functionality. E.g. carousels component, banner component, etc.
 - Typography
   - Base Typography setup - Color, Font, LAYOUT, CTA, FONTS, TEXT, TEXT_INPUT
+- Type Definitions
+  - Type definitons for actions, reducers, store, components and more.
 - Code Lint
   - [Airbnb's JS](https://github.com/airbnb/javascript) Linting
 
@@ -53,6 +61,7 @@ Jumpstart building robust apps using React Native and TypeScript with most commo
 - [Project Structure](#project-structure)
 - [Getting Started](#getting-started)
 - [Cheat Sheet](#cheat-sheet)
+  - [M1 support](#m1-support)
   - [Single Screen vs Tabbed Based Navigation](#single-screen-vs-tabbed-based-navigation)
   - [Renaming the App](#renaming-the-app)
   - [iOS Launch Screen](#ios-launch-screen)
@@ -64,8 +73,8 @@ Jumpstart building robust apps using React Native and TypeScript with most commo
 
 ```
 /
-├── android					Android Native code
-├── ios						iOS Native Code
+├── android					    Android Native code
+├── ios						    iOS Native Code
 ├── shared
 │   ├── redux					Applications Logic
 │   │   ├── constants
@@ -75,16 +84,22 @@ Jumpstart building robust apps using React Native and TypeScript with most commo
 │   │   ├── store
 │   │   └── thunk
 │   └── utilities
+│   ├── services
+│   │   ├── core				Core Services - API (fetch/axios), storage
+│   │   │  ├── API
+│   │   │  └── Storage
+│   │   ├── home
+│   │   └── search
 ├── src
 │   ├── config					Global Configuration
-│   ├── constants				Screens, Localization
+│   ├── constants				Screen names and ids, Localization
 │   ├── navigators				Router, Navigation
 │   ├── view					UI compoments
-│   │   ├── elements			  Custom elements
+│   │   ├── elements			Custom elements
 │   │   ├── assets
 │   │   ├── screens
-│   │   ├── styles				  Typography
-│   │   └── widgets				  Custom components
+│   │   ├── styles				Typography
+│   │   └── widgets				Custom components
 │   └── utilities
 ├── __tests__					Unit Tests
 │   ├── presentation
@@ -109,7 +124,7 @@ Presentation layer for the app - screens, styles, images, icons etc.
 
 ### Getting Started
 
-Make sure node version installed is `>=10.x.x`. Then install using yarn (or npm):
+Make sure node version installed is `>=12.x.x`. Then install using yarn (or npm):
 ```
 yarn install
 ```
@@ -181,6 +196,22 @@ Change the 3 images here to set the new launch screen for iOS.
 
 Change the images the `drawable-*` folders to set the new launch screen for Android.
 
+#### M1 support
+Some additional steps may be required for project to work on M1.
+
+  - Disable Rosetta in Terminal
+  - Install ffi
+```
+sudo arch -x86_64 gem install ffi
+```
+  - Re-install dependencies
+```
+arch -x86_64 pod install
+```
+Now try and run CocoaPods.
+
+P.S.: Thanks to samanthadotcom#7043 (discord)
+
 #### Single Screen vs Tabbed Based Navigation
 
 The application launches with a splash screen, and then moves to a tabbed based navigation. Splash screen is a good place to fetch data / build application launch logic like getting user token from API or Async Store, load persist state etc.

android/app/build.gradle

@@ -123,6 +123,11 @@ def jscFlavor = 'org.webkit:android-jsc:+'
  */
 def enableHermes = project.ext.react.get("enableHermes", false);
 
+/**
+ * Architectures to build native code for in debug.
+ */
+def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
+
 android {
     ndkVersion rootProject.ext.ndkVersion
     compileSdkVersion rootProject.ext.compileSdkVersion
@@ -158,6 +163,11 @@ android {
     buildTypes {
         debug {
             signingConfig signingConfigs.debug
+            if (nativeArchitectures) {
+                ndk {
+                    abiFilters nativeArchitectures.split(',')
+                }
+            }
         }
         release {
             // Caution! In production, you need to generate your own keystore file.
@@ -217,7 +227,7 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.compile
+    from configurations.implementation
     into 'libs'
 }
 

android/build.gradle

@@ -2,14 +2,14 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "29.0.2"
+        buildToolsVersion = "30.0.2"
         minSdkVersion = 21
-        compileSdkVersion = 29
-        targetSdkVersion = 29
+        compileSdkVersion = 30
+        targetSdkVersion = 30
         kotlinVersion = "1.3.72"
         RNNKotlinVersion = kotlinVersion
         supportLibVersion = "28.0.0"
-        ndkVersion = "20.1.5948944"
+        ndkVersion = "21.4.7075529"
     }
     repositories {
         google()
@@ -19,7 +19,7 @@ buildscript {
     }
     dependencies {
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
-        classpath("com.android.tools.build:gradle:4.1.0")
+        classpath("com.android.tools.build:gradle:4.2.2")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -28,9 +28,9 @@ buildscript {
 
 allprojects {
     repositories {
-        google()
         mavenCentral()
         mavenLocal()
+        google()
         jcenter()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

android/gradle.properties

@@ -26,4 +26,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.75.1
+FLIPPER_VERSION=0.99.0

android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip

ios/FridayApp.xcodeproj/project.pbxproj

@@ -473,10 +473,12 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-FridayApp/Pods-FridayApp-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/double-conversion.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -509,10 +511,12 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-FridayApp-FridayAppTests/Pods-FridayApp-FridayAppTests-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/double-conversion.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;

ios/Podfile

@@ -24,6 +24,7 @@ target 'FridayApp' do
 
   post_install do |installer|
     react_native_post_install(installer)
+    __apply_Xcode_12_5_M1_post_install_workaround(installer)
   end
 end