React Native Food Delivery App UI Clone #1 : Splash Screen Integration - Kriss

React Native Food Delivery App UI Clone #1 : Splash Screen Integration - Kriss

This is the first part of our implementation of the React Native Food Delivery app UI Clone tutorial series. This tutorial series was inspired by the <a...

This is the first part of our implementation of the React Native Food Delivery app UI Clone tutorial series. This tutorial series was inspired by the React native Food Delivery App template which provides an amazing Food Delivery app starter template written in React Native with many delicious features. Hence, anyone can make their own food delivery app for any restaurant with this beautiful food delivery restaurant app template. In any Food Delivery app, there must be the features for menu, food orders, reservations, etc. In this tutorial series, we will try to replicate the UI from the Food Delivery App template. In this part, we are going to implement the splash screen in the React Native app using the latest version of React Native and required plugins.

Overview

In this part, 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 our React Native Food Delivery App App UI clone project. For now, we have just put some text on the splash screen which is displayed in the emulator simulation below:

Animated GIF

For this tutorial series, we have the Scooter logo icon which we are going to integrate into the splash screen. The download link for the logo is provided below:

Scooter free vector icons designed by Freepik

Download this free icon in SVG, PSD, PNG, EPS format or as webfonts. Flaticon, the largest database of free vector icons.

Installing Splash Screen package

Here, we are going to install the react-native-splash-screen package into our project. The react-native-splash-screen package provides us with a splash screen API for react-native which can programmatically hide and show the splash screen. This package works for both iOS as well as Android platforms. All the configuration for the React Native part as well as the native part is provided in the documentation. Now, to install the package, we need to use the following command:

>>>yarn add react-native-splash-screen

Now, we need to link this package if it is not linked automatically. If the installation does not work, we can check the documentation for manual configuration.

Now, we need to update the pod. For that, we need to go to the iOS folder and run the following commands:

>>>cd ios 

>>>pod update

Configuring Splash Screen in Xcode

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:

Read More...

The post Food Delivery App UI Clone in React Native # 1: Splash Screen Integration appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase products or services from different links provided in this article.

react reactnative mobileapp

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Share Code Between React Native and React JS

React provides support for the server-side and frontend. Today, React development services are in demand as more and more organizations are considering software solutions that are crafted from the framework.

Validating React Forms With React-Hook-Form

In this article we will learn how to Validating React Forms With React-Hook-Form . Validating inputs is very often required. For example, when you want to make sure two passwords inputs are the same, an email input should in fact be an email or that the input is not too long

How React Hooks can replace React Router

Looking to learn more about hookrouter and how it works? Follow along with this tutorial to learn more.