I am beginner in react native so may be my question seems silly to all experts.
but I am struggling with a basic feature that i want to implement that i want to start my
You can always do it the native way:
Fisrt you need images for displaying your splashscreen on different devices:
They need to be png
format, then put them on android/app/src/main/res/drawable
and create a folder named with the resolution of each image. Ex: drawable/drawable-hdpi
.
Then in the drawable folder you have to create a file named background_splash.xml
and put something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="fill"
android:src="@drawable/screen"/>
</item>
</selector>
After that you have to add a new style in android/app/res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
</style>
</resources>
Update your AndroidManifest.xml
file adding a new activity called SplashActivity
and add android:theme="@style/SplashTheme"
. Now create a empty activity with the name MainActibity
. Your AndroidManifest.xml
should look something like this:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.exampleapp"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-sdk
android:minSdkVersion="23"
android:targetSdkVersion="26" />
<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: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"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:exported=”true”
/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
Now we need to tell SplashActivity to go to the MainActivity, which represents our actual application. To do that you need to create a new Java class named SplashActivity
.
package com.exampleapp; // change to the name of your app.
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
And now you should see a splashscreen.
https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae
You may try this example.There is no need stacknavigator in splash screen.
constructor(props){
super(props);
this.state = {
timePassed: false,
};
}
componentDidMount() {
setTimeout( () => {
this.setTimePassed();
},1000);
}
setTimePassed() {
this.setState({timePassed: true});
}
render() {
if (!this.state.timePassed) {
return <SplashScreen/>;
} else {
return <Login/>;
}
}
Just Follow this Simple Code.
App.js
import { createStackNavigator,createAppContainer } from "react-
navigation";
import Splash from "./Controller/Splash";
import Login from "./Controller/Login";
import Register from "./Controller/Register";
const Navigator = createStackNavigator ({
main: { screen: Splash },
LoginScreen: { screen : Login },
});
const AppNavigator = createAppContainer(Navigator);
export default class App extends Component {
render() {
return <AppNavigator />;
}
}
Splash.js
import React, { Component } from "react";
import {View, Text } from "react-native";
export class Splash extends Component {
componentDidMount() {
setTimeout(() => {
this.load();
}, 4000);
}
load = () => {
this.props.navigation.push("LoginScreen");
};
render() {
return (
<View >
<Text style={styles.myText}>Splash Screen</Text>
</View>
);
}
}
export default Splash;
Hope this Helps :)
The correct way to make a Splash Screen in react is to modify root routes.
Firstable you need to create the image for your app. You can do this really fast by uploading your image in the site https://apetools.webprofusion.com/app/#/ where it will create a bundle file with all the images for iOs, windows & android and put them in folders for each device. You need to copy those folders to the route of each device, in case you have any folder created, replace it.
Route
{device}/app/src/main/res/{folder-name}
In the drawable folder in route {device}/app/src/main/res/drawable
you'll have icon.png
& screen.png
and create a file named
splash_background.xml
in this file add the next text
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="fill"
android:src="@drawable/screen"
/>
</item>
</selector>
In the route {device}/app/src/main/java/com/{name-of-project}
add a file named SplashActivity.java
In this file SplashActivity.java
add the next:
package com.prework;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
In the route {device}/app/src/main/res/values/styles.xml
change it as follow:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash_background</item>
</style>
</resources>
And in the route {device}/app/src/main/res/AndroidManifest.xml
change it as follow
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.prework">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@drawable/icon"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".SplashActivity"
android:label="@string/app_name"
android:theme="@style/SplashTheme"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
Now rebuild your app by running in the command line react-native run-android
That's how I do it:
Create a component for your splash screen and place it at the bottom of your App.js, something like:
return (
<>
<SafeAreaView style={{ flex: 1 }}>
<StatusBar/>
<Navigator/>
</SafeAreaView>
<SplashScreen/>
</>
)
Your <SplashScreen />
can be something like:
import React, { useEffect, useState } from 'react'
import { Image, StatusBar, Text, Animated } from 'react-native'
const SplashScreen = ({ }) => {
const [done, setdone] = useState(false)
const animationOpacity = React.useRef(new Animated.Value(1)).current
const animationScale = React.useRef(new Animated.Value(1)).current
if (done) return null
function hideAnimation() {
Animated.parallel([
Animated.timing(animationOpacity, {
toValue: 0,
delay: 1000,
duration: 400,
useNativeDriver: true
}),
Animated.timing(animationScale, {
toValue: 10,
delay: 1000,
duration: 400,
useNativeDriver: true
})
]).start(() => setdone(true))
}
hideAnimation()
return (
<Animated.View style={{
backgroundColor: 'black',
...StyleSheet.absoluteFill,
justifyContent: 'center',
alignItems: 'center',
opacity: animationOpacity,
}}>
<StatusBar
backgroundColor={COLOR.PRIMARY}
barStyle='light-content'
/>
<Animated.View
style={{
justifyContent: 'center',
alignItems: 'center',
opacity: animationOpacity,
transform: [{ scale: animationScale }]
}}
>
<Image /> // some image or icon
<Text>Some text</Text>
</Animated.View>
</Animated.View>
)
}
export default SplashScreen
Adjust the Animation params, backgroundColor, Image, Text
according to your needs.