# Android

**Android**

Similarly, changing the splash screen in Android is done natively to boost startup performance tremendously. To change the splash screen of our React Native templates, locate the **android/app/src/main/res/launch\_screen.xml** and make changes there.

You can open the android project in Android Studio, if you want to use the interface builder (drag-and-drop) to make visual changes to the launch screen.

Now let’s demonstrate how to build a splash screen for Android in React Native.

Next, create a file called `launch_screen.xml` in `app/src/main/res/layout` (create the `layout`-folder if it doesn’t exist). Add the code below to the `launch_screen.xml`:<br>

Now let’s demonstrate how to build a splash screen for Android in React Native.

Navigate into the `Android` folder, select `app`, `src,` `main`, `java`, and open `MainActivity.java`. Update `MainActivity.java` to use `react-native-splash-screen` with the code below:

```
package com.mysplashscreen;
import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // here
public class MainActivity extends ReactActivity {
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "MySplashScreen";
  }

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
}
```

Next, create a file called `launch_screen.xml` in `app/src/main/res/layout` (create the `layout`-folder if it doesn’t exist). Add the code below to the `launch_screen.xml`:

```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>
```

Note: The `android:src="@drawable/launch_screen"` is equivalent to `<img src="your_image" />` in HTML so be sure to replace the `launch_screen` with the actual name of the image you generated from `Appicon`.

Copy all the assets for `Android` into the `res` folder. Create `colors.xml` in the values folder and add a color called `primary_dark` in `app/src/main/res/values/colors.xml`.

```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>
```

Open the `Android` folder in `Android Studio`, open `AVD`, and run your application as shown below. If everything is set up correctly, you should see a result similar to the following screenshot:

![React Native Splash Screen: LaunchScreen Android](https://blog.logrocket.com/wp-content/uploads/2021/03/react-native-splash-screen-android.png)

Lastly, to hide the splash screen on app load, you’ll need to do two things:

1. Import the `react-native-splash-screen` package into the root component (`App.js`) of your React Native app
2. Use `React.useEffect()` to hide the splash screen with the code below:

   ```
   /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    *
    * @format
    * @flow strict-local
    */

    import React from 'react';
    import {
      TouchableOpacity, View
    } from 'react-native';
    import {NavigationContainer, DefaultTheme } from '@react-navigation/native';
    //Import react-native-splash-screen.
    import SplashScreen from  "react-native-splash-screen";
    
    
    
    import {Login} from "./screens";
    
    const theme = {
      ...DefaultTheme,
      colors:{
        ...DefaultTheme.colors,
        border: "transparent",
      }
    }
    
    
    const App  = () => {
    
     //Hide Splash screen on app load.
      React.useEffect(() => {
        SplashScreen.hide();
      });
      
      return (
        
            
              
            
        
    );
    };
    
    
    
    export default () => {
      return ;
    };
   ```

<br>

Thanks to [LogRocket](https://logrocket.com/) I learned this about React Native, and of course thanks [to his Blog](https://blog.logrocket.com/), also to the tutorials the [Emmanuel Etukudo](https://blog.logrocket.com/author/emmanueletukudo/) tutorial