react-native-bootsplash 4.0.0-beta.1 → 4.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -15,9 +15,14 @@ Show a bootsplash during app startup. Hide it when you are ready.
|
|
|
15
15
|
|
|
16
16
|
<p>
|
|
17
17
|
<img height="520" src="https://raw.githubusercontent.com/zoontek/react-native-bootsplash/HEAD/docs/ios_demo.gif?raw=true" alt="iOS demo"></img>
|
|
18
|
-
<img
|
|
18
|
+
<img height="500" src="https://raw.githubusercontent.com/zoontek/react-native-bootsplash/HEAD/docs/android_demo.gif?raw=true" alt="android demo"></img>
|
|
19
19
|
</p>
|
|
20
20
|
|
|
21
|
+
**⚠️ You are currently reading the 4.x version documentation, which is still in beta.**<br>
|
|
22
|
+
**For the stable version, check the [`3.2.6` tag `README.md`](https://github.com/zoontek/react-native-bootsplash/tree/3.2.6).**
|
|
23
|
+
|
|
24
|
+
**For migration from the v3, check the [`MIGRATION.md` file](https://github.com/zoontek/react-native-bootsplash/blob/master/MIGRATION.md).**
|
|
25
|
+
|
|
21
26
|
## Support
|
|
22
27
|
|
|
23
28
|
| version | react-native version |
|
|
@@ -28,16 +33,16 @@ Show a bootsplash during app startup. Hide it when you are ready.
|
|
|
28
33
|
## Installation
|
|
29
34
|
|
|
30
35
|
```bash
|
|
31
|
-
$ npm install --save react-native-bootsplash
|
|
36
|
+
$ npm install --save react-native-bootsplash@next
|
|
32
37
|
# --- or ---
|
|
33
|
-
$ yarn add react-native-bootsplash
|
|
38
|
+
$ yarn add react-native-bootsplash@next
|
|
34
39
|
```
|
|
35
40
|
|
|
36
41
|
Don't forget going into the `ios` directory to execute a `pod install`.
|
|
37
42
|
|
|
38
43
|
## 🆘 Manual linking
|
|
39
44
|
|
|
40
|
-
Because this package targets React Native 0.65.0+, you
|
|
45
|
+
Because this package targets React Native 0.65.0+, you probably don't need to link it manually. But if you have a special case, follow these additional instructions:
|
|
41
46
|
|
|
42
47
|
<details>
|
|
43
48
|
<summary><b>👀 See manual linking instructions</b></summary>
|
|
@@ -116,7 +121,7 @@ Generate a launch screen using an original logo file
|
|
|
116
121
|
|
|
117
122
|
Options:
|
|
118
123
|
--background-color <color> color used as launch screen background (in hexadecimal format) (default: "#fff")
|
|
119
|
-
--logo-width <width> logo width at @1x (in dp - we
|
|
124
|
+
--logo-width <width> logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
|
|
120
125
|
--assets-path [path] path to your static assets directory (useful to require the logo file in JS)
|
|
121
126
|
--flavor <flavor> [android only] flavor build variant (outputs in an android resource directory other than "main")
|
|
122
127
|
-h, --help output usage information
|
|
@@ -201,65 +206,78 @@ Set the `BootSplash.storyboard` as launch screen file:
|
|
|
201
206
|
buildscript {
|
|
202
207
|
ext {
|
|
203
208
|
buildToolsVersion = "30.0.2"
|
|
204
|
-
minSdkVersion = 23 // <-
|
|
209
|
+
minSdkVersion = 23 // <- AndroidX splashscreen has basic support for 21 (only the background color), so 23 is best
|
|
205
210
|
compileSdkVersion = 31 // <- set at least 31
|
|
206
211
|
targetSdkVersion = 31 // <- set at least 31
|
|
207
212
|
|
|
208
213
|
// …
|
|
209
214
|
```
|
|
210
215
|
|
|
211
|
-
2.
|
|
216
|
+
2. Then edit your `android/app/build.gradle` file:
|
|
217
|
+
|
|
218
|
+
```gradle
|
|
219
|
+
dependencies {
|
|
220
|
+
implementation fileTree(dir: "libs", include: ["*.jar"])
|
|
221
|
+
//noinspection GradleDynamicVersion
|
|
222
|
+
implementation "com.facebook.react:react-native:+" // From node_modules
|
|
223
|
+
|
|
224
|
+
implementation "androidx.core:core-splashscreen:1.0.0-alpha02" // Add this line
|
|
225
|
+
|
|
226
|
+
// …
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
3. Edit your `android/app/src/main/res/values/styles.xml` file:
|
|
212
230
|
|
|
213
231
|
```xml
|
|
214
232
|
<resources>
|
|
215
233
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
234
|
+
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
235
|
+
<!-- Your base theme customization -->
|
|
236
|
+
</style>
|
|
219
237
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
238
|
+
<!-- BootTheme should inherit from Theme.SplashScreen -->
|
|
239
|
+
<style name="BootTheme" parent="Theme.SplashScreen">
|
|
240
|
+
<item name="windowSplashScreenBackground">@color/bootsplash_background</item>
|
|
241
|
+
<item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
|
|
242
|
+
<item name="postSplashScreenTheme">@style/AppTheme</item>
|
|
243
|
+
</style>
|
|
226
244
|
|
|
227
245
|
</resources>
|
|
228
246
|
```
|
|
229
247
|
|
|
230
|
-
|
|
248
|
+
4. Edit your `android/app/src/main/AndroidManifest.xml` file:
|
|
231
249
|
|
|
232
250
|
```xml
|
|
233
251
|
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
|
234
252
|
package="com.rnbootsplashexample">
|
|
235
253
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
254
|
+
<!-- … -->
|
|
255
|
+
|
|
256
|
+
<application
|
|
257
|
+
android:name=".MainApplication"
|
|
258
|
+
android:label="@string/app_name"
|
|
259
|
+
android:icon="@mipmap/ic_launcher"
|
|
260
|
+
android:roundIcon="@mipmap/ic_launcher_round"
|
|
261
|
+
android:allowBackup="false"
|
|
262
|
+
android:theme="@style/BootTheme"> <!-- Replace @style/AppTheme with @style/BootTheme -->
|
|
263
|
+
<activity
|
|
264
|
+
android:name=".MainActivity"
|
|
265
|
+
android:label="@string/app_name"
|
|
266
|
+
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
|
|
267
|
+
android:launchMode="singleTask"
|
|
268
|
+
android:windowSoftInputMode="adjustResize"
|
|
269
|
+
android:exported="true"> <!-- Add android:exported="true" -->
|
|
270
|
+
<intent-filter>
|
|
271
|
+
<action android:name="android.intent.action.MAIN" />
|
|
272
|
+
<category android:name="android.intent.category.LAUNCHER" />
|
|
273
|
+
</intent-filter>
|
|
274
|
+
</activity>
|
|
275
|
+
</application>
|
|
258
276
|
</manifest>
|
|
259
277
|
|
|
260
278
|
```
|
|
261
279
|
|
|
262
|
-
|
|
280
|
+
5. Finally edit your `android/app/src/main/java/com/yourprojectname/MainActivity.java` file:
|
|
263
281
|
|
|
264
282
|
```java
|
|
265
283
|
import com.facebook.react.ReactActivity;
|
|
@@ -349,7 +367,7 @@ function App() {
|
|
|
349
367
|
|
|
350
368
|
### Testing with Jest
|
|
351
369
|
|
|
352
|
-
Testing code which uses this library
|
|
370
|
+
Testing code which uses this library requires some setup since we need to mock the native methods.
|
|
353
371
|
|
|
354
372
|
To add the mocks, create a file _jest/setup.js_ (or any other file name) containing the following code:
|
|
355
373
|
|
|
@@ -390,8 +408,6 @@ function App() {
|
|
|
390
408
|
|
|
391
409
|
## 🕵️♂️ Comparison with [react-native-splash-screen](https://github.com/crazycodeboy/react-native-splash-screen)
|
|
392
410
|
|
|
393
|
-
- If `react-native-splash-screen` encourages you to display an image over your application, `react-native-bootsplash` way-to-go is to design your launch screen using platforms tools
|
|
394
|
-
|
|
411
|
+
- If `react-native-splash-screen` encourages you to display an image over your application, `react-native-bootsplash` way-to-go is to design your launch screen using platforms tools.
|
|
395
412
|
- It should not prevent you from seeing red screen errors.
|
|
396
|
-
|
|
397
413
|
- Hiding the launch screen is configurable: fade it out or hide it without any animation at all (no fade needed if you want to animate it out!).
|
|
@@ -76,7 +76,7 @@ public class RNBootSplashModule extends ReactContextBaseJavaModule implements Li
|
|
|
76
76
|
|
|
77
77
|
mSplashScreen.setOnExitAnimationListener(new SplashScreen.OnExitAnimationListener() {
|
|
78
78
|
@Override
|
|
79
|
-
public void onSplashScreenExit(@NonNull SplashScreenViewProvider splashScreenViewProvider) {
|
|
79
|
+
public void onSplashScreenExit(@NonNull final SplashScreenViewProvider splashScreenViewProvider) {
|
|
80
80
|
View splashScreenView = splashScreenViewProvider.getView();
|
|
81
81
|
|
|
82
82
|
splashScreenView
|
package/ios/RNBootSplash.m
CHANGED
package/package.json
CHANGED
package/react-native.config.js
CHANGED
|
@@ -16,7 +16,7 @@ module.exports = {
|
|
|
16
16
|
{
|
|
17
17
|
name: "--logo-width <width>",
|
|
18
18
|
description:
|
|
19
|
-
"logo width at @1x (in dp - we
|
|
19
|
+
"logo width at @1x (in dp - we recommend approximately ~100)",
|
|
20
20
|
default: 100,
|
|
21
21
|
parse: (value) => parseInt(value, 10),
|
|
22
22
|
},
|