Skip to content

Commit 72acb73

Browse files
AmitM30AmitM30
authored
Upgrade to RN 0.63.3 (#47)
* iOS Build Fixed * Android build Fixed * Fix `registerComponentWithRedux` deprecation * Fix lint, bump version * Fix Travis Build * Fix Flipper (move to Debug folder) * Add RNN Side Menu sample * Update Readme
1 parent 7498e31 commit 72acb73

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+4285
-1838
lines changed

‎.travis.yml

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ jobs:
77
include:
88
- stage: Test and lint ✅
99
before_install:
10-
- npm i -g npm@6.7.0
11-
- npm i -g yarn@1.9.2
10+
- npm i -g npm@6.14.6
11+
- npm i -g yarn@1.22.10
1212
language: node_js
13-
node_js: 8.11.2
13+
node_js: 12.18.4
1414
install: yarn
1515
script: yarn lint
1616
- stage: Build Android 🤖
1717
before_install:
1818
- sudo apt-get install build-essential checkinstall && sudo apt-get install libssl-dev
1919
- curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
2020
- source ~/.profile
21-
- nvm install 8.11.2
22-
- npm i -g yarn@1.9.2
21+
- nvm install 12.18.4
22+
- npm i -g yarn@1.22.10
2323
language: android
2424
android:
2525
components:
@@ -36,4 +36,4 @@ jobs:
3636
script:
3737
- cd /usr/local/android-sdk/tools/bin
3838
- yes | ./sdkmanager --update
39-
- cd - && cd android && ./gradlew assembleRelease && cd ..
39+
- cd - && cd android && ./gradlew assembleRelease -x bundleReleaseJsAndAssets && cd ..

‎README.md

+36-31
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,39 @@
11
# React Native Typescript Boilerplate
22

3-
![Travis](https://api.travis-ci.com/AmitM30/react-native-typescript-boilerplate.svg?branch=master) ![License](https://img.shields.io/github/license/AmitM30/react-native-typescript-boilerplate.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md) [![Code Climate](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate/badges/gpa.svg)](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate)
3+
![Travis](https://api.travis-ci.com/AmitM30/react-native-typescript-boilerplate.svg?branch=master) [![Code Climate](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate/badges/gpa.svg)](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate) ![License](https://img.shields.io/github/license/AmitM30/react-native-typescript-boilerplate.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md)
44

5-
### An opinionated [React Native](https://facebook.github.io/react-native/docs/getting-started) Starter Kit with [React Native Navigation](https://github.com/wix/react-native-navigation) + [Redux](https://github.com/reactjs/redux) + [TSLint](https://github.com/airbnb/javascript) to build iOS / Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)
5+
### An opinionated [React Native](https://facebook.github.io/react-native/docs/getting-started) Starter Kit with [React Native Navigation](https://github.com/wix/react-native-navigation) + [Redux](https://github.com/reactjs/redux) + [Airbnb TSLint](https://github.com/airbnb/javascript) to build iOS and Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)
66

77
The project has been setup based off [RN Getting Started](https://facebook.github.io/react-native/docs/getting-started) and instructions from [Microsoft's Github TypeScript React Native Starter](https://github.com/Microsoft/TypeScript-React-Native-Starter) repo.
88

9-
This repo supports the latest version of React Native supported by React Native Navigation.
9+
### Supports React Native 0.63.3, React Native Navigation v7 and Flipper
10+
11+
This repo supports the latest version of React Native compatible with React Native Navigation.
1012

1113
| UPDATE | RNN | RN | React | Comments |
1214
|---|---|---|---|---|
13-
| 27th April '20 | v3.7.0 | 0.61.5 | 16.9.0 | Support for RN > 0.60
14-
| 2nd Nov '19 | v2.26.2 | 0.59.10 | | Maintenance |
15-
| 30th April '19 | v2.18.3 | 0.59.5 | 16.8.6 | Maintenance |
16-
| 8th March '19 | v2.13.1 | 0.58.6 | 16.8.4 |
15+
| 7th October '20 | 7.1.0 | 0.63.3 | 16.13.1 | Major Upgrade, Support for Flipper
16+
| 27th April '20 | 3.7.0 | 0.61.5 | 16.9.0 | Support for RN > 0.60
17+
| 2nd Nov '19 | 2.26.2 | 0.59.10 | | Maintenance |
18+
| 30th April '19 | 2.18.3 | 0.59.5 | 16.8.6 | Maintenance |
19+
| 8th March '19 | 2.13.1 | 0.58.6 | 16.8.4 |
1720

1821
### Who is this for?
1922

20-
Someone looking to jumpstart building apps using RN and prefers TypeScript. The base setup has been taken care of, just `yarn install` and get going from respective IDEs.
23+
Jumpstart building robust apps using React Native, with TypeScript. The base setup has been taken care of, just `yarn install` and get going from respective IDEs.
2124

2225
You might also want to [rename](https://medium.com/the-react-native-log/how-to-rename-a-react-native-app-dafd92161c35) the app for your own use.
2326

2427
> _Disclaimer_: This is an **opinionated** approach to building apps with RN. The project structure is inspired by multiple production apps built by the contributors.
2528
26-
The project uses and encourages to use industry best practices / tools / libraries like React Native Navigation, redux, tslint, separation of concern and structure to build a maintainable app.
29+
#### App Screens
30+
31+
| ![Splash](./src/view/assets/images/sample/1.png "Splash") | ![Home](./src/view/assets/images/sample/2.png "Home") |![Side Menu](./src/view/assets/images/sample/3.png "Side Menu") |
32+
| :-------------------------------------------------------: | :---------------------------------------------------: | :---------------------------------------------------: |
2733

28-
| ![Splash](./src/view/assets/images/sample/1.png "Splash") | ![Home](./src/view/assets/images/sample/2.png "Home") |
29-
| :-------------------------------------------------------: | :---------------------------------------------------: |
34+
#### Flipper Support
3035

36+
![Flipper](./src/view/assets/images/sample/4.png "Flipper")
3137

3238
### Table of Contents
3339

@@ -36,7 +42,7 @@ The project uses and encourages to use industry best practices / tools / librari
3642
- [Lint](#lint)
3743
- [Unit Tests](#unit-tests)
3844
- [Cheat Sheet](#cheat-sheet)
39-
- [React Native Navigation](#react-native-navigation)
45+
- [Single Screen vs Tabbed Based Navigation](#single-screen-vs-tabbed-based-navigation)
4046
- [Styles](#styles)
4147
- [Widgets / Elements](#widgets---elements)
4248
- [Contributing](#contributing)
@@ -49,7 +55,7 @@ The project uses and encourages to use industry best practices / tools / librari
4955
├── android Android Native code
5056
├── ios iOS Native Code
5157
├── shared
52-
│ ├── redux Business Logic
58+
│ ├── redux Applications Logic
5359
│ │ ├── constants
5460
│ │ ├── actions
5561
│ │ ├── api
@@ -58,10 +64,10 @@ The project uses and encourages to use industry best practices / tools / librari
5864
│ │ └── thunk
5965
│ └── utilities
6066
├── src
61-
│ ├── config App Configuration
67+
│ ├── config Global Configuration
6268
│ ├── constants Screens, Localization
6369
│ ├── navigators Router, Navigation
64-
│ ├── view UI compoments - Screens, Widgets
70+
│ ├── view UI compoments
6571
│ │ ├── elements Custom elements
6672
│ │ ├── assets
6773
│ │ ├── screens
@@ -89,12 +95,9 @@ Everything related to application business logic (store) resides under this dire
8995
`src`
9096
Only presentation layer for the app, styles, images, icons are meant to be under this.
9197

92-
`web`
93-
Going forward, plan is to add a web folder to the project, that can leverage the business logic from shared folder.
94-
9598
#### Running
9699

97-
Make sure node version installed is `>=8.11.x <=9`
100+
Make sure node version installed is `>=10.x.x`
98101

99102
```
100103
yarn install
@@ -104,6 +107,10 @@ yarn install
104107

105108
###### iOS
106109

110+
```
111+
cd ios && pod install
112+
```
113+
107114
Launch application from XCode
108115

109116
###### Android
@@ -118,13 +125,13 @@ and then launch from IDE.
118125

119126
#### Lint
120127

121-
To run tslint on the application:
128+
To run lint on the application:
122129

123130
```
124131
yarn lint
125132
```
126133

127-
To fix most tslint issues automatically
134+
Fixes most tslint issues automatically:
128135

129136
```
130137
yarn lint:fix
@@ -148,22 +155,24 @@ npm run test:coverage
148155

149156
#### Cheat Sheet
150157

151-
##### React Native Navigation
158+
##### Single Screen vs Tabbed Based Navigation
159+
160+
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.
152161

153-
The application launches with a blank splash screen, and then moves to a tabbed based home view. Developers can feel free to add application launch logic to this, like fetch user token, load persist state etc., or skip the splash if not required, or change this setup altogether.
162+
For Single screen application, replace this tabbed based navigation with a single screen - just `home`, or simply use the splash screen to setup the app, may be with a burger menu.
154163

155164
##### Styles
156165

157-
The `styles` folder contains `global` style and `typography` for the application. Styles for each screen has been placed with the screen, as they are going to be used together with the screen, unlike web.
166+
The `styles` folder contains `global` style and `typography` for the application. Styles for each screen has been placed with the screen, as they are used together with the screen, unlike web.
158167

159168
##### Widgets / Elements
160169

161170
The custom components have been broken into 2 major categories, namely - **widgets**, **elements**
162171

163172
A Good use case would be:
164173

165-
- widgets: carousels component, banner component, any component providing a complete functionality
166-
- elements: A custom, may be `<CText>` or `<ButtonDefault>`, element that has default font properties like font, size and overrides the native elements.
174+
- **widgets**: Any component providing a complete functionality. Like carousels component, banner component, etc.
175+
- **elements**: Smallest building blocks of application. A custom element, may be `<ButtonPrimary>` or `<CText>`, that has default font properties like font, size and so on.
167176

168177
#### Contributing
169178

@@ -175,8 +184,4 @@ Please check out [Contributing](https://github.com/AmitM30/react-native-typescri
175184
- [**Brian Varley**](https://github.com/BrianJVarley) - _Windows Setup_
176185
- [**Nelson Omuto**](https://github.com/nelsonomuto) - _Update Podfile_
177186

178-
See also the list of [contributors](https://github.com/AmitM30/react-native-typescript-boilerplate/contributors) who participated in this project.
179-
180-
#### TODO
181-
182-
- [ ] Build React web app using `shared` business logic
187+
See also the list of [contributors](https://github.com/AmitM30/react-native-typescript-boilerplate/contributors).

‎android/app/build.gradle

+55-10
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,14 @@ import com.android.build.OutputFile
1515
* // the name of the generated asset file containing your JS bundle
1616
* bundleAssetName: "index.android.bundle",
1717
*
18-
* // the entry file for bundle generation
18+
* // the entry file for bundle generation. If none specified and
19+
* // "index.android.js" exists, it will be used. Otherwise "index.js" is
20+
* // default. Can be overridden with ENTRY_FILE environment variable.
1921
* entryFile: "index.android.js",
2022
*
23+
* // https://reactnative.dev/docs/performance#enable-the-ram-format
24+
* bundleCommand: "ram-bundle",
25+
*
2126
* // whether to bundle JS and assets in debug mode
2227
* bundleInDebug: false,
2328
*
@@ -73,7 +78,10 @@ import com.android.build.OutputFile
7378
*/
7479

7580
project.ext.react = [
76-
entryFile: "index.js"
81+
entryFile: "index.js",
82+
enableHermes: false, // clean and rebuild if changing
83+
// hermesCommand: "../../node_modules/hermes-engine/%OS-BIN%/hermes"
84+
bundleInDebug: true
7785
]
7886

7987
apply from: "../../node_modules/react-native/react.gradle"
@@ -93,8 +101,26 @@ def enableSeparateBuildPerCPUArchitecture = false
93101
*/
94102
def enableProguardInReleaseBuilds = false
95103

104+
/**
105+
* The preferred build flavor of JavaScriptCore.
106+
*
107+
* For example, to use the international variant, you can use:
108+
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
109+
*
110+
* The international variant includes ICU i18n library and necessary data
111+
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
112+
* give correct results when using with locales other than en-US. Note that
113+
* this variant is about 6MiB larger per architecture than default.
114+
*/
96115
def jscFlavor = 'org.webkit:android-jsc:+'
97116

117+
/**
118+
* Whether to enable the Hermes VM.
119+
*
120+
* This should be set on project.ext.react and mirrored here. If it is not set
121+
* on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
122+
* and the benefits of using Hermes will therefore be sharply reduced.
123+
*/
98124
def enableHermes = project.ext.react.get("enableHermes", false);
99125

100126
android {
@@ -114,7 +140,7 @@ android {
114140
packagingOptions {
115141
exclude "lib/arm64-v8a/libgnustl_shared.so"
116142
}
117-
missingDimensionStrategy "RNN.reactNativeVersion", "reactNative60"
143+
missingDimensionStrategy "RNN.reactNativeVersion", "reactNative63"
118144
}
119145
compileOptions {
120146
sourceCompatibility JavaVersion.VERSION_1_8
@@ -125,11 +151,17 @@ android {
125151
reset()
126152
enable enableSeparateBuildPerCPUArchitecture
127153
universalApk false // If true, also generate a universal APK
128-
include "armeabi-v7a", "x86", "arm64-v8a"
154+
include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
129155
}
130156
}
131157
buildTypes {
158+
debug {
159+
signingConfig signingConfigs.debug
160+
}
132161
release {
162+
// Caution! In production, you need to generate your own keystore file.
163+
// see https://reactnative.dev/docs/signed-apk-android.
164+
signingConfig signingConfigs.debug
133165
minifyEnabled enableProguardInReleaseBuilds
134166
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
135167
}
@@ -138,8 +170,8 @@ android {
138170
applicationVariants.all { variant ->
139171
variant.outputs.each { output ->
140172
// For each separate APK per architecture, set a unique version code as described here:
141-
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
142-
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3]
173+
// https://developer.android.com/studio/build/configure-apk-splits.html
174+
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
143175
def abi = output.getFilter(OutputFile.ABI)
144176
if (abi != null) { // null for the universal-debug, universal-release variants
145177
output.versionCodeOverride =
@@ -151,9 +183,20 @@ android {
151183

152184
dependencies {
153185
implementation fileTree(dir: "libs", include: ["*.jar"])
154-
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
155-
implementation "com.facebook.react:react-native:0.61.5" // From node_modules
156-
implementation project(':react-native-navigation')
186+
// implementation project(':react-native-navigation')
187+
//noinspection GradleDynamicVersion
188+
implementation "com.facebook.react:react-native:+" // From node_modules
189+
190+
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
191+
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
192+
exclude group:'com.facebook.fbjni'
193+
}
194+
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
195+
exclude group:'com.facebook.flipper'
196+
}
197+
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
198+
exclude group:'com.facebook.flipper'
199+
}
157200

158201
implementation "com.android.support:design:${rootProject.ext.supportLibVersion}"
159202
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
@@ -188,4 +231,6 @@ subprojects { subproject ->
188231
}
189232
}
190233
}
191-
}
234+
}
235+
236+
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

‎android/app/proguard-rules.pro

+2
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,5 @@
1515
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
1616
# public *;
1717
#}
18+
-keep class com.facebook.hermes.unicode.** { *; }
19+
-keep class com.facebook.jni.** { *; }

‎android/app/src/debug/java/com/fridayapp/ReactNativeFlipper.java

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* <p>This source code is licensed under the MIT license found in the LICENSE file in the root
5+
* directory of this source tree.
6+
*/
7+
package com.rndiffapp;
8+
import android.content.Context;
9+
import com.facebook.flipper.android.AndroidFlipperClient;
10+
import com.facebook.flipper.android.utils.FlipperUtils;
11+
import com.facebook.flipper.core.FlipperClient;
12+
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
13+
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
14+
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
15+
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
16+
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
17+
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
18+
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
19+
import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
20+
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
21+
import com.facebook.react.ReactInstanceManager;
22+
import com.facebook.react.bridge.ReactContext;
23+
import com.facebook.react.modules.network.NetworkingModule;
24+
import okhttp3.OkHttpClient;
25+
public class ReactNativeFlipper {
26+
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
27+
if (FlipperUtils.shouldEnableFlipper(context)) {
28+
final FlipperClient client = AndroidFlipperClient.getInstance(context);
29+
client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
30+
client.addPlugin(new ReactFlipperPlugin());
31+
client.addPlugin(new DatabasesFlipperPlugin(context));
32+
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
33+
client.addPlugin(CrashReporterPlugin.getInstance());
34+
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
35+
NetworkingModule.setCustomClientBuilder(
36+
new NetworkingModule.CustomClientBuilder() {
37+
@Override
38+
public void apply(OkHttpClient.Builder builder) {
39+
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
40+
}
41+
});
42+
client.addPlugin(networkFlipperPlugin);
43+
client.start();
44+
// Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
45+
// Hence we run if after all native modules have been initialized
46+
ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
47+
if (reactContext == null) {
48+
reactInstanceManager.addReactInstanceEventListener(
49+
new ReactInstanceManager.ReactInstanceEventListener() {
50+
@Override
51+
public void onReactContextInitialized(ReactContext reactContext) {
52+
reactInstanceManager.removeReactInstanceEventListener(this);
53+
reactContext.runOnNativeModulesQueueThread(
54+
new Runnable() {
55+
@Override
56+
public void run() {
57+
client.addPlugin(new FrescoFlipperPlugin());
58+
}
59+
});
60+
}
61+
});
62+
} else {
63+
client.addPlugin(new FrescoFlipperPlugin());
64+
}
65+
}
66+
}
67+
}

0 commit comments

Comments
 (0)