REACT NATIVE APP
DEVELOPMENT TRAINING

Introduction

Learning Objective:

By the end of this module you will learn the basics needed to kickstart react native development.

Learn about core concepts like components, JSX, state management in component, component interaction using props and events.

What is React

• JSX
• React Components
• Props
• Events
• State
• Lifecycle
• PropTypes
• Default Props

Hands-on:

Create a React application with function based components and class based components.

Use jsx syntax to develop user interface in JavaScript. Apply state management in class based components and pass data to child components using props.

code callbacks better past two children from parent component and invoke from child component enable tell to Parent communication.

Styles and Layouts

Learning Objective:

By the end of this module you will learn how to apply styles in React Native.

You will gain a deeper understanding about flexbox and learn how to develop different kinds of layouts in React Native.

You will also learn about style text, images and debug styles.

• Exploring Styles and using styles
• Inline Styles, Style Objects, Stylesheet
• Exploring layout
• Understanding Box model
• Understanding FlexBox model
• Styling Text
• Styling Images
• Debugging Styles

Hands-on:

Learn the components and tell them using different kinds of objects, develop different components that showcase developing layouts in React Native using flexbox model,

style the headings and apply background using images and debug styles.

React Native Components

Learning Objective:

By the end of this module you will learn about different React Native components and their application.

What are React Native Components

• View
• Text
• Image
• Touchables
• ListView
• ScrollView
• Modal
• WebView
• TabBar
• TextInput
• Slider
• Switch
• Picker

Hands-on:

Create components that make use of several built in React Native components like view, presenting text, using images, responding to touch events using touchables, handling large data using listview, pan and zoom content using scrollview.

Use WebView to embed HTML content into React Native application. Also develop components that use text input, picker to accept data from the user.

React Native API

Learning Objective:

By the end of this module you will learn how to make use of React Native API to access hardware related features and platform specific features.

What are React Native APIs

• Alert
• Handling permissions
• Geolocation
• Vibration

Hands-on:

Create components that use native API to interact with platform services. Show the alerts, fetch geolocation, vibrate the device,

access camera roll, and capture pictures using camera

Navigation

Learning Objective:

By the end of this module you will learn the challenges with navigation in the React Native application.

You will learn how to setup and configure React Native navigation library.

What is Navigation

• Challenges with navigation
• Possible solutions for navigation
• Setting up React Native navigation library
• Working with React Native navigation
• Styling the navigator
• OS Specific use cases

Hands-on:

Code Components and configure React Native application with React Native navigation library, develop tab navigation and stack navigation.

Remote Communication

Learning Objective:

By the end of this module you will learn how to consume remote API in React Native application using fetch API and third party http client axios.

What is remote communications

• Libraries available
• Fetching data using fetch
• Working with axios for CRUD

Hands-on:

Create components that fetch data from remote API and post data to remote API.

Releasing Builds

Learning Objective:

By the end of this module you will learn how to build and integrate React Native apps in Android and IOS operating systems.