Banner Image

How to take screenshot and share it in react native

Dashrath Singh
April 27, 2022
2 Minutes Read



Banner Image

Looking for other services or solutions?

ux/ui image
Explore our services

IN A nutshell

Sources for reference

Building a splash screen in React Native

IN A nutshell

Sources for reference

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
  • (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 {


  protected String getMainComponentName() {

    return “MySplashScreen”;



    protected void onCreate(Bundle savedInstanceState) {;  // here




  • 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=“”

    android:orientation=“vertical” android:layout_width=“match_parent”


    <ImageView android:layout_width=“match_parent” android:layout_height=“match_parent” android:src=“@drawable/screen” android:scaleType=“centerCrop” />


  • 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”?>


    <color name=“primary_dark”>#000000</color>


  • 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(() => {


   });   return (…)}

Sources for reference


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.