IN A nutshell
Sources for reference
https://www.npmjs.com/package/react-native-splash-screen
https://medium.com/@appstud/add-a-splash-screen-to-a-react-native-app-810492e773f9
https://apetools.webprofusion.com/#/
Generate a splash screen image
- Make a Splash screen in figma and export it as PNG
![](https://lh4.googleusercontent.com/m8bi7eJ32G537wa3UbfKdKb8OqjHnUkVpDfnsgrLWq2vGxA3AKYJtmlcKoLO2nxrM-UzEVw3xAGK-mgk4jTyEf0T9OYnuK1_DI-Bcl03bwBAgRHSWswG3VKaI_r1OpYNdpgyDGw7)
- Don’t give any white padding a round Splash screen as it will be generated automatically by the Splash screen generator
![](https://lh3.googleusercontent.com/fSitpxVGhtFIq_pCgKjI54pHbMqqAhWKAXBXIyQe6bR9hoQLboUfIYjS3OkRrgoy6l6ZwdxUZbR6PgMggIeQBCq756Tw8rYcmIJNKw7tLHyZFWmfSKzzWvx-FWm5pROfXjXo4kMe)
- 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
![](https://lh6.googleusercontent.com/X2_wpk1ITWZcc_mJpqJLczJTaNU4joiTyxBzh2hMemn-nCNnKOS3pZJnKiBqnrl7q1LCpPr6znL7jZNzQkrXGJ2H2sKpaeACz_HZOABM7yA_Kvbh4uzhTghG9d12LxCX1WEuraqG)
- 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
![](https://lh3.googleusercontent.com/pXZOZNGDHVOAfGNIOoMQXIxVx-KZ8KJCgcBxvDqkY_AuinBvXT9JhFw6u5j2cDZbf415XarQivXs0vyY2hAwj0VZ427E8SgoQYIoEjFTRJoZdWqPuf-ydYC0SvsHeyeSQgf47ykW)
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![](https://lh5.googleusercontent.com/0hJV-LtxCgXYaJDdzXv65_C-VaesIZZ0xSHRYNEtfG9L_pL3a1HKDuMS90xb3YgQPNxUmWK8MxLEUSvEloL3Q-mj8jxQ2Ed4Bw16WKhOk9m4WKvLGtZPRaXvljUZm32evvB_RePE)
- 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
![](https://lh5.googleusercontent.com/QOtQeHQewu8BhJf6X107NvXhi-rvvze2LMHGsgNRzwXGoGGO8FzDTXdXHKHFwm68sgZCcAyNZ3VFK24jWYpV3qF4gvA8-uH1XkPHyXbztC9gnLz2SCLR8mOMvr5DNmz4ionvdI1M)
- 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 (…)}
![](https://lh6.googleusercontent.com/yfj7YvmTzLoVeujb-j1LR3KxEpgG5exbzJFO8gei4g7h6BXxhahIi-Qk7ByGj_9c2XrXCIEmLXyCqZD0nlrKx-aSd9tAZycnIqyQdNlX4pvzhlT0g6ye5kYx7nFq5pg4e-QFqW46)
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.
![](https://lh6.googleusercontent.com/qEg4hLW3IaNCgVZ9DS3WA0tv-RrX_R4uituqAOUs5-v2dXiE6LC13najJSxHFYkb71eHS_udjzi_lbDGOi9NGMocgqEl7UUPWzMZP5pZPSzCbNY8MaP5RkIs0UqOjmnJXx1givGw)
- .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.
![](https://lh6.googleusercontent.com/O_WVQfoCYZswfBClLBkku88LsVbzkQeURIbLH2lTQGT4Cb4u_A29gH2E4kHNNs7ftL9TgX3AuQCUFYycM4OeuLpE-pfDc-Miw4XoLydy-wgZVPA0OZ88tYPuszuVq0P0z8Qtxz0Y)
- 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.
![](https://lh3.googleusercontent.com/VHMAbGixGSMYpgrqAYny5vZup_5s6rTyra4rKMI3TQsnxQ_9drQGgUomUJ_2YcRSfoVnxWJhgl0pYrSiI5JkFsLZs1xeQpTzjSLbPzBNlACj5nnopBAYA7h6_JhsAg8NspZuI_dE)