Blog - React Native

1.1 Getting Started with React Native

In this tutorial, you will set up the create-react-native-app for scaffolding a React Native starter application on your computer. Also this will use the Expo framewo ...

Read

1.2 Hello Components

In this tutorial, you will create the first Hello component. Also, this will use the state and props for React component ...

Read

1.3 React Components Part 1

In this tutorial, you will learn some basics of how React Native components are just React components. You will make use of the built-in React Native components to design ...

Read

1.4 React Components Part 2

In this tutorial, you will continue to develop the app by adding another component, and understand how you can respond to user interactions with the UI. At the end of ...

Read

1.5 React Navigation Part 1

In this tutorial, we will explore navigation support for our React Native application using React Navigation, providing mobile app like navigation among the views. At...

Read

1.6 React Navigation Part 2

In this tutorial, we continue to develop navigation support for our application. We explore the use of side drawer set up with React Navigation's Drawer Navig...

Read

1.7 React Navigation Part 3

In this tutorial, we will update our Home component to display useful information. At the end of this tutorial, you will be able to set up another Component within your app...

Read

1.8 Assignment 1

In this assignment, you will complete the remaining two components, About Us and Contact Us, that you will add to the application. You will use the Card layout that we created...

Read

2.1 Icon, Font and Buttons Part 1

In this tutorial, you will learn about using buttons and icons in buttons. You will also learn how to respond to button clicks. At the end of this tutorial, you w...

Read

2.2 Icon, Font and Buttons Part 2

In this tutorial, you will learn about using buttons and icons in buttons. You will also learn to customize the side drawer. At the end of this tutorial, you w...

Read

2.3 Setting up a Server using json-server

In this tutorial, you will establish a simple server using the json-server node module. At the end of this tutorial, you will be able to:...

Read

2.4 Using Redux in React Native App Part 1

In this tutorial, you will set up Redux in your React Native application. And you will connect to Redux and obtain the state informations such as leaders from there. At th..

Read

2.5 Using Redux in React Native App Part 2

In this tutorial, you will connect to Redux and obtain the state informations such as dishes, comments from there....

Read

2.6 Using Redux in React Native App Part 3

In this tutorial, you will connect to Redux and obtain the state informations such as promotions from there,...

Read

2.7 Activity Indicator

In this tutorial, you will create a new Loading Component that will make use of the Activity Indicator component to display a loading message. At the end of this tutorial...

Read

2.8 Redux Adding Favorites

In this tutorial, you will learn about setting up your Redux store to store the user's favorites and update them. At the end of this tutorial, you will be able to:...

Read

2.9 Forms

In this tutorial, you will add a form to our app, and examine how to handle form submission. At the end of this tutorial, you will be able to:...

Read

2.10 Modals

In this tutorial, you will learn how to add a modal to our app. You will learn how to show and hide the modal. At the end of this tutorial, you will be able to:...

Read

2.11 Assignment 2

In this assignment, you will use a modal containing a form that enables you to add your comments about the dish. When the comment is submitted, then an action is dispatched...

Read

2.12 Post Comment to Web Server

In this tutorial, you will learn to post the comment to web server...

Read

3.1 Favorites

In an earlier tutorial, you have already added a feature to add dishes as favorites. In this tutorial, you will add a new component that will display a list of favorites. At the end...

Read

3.2 Swipeout and Deleting Favorites

In this tutorial, you will use a swipe gesture to reveal option buttons under a list item. This will be used to support deleting a favorite. At the end of this tutorial...

Read

3.3 Alert

In this tutorial, you will learn to use the Alert dialog to show alerts to the users. In particular we will use the alert to confirm the deletion of favorites. At the end of this tutorial...

Read

3.4 Animatable

In this tutorial, you will learn to use an animation library named react-native-animatable that gives you pre-packaged animations that can easily be applied to elements in your app....

Read

3.5 Gestures

In this tutorial, you will learn to use the PanResponder to add gesture support in your app. At the end of this tutorial, you will be able to...

Read

3.6 Persist Redux Store

In this tutorial, you will learn to use redux-persist to persist the state of your Redux store, and rehydrate it when you restart your app. At the end of this tutorial...

Read

3.7 Assignment 3

In this assignment, you will be working with the Reservation Component and the reservation form within the view. You will add animations to the form. When the user submits the form...

Read

4.1 Composing Email

In this tutorial, you will use the Expo SDK MailComposer to enable your application to send emails using the native email application on the device. At the end of...

Read

4.2 Local Notifications

In this tutorial, you will configure your app to make use of notifications support from Expo SDK. You will then generate local notifications. At the end of this tutorial...

Read

4.3 Secure Store

In this tutorial, you will configure your app to make use of secure store from Expo SDK to enable storing and retrieving data in the form of key-value pairs. At the end of this tutorial...

Read

4.4 Picking an Image

In this tutorial, you will use the ImagePicker API from Expo SDK to access the camera to obtain a picture for use in our app. At the end of this tutorial, you will be able to...

Read

4.5 Assignment 4

In this assignment, you will enhance the application to use an image from the photo library on your device using the ImagePicker API. Also, you will access the device calendar and...

Read

5.1 Image SliderBox

In this tutorial, you will use the image-slider-box library to create image slider box with full customization ability...

Read

5.2 Google Firebase

In this tutorial, you will use the firebase library to read/write/listen data from Google Firebase.

Read

5.3 Building Standalone Apps

In this tutorial, you will learn about how you can use the Expo support to build and deploy your apps to the iTunes and Google Play store using their online services. You will understand...

Read