Build Real-world React Native App: Overview & Requirement

Build Real-world React Native App: Overview & Requirement

We will guide you to build a simple app that serves post from WordPress API. It covers essential topics in the React Native development cycle such as React Hook, React Navigation, Dark mode, Offline handler, In-app purchase, and Admob.

This series for beginner to intermediate level React Native developers will guide you to build a simple app that serves post from WordPress API. It covers essential topics in the React Native development cycle such as React Hook, React Navigation, Dark mode, Offline handler, In-app purchase, and Admob. This book aims to teach you how to create real-world monetizing app features that deliver use cases such as Admob and pay to remove ads. We’ll be covering basic to intermediate topics:

  • React Navigation
  • React Native Paper
  • Dark Mode
  • Offline Handler
  • Push notification
  • In-App Purchase
  • and more.

After you successfully complete this book, I guarantee that you will get your first feature-rich React Native app which you will be able to publish on the Play Store and App Store. Not to mention, make some money out of it.

The demo of the App is available on the Play Store: You can access it via the following link: https://play.google.com/store/apps/details?id=com.kriss

The demo of the App

The demo of the App

Chapter 1: Splash Screen and App Icon

This chapter will go through the integration of the Splash screen and an App icon to our React Native application in a simple way.

React native splash screen from ios and android

React native splash screen from ios and android

Chapter 2: Getting started with React Navigation

In this chapter, we are going to make use of React navigation version 5. This chapter will show the creation of stack navigation and tabs navigation with icons from the vector icons package.

React native paper home screen

React native paper home screen

Chapter 3: Home Screen with React native paper

In this chapter, we are going to use a react native paper package for UI components to create Flatlist, Itemtiles, and also implement pull to refresh and infinite scroll.

React native home screen with paper

React native home screen with paper

Chapter 4: Content placeholder

This chapter will navigate through the addition of content placeholders. The idea is to show the content placeholders while the content is being loaded from the server.

React native preloader

React native preloader

Chapter 5: Single Post screen

In this chapter, we are going to create a post screen that shows all the details of the post along with bookmark and share icons.

Single Post screen

Single Post screen

Chapter 6: Bookmark functionality

In this chapter, we are going to make use of the AsyncStorage module in order to save bookmark data by creating a simple CRUD operation. We are also going to show posts that have bookmarked in tabs.

React native bookmark with asyncstorage

React native bookmark with asyncstorage

Chapter 7: Display categories

Here, we are going to create a screen that shows categories of a different post. Then, show the posts based on those categories.

Display categoriesDisplay categories

Chapter 8: Feedback

In this chapter, we are going to use Formik and Yup packages in order to save feedbacks from end-users to the Firebase database then using cloud function forward the message to the inbox using Sendgrid.

Feedback screen

Feedback screen

Chapter 9: Dark mode

In this chapter, we are going to learn how to add dark mode to react-navigation and react-native paper with automatic and manual triggers. Lastly, we will use the react-native-darkmode package to trigger initial theme selection through operating system preference.

React native darkmode

React native darkmode

Chapter 10: Offline handle

In this chapter, we will learn how to use the React native NetInfo package to handle internet connectivity status in the app.

Offline mode

Offline mode

react-native mobile-apps programming developer

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.

How React Native Is Shaping Mobile 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.

Top React Native Mobile App Development Companies in USA

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.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

A Short Guide to React Native App Development

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.