Generate a splash screen image

• Make a Splash screen in figma and export it as PNG
• Don’t give any white padding a round Splash screen as it will be generated automatically by the Splash screen generator 
• Open any generator site like in my case I am using app tools https://apetools.webprofusion.com/#/
• https://appicon.co/#image-sets (alternative)
• Check these options and click kapow
• Download the zip file generated
• Paste the contents of a file in the res folder of your app ie. mainApp\android\app\src\main\res

React native Splash screen Android Folder setup

• Now install react-native-splash-screen by command

Yarn add react-native-splash-screen

• Now open main activity dot Java file inside mainApp\android\app\src\main\java\com\mainapp
•  and edit the file like this, save and close it

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 {

  @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/screen” android:scaleType=“centerCrop” />

RelativeLayout

• 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

• Lastly at this code to your name app.js on use effect to hide the Splash screen on app loads

import SplashScreen from  “react-native-splash-screen”;

 const App  = () => {

  //Hide Splash screen on app load.

   React.useEffect(() => {

     SplashScreen.hide();

   });   return (…)}

Sources for reference

• https://www.npmjs.com/package/react-native-splash-screen
• https://blog.logrocket.com/building-a-splash-screen-in-react-native/#whyimagesizematters
• https://medium.com/@appstud/add-a-splash-screen-to-a-react-native-app-810492e773f9
• https://apetools.webprofusion.com/#/

Here we will take a screenshot of the screen or part of the screen and share it on the share api.

• installation : yarn add react-native-view-shot
•  now import the plugin in your component

import ViewShot from ‘react-native-view-shot’;

• Now wrap the View or part you want to capture inside ViewShot
• here is the function used to fire screenshot api.
• .capture() function returns a promise with url of the screenshot present in cache.

Which we use further for our usecase such as sharing it directly.

• You can also omit the components you don’t want to show in the screenshot like here I have removed the share Button known as FAB and written outside of the view shot company. But its using absolute positioning to render above the view.

• Reference this for the code https://www.gkmit.co/blog/mobile-development/capture-and-share-screenshot-in-react-native