React Native Plant App UI #3 : Build Welcome Screen

React Native Plant App UI #3 : Build Welcome Screen

x This tutorial is the third part of our React Native Plant App tutorial series.

This tutorial is the third part of our React Native Plant App tutorial series. In the previous part, we successfully implemented all the components in our './components' folder. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project.

In case of wanting to learn from the beginning, all the parts for this tutorial series are available below:

As mentioned in the previous parts, this tutorial series was inspired by the React Native App Templates that accommodates a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this third part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly but without any verbal guidance. This tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations.

Overview

In this third part of this tutorial series, we are going to implement some UI portions of the Welcome Screen. The idea is to start by implementing the Welcome Screen Header/Slogan section. Then, we are going to section out the different UI sections that we are going to implement in the Welcome screen in the form of functions. Lastly, we are going to add different buttons on the Welcome screen along with the navigation config.

So, let us begin!!

reactnative

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

A ReactNative Scrollable Stretchy Header Component

A ReactNative scrollable stretchy header component.react-native-stretchy

ReactNative: Native Photo Editor (Android/iOS)

react-native-photo-editor ReactNative: Native Photo Editor (Android/iOS)

A iOS style picker and datepicker components for ReactNative

react-native-best-wheel-datepicker .Fixed wheel date picker for Android and IOS .A iOS style picker and datepicker components for ReactNative

Standardizing how components are spaced in ReactNative

Using margin and padding to control spacing between components introduces too many ways to accomplish the same goal. React Native Spacing System seeks to standardize your React Native code and increase legibility though the usage of spacing components.

ReactNative: Native Bottom Action Sheet (Android/iOS)

ReactNative: Native Bottom Action Sheet (Android/iOS) .A simple library that creates native BottomSheet actions according to the Material Design Specs