Skip to content

Commit 716f415

Browse files
mrousavymrousavy
committed
Add Android setup guide
1 parent 9949341 commit 716f415

File tree

2 files changed

+162
-0
lines changed

2 files changed

+162
-0
lines changed

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,19 @@ npx pod-install
2828
2929
> 🎉 [v1.0](https://github.com/mrousavy/react-native-multithreading/releases/tag/1.0.0) with Android support is here! 🎉
3030
31+
### iOS
32+
33+
Run:
34+
35+
```sh
36+
cd ios
37+
pod install
38+
```
39+
40+
### Android
41+
42+
Since JSI is not officially released, an extra installation step will be required for Android. Follow the [SETUP.md](./SETUP.md) guide.
43+
3144
## Why
3245

3346
Since [JSI](https://github.com/react-native-community/discussions-and-proposals/issues/91) is becoming more mainstream, there might be functions that are actually blocking and take a while to execute. For example, a storage library like [my react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) or an SQLite JSI library might take a few milliseconds to execute a complex call. You don't want your entire React-JS thread to freeze when doing that, since users will perceive a noticeable lag or freeze.

‎SETUP.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# Setup Guide
2+
3+
## iOS
4+
5+
Run:
6+
7+
```sh
8+
cd ios
9+
pod install
10+
```
11+
12+
## Android
13+
14+
Since pure JSI Modules cannot be autolinked yet, you have to manually initialize them.
15+
16+
### Without react-native-mmkv (or other JSI libs)
17+
18+
1. Open your app's `MainApplication.java`
19+
2. Add the following code:
20+
```diff
21+
package com.example.reactnativemultithreading;
22+
23+
import android.app.Application;
24+
import android.content.Context;
25+
import com.facebook.react.PackageList;
26+
import com.facebook.react.ReactApplication;
27+
import com.facebook.react.ReactNativeHost;
28+
import com.facebook.react.ReactPackage;
29+
import com.facebook.react.ReactInstanceManager;
30+
import com.facebook.soloader.SoLoader;
31+
import java.lang.reflect.InvocationTargetException;
32+
import java.util.List;
33+
34+
+import com.reactnativemultithreading.MultithreadingJSIModulePackage;
35+
+import com.facebook.react.bridge.JSIModulePackage;
36+
37+
public class MainApplication extends Application implements ReactApplication {
38+
39+
private final ReactNativeHost mReactNativeHost =
40+
new ReactNativeHost(this) {
41+
@Override
42+
public boolean getUseDeveloperSupport() {
43+
return BuildConfig.DEBUG;
44+
}
45+
46+
@Override
47+
protected List<ReactPackage> getPackages() {
48+
@SuppressWarnings("UnnecessaryLocalVariable")
49+
List<ReactPackage> packages = new PackageList(this).getPackages();
50+
// Packages that cannot be autolinked yet can be added manually here, for MultithreadingExample:
51+
// packages.add(new MyReactNativePackage());
52+
packages.add(new MultithreadingPackage());
53+
return packages;
54+
}
55+
56+
@Override
57+
protected String getJSMainModuleName() {
58+
return "index";
59+
}
60+
61+
+ // TODO: Remove this when JSI Modules can be autoinstalled (maybe RN 0.65)
62+
+ @Override
63+
+ protected JSIModulePackage getJSIModulePackage() {
64+
+ return new MultithreadingJSIModulePackage();
65+
+ }
66+
};
67+
```
68+
69+
### With react-native-mmkv (or other JSI libs)
70+
71+
1. Open your project in Android Studio
72+
2. Open the folder where `MainApplication.java` lives (`src/main/java/...`)
73+
3. Right click the folder, **New** > **Java class**
74+
4. Call it whatever you prefer, in my case it's `ExampleJSIPackage` because my app is called "Example"
75+
5. Add the following code:
76+
77+
```java
78+
package com.example;
79+
80+
import com.facebook.react.bridge.JSIModuleSpec;
81+
import com.facebook.react.bridge.JavaScriptContextHolder;
82+
import com.facebook.react.bridge.ReactApplicationContext;
83+
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
84+
import com.reactnativemmkv.MultithreadingModule;
85+
86+
import java.util.Collections;
87+
import java.util.List;
88+
89+
// TODO: Remove all of this when JSI Modules can be autoinstalled (maybe RN 0.65)
90+
public class ExampleJSIPackage extends ReanimatedJSIModulePackage {
91+
@Override
92+
public List<JSIModuleSpec> getJSIModules(ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext) {
93+
super.getJSIModules(reactApplicationContext, jsContext);
94+
MultithreadingModule.install(reactApplicationContext, jsContext);
95+
return Collections.emptyList();
96+
}
97+
}
98+
```
99+
6. Replace `com.example` (first line) with the correct package name
100+
7. Replace `ExampleJSIPackage` with the file name you chose in step 4.
101+
8. Open `MainApplication.java` and find the location where the `ReactNativeHost` is initialized. You have to override it's `getJSIModulePackage` method:
102+
```diff
103+
package com.example.reactnativemultithreading;
104+
105+
import android.app.Application;
106+
import android.content.Context;
107+
import com.facebook.react.PackageList;
108+
import com.facebook.react.ReactApplication;
109+
import com.facebook.react.ReactNativeHost;
110+
import com.facebook.react.ReactPackage;
111+
import com.facebook.react.ReactInstanceManager;
112+
import com.facebook.soloader.SoLoader;
113+
import java.lang.reflect.InvocationTargetException;
114+
import java.util.List;
115+
116+
+import com.example.ExampleJSIPackage;
117+
+import com.facebook.react.bridge.JSIModulePackage;
118+
119+
public class MainApplication extends Application implements ReactApplication {
120+
121+
private final ReactNativeHost mReactNativeHost =
122+
new ReactNativeHost(this) {
123+
@Override
124+
public boolean getUseDeveloperSupport() {
125+
return BuildConfig.DEBUG;
126+
}
127+
128+
@Override
129+
protected List<ReactPackage> getPackages() {
130+
@SuppressWarnings("UnnecessaryLocalVariable")
131+
List<ReactPackage> packages = new PackageList(this).getPackages();
132+
// Packages that cannot be autolinked yet can be added manually here, for MultithreadingExample:
133+
// packages.add(new MyReactNativePackage());
134+
packages.add(new MultithreadingPackage());
135+
return packages;
136+
}
137+
138+
@Override
139+
protected String getJSMainModuleName() {
140+
return "index";
141+
}
142+
143+
+ // TODO: Remove this when JSI Modules can be autoinstalled (maybe RN 0.65)
144+
+ @Override
145+
+ protected JSIModulePackage getJSIModulePackage() {
146+
+ return new ExampleJSIModulePackage();
147+
+ }
148+
};
149+
```

0 commit comments

Comments
 (0)