How to install a screensaver for an interactive android

Question

How to install a screensaver for an interactive android, I can not find anything on this topic, and I thought it was strange.

thanks

Answer 1

I tried three of the following ways. The first one is what I am currently using for the android popup screen for responsive projects.

• Using npm package written by others.

  link: https://github.com/remobile/react-native-splashscreen

• Create a SplashScreen component and redirect it later.

  link: How to create a splash screen / Launch screen that disappears after loading the application? (React Native)

• Native java code.

  link: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

I have a fetch request in componentDidMount() from initialRoute .

Using the first method from the above list performs a query when a splash screen is displayed.

While the second method should wait until the SplashScreen component is removed.

The third way is a bit more codes for writing and support.

Answer 2

This lesson works fine here - I quoted it and changed it a bit, added a touch on react-native-background-color .

https://medium.com/react-native-development/change-splash-screen-in-react-native-android-app-74e6622d699 (which is based on this https://www.bignerdranch.com/blog/splash- screens-the-right-way / - so this is a native Android technique)

1. You need to create a splash screen in res / drawable. Let's call it splash_screen.xml

    <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white"/> <item> <bitmap android:gravity="center" android:src="@mipmap/ic_launcher"/> </item> </layer-list> 

2. Now you need to update 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="AppTheme"> <item name="android:windowBackground">@drawable/splash_screen</item> </style> </resources> 

3. Now open AndroidManifest.xml and replace AppTheme with SplashTheme in MainActivity

    <activity android:name=".MainActivity" 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> 

   We use SplashTheme instead of updating AppTheme to add this background only for the beginning of activity and to leave other elements without changes.

4. After you try the above, you will notice that the splash screen will always remain under your js views. You have two options for hiding the screensaver:

   • To set the background color that will delete the image, use the Reaction-native-background-color module from https://github.com/ramilushev/react-native-background-color . (This is the recommended method, because when the keyboard is displayed in some cases, it makes the root view visible for a split second.)
   • Or set a solid (opaque) background color in the root view.

Pay attention to what the "root view" means. This is the very first <View> that you render in your application that you control (this means that you can style it).

Custom color

If you want to use a custom color other than @android:color/*** , then you need to create colors.xml in android\app\src\main\res\values\colors.xml and define colors like this:

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="foobar">#ca949b</color> </resources> 

You can use any name and any color code.

Then in splash_screen.xml we update <item android:drawable="@android:color/white" /> to <item android:drawable="@color/foobar" />

Additional background removal information for the rear screen saver

Once you have created a surge like this. You will notice that the image remains forever in the background. To remove this image, use this module - https://github.com/ramilushev/react-native-background-color - and call BackgroundColor.setColor('#XXXXXX') any color. This will delete the image.

Instead of using the opaque color in the root view to cover the splash, it is still recommended to use the above module, because when the keyboard shows, the background view is displayed for a split second.

Answer 3

Have you tried to use this ? I came across this a few days ago. It works fine on iOS, but I haven't tested it on Android yet. You must have the node> = 6 and imageMagic installed. (for Mac: brew install imagemagic )

 npm install -g yo generator-rn-toolbox yo rn-toolbox:assets --splash IMGAE --android 

Answer 4

This worked for me. How to add a pop-up screen to a React Native app (iOS and Android)

It's pretty straight forward

Answer 5

All you have to do is call the function on the splash screen.

 componentWillMount() { setTimeout(() => { this.props.navigation.navigate('Login') }, 1000); }