How to remove white screen after Splash screen in React Native for Android
I have a default react default project that I installed from this tutorial, and I added a splash screen with this tutorial to my project . However, I now get:
- photo with splash 0.5 secend
- then 1.5th white screen
- and after that my application started up,
What's the best and most standard way to solve this problem? I need a splash screen for 1 session and after that my application should start, I read more articles but couldn't find any fixes to react to native.
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".SplashActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:theme="@style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".MainActivity" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
source to share
First:
Runnpm react-native-splash-screen --save
Second step (plugin installation):
Automatic installation
react-native link react-native-splash-screen or rnpm link react-native-splash-screen
Manual
Android installation :
1: In your file, android/settings.gradle
make the following additions:
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
2: In your android / app / build.gradle file add the :react-native-splash-screen
act project :react-native-splash-screen
as a compile-time dependency:
...
dependencies {
...
compile project(':react-native-splash-screen')
}
3: Update the MainApplication.java file to use response react-native-splash-screen
with the following changes:
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SplashScreenReactPackage() //here
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
Sample code:
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
Linking,
} from 'react-native'
import SplashScreen from 'react-native-splash-screen'
export default class example extends Component {
componentDidMount() {
SplashScreen.hide();
}
render() {
return (
<TouchableOpacity
style={styles.container}
onPress={(e)=> {
Linking.openURL('http://www.devio.org/');
}}
>
<View >
<Text style={styles.item}>
SplashScreen 启动屏
</Text>
<Text style={styles.item}>
@：http://www.devio.org/
</Text>
<Text style={styles.item}>
GitHub:https://github.com/crazycodeboy
</Text>
<Text style={styles.item}>
Email:crazycodeboy@gmail.com
</Text>
</View>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f3f2f2',
marginTop: 30
},
item: {
fontSize: 20,
},
line: {
flex: 1,
height: 0.3,
backgroundColor: 'darkgray',
},
})
source to share
Here's another solution for ios and android: https://github.com/mehcode/rn-splash-screen . I hid the splash screen in the render function of my app.tsx (entry points) and showed the same image until all of my https requests were complete.
My code:
public render()
{
SplashScreen.hide();
//after everything has finished loading - show my app.
if (this.state.isFinishedloading)
{
return (
<this.navigator screenProps={{ ...providers }} />
);
}
// Until then show the same image as the splash screen with an ActivityIndicator.
return (
<View style={{ flex: 1 }}>
<Image style={styles.image} source={require('../assets/img/splash.png')} >
<ActivityIndicator style={styles.indicator} color="#fff"></ActivityIndicator>
</Image>
</View>
);
}
source to share
I went through this issue too. In my case, it was a redundant persistent library that was used to fetch persistent state from storage and feed it to reducers, and the process took almost 1 second during that second when it displayed a slightly white screen and then displayed the actual screen.
The work that I have used is that this control is hiding the splash on the javascript side you do to hide it.
componentDidMount() { SplashScreen.hide(); }
Just add a little delay and it will work fine.
componentDidMount() {
setTimeout(() => SplashScreen.hide() , 2000);
}
source to share
I fixed this by following the steps mentioned by @sergiulucaci on GitHub and it worked.
Go to Android / app / src / main / res / values /styles.xml.
Disable app preview as follows:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item> // <--- ADD THIS
// Other items...
</style>
</resources>
source to share