We are going to implement the Splash Screen using the latest version of React Native and plugins. Major steps in this tutorial are going to take place in Xcode as we need to configure the iOS part of the app for displaying the Splash Screen.
In the first step, we are going to implement the Splash Screen using the latest version of React Native and plugins. Major steps in this tutorial are going to take place in Xcode as we need to configure the iOS part of the app for displaying the Splash Screen. The idea is to add the required splash screen icons and configure the native iOS app directory in the Xcode. We are going to make use of the react-native-splash-screen package in the React Native part as well as the iOS part to display the splash screen transition. Most of the work takes place in Xcode for configuring the splash screen and only some minor part is for the react-native side.
If we realize, there is already a default splash screen from react native project. But we are going to implement our own splash screen with our own logo icon for my site. For now, we have just put some text on the splash screen which is displayed in the emulator simulation below:
Here download the logo from this link first we use this for build icon
Then go to makeappicon drop file then fill email wait for file coming to an inbox
Make app icon site
Now we got icon set for Android and iOS in this one time
Generate icon set for android and ios
In this step, we are going to configure the app in Xcode in order to integrate the splash screen. First, we need to open our project on Xcode as shown in the screenshot below:
use terminal in VsCode for open Xcode project by this command:
After opening Xcode, we need to add an app icon to Xcode project as directed in the screenshot below:
Add app icon to xcode project
Next, we need to open the folder ./images.xcassest. Then, we need to choose AppIcon and replace the default icon with our new icon. Now, if we re-built our app, we will be able to see the new app icon as demonstrated in the screenshot below:
Change app icon
For the splash screen, we use the app icon that we downloaded earlier to generate an image set. We need to go to the Image Sets tab and drop the image. Lastly, we need to click generate to generate the image set as shown in the screenshot below:
Use app icon for splash screen
Now, we have the new image set for splash screen.
Back to Xcode, we need to select + in this top and choose New Image Set. We can name it as SplashScreen:
Add image set to xcode
Then, we need to drop new image set as directed in the screenshot below:
Use app icon in splash screen
Next, we need to open LunchScreen.xib and replace old text as shown in the screenshot below:
Build splash screen in xcode
Then, we need to add new *Image View *as directed in the screenshot below:
Add image view for build splash screen
Next, we need to choose the image set that we created before as shown in the highlighted section below:
Add app icon to splash screen
Lastly, we need to adjust the icon and splash screen size.
We need to make the image responsive to the screen size. For that, we need to follow the image below:
Make logo auto resize base on device
Finally, we are done with setting a new splash screen. We can rebuild the app to see the new splash screen:
Final result splash screen in iOS
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.
Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.
Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.
React Native is undoubtedly one of the most widely used cross-platform frameworks for creating native-like apps. This framework can be easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.