Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Mastering React Native
  • Toc
  • feedback
Mastering React Native

Mastering React Native

3.8 (9)
close
Mastering React Native

Mastering React Native

3.8 (9)

Overview of this book

React Native has completely revolutionized mobile development by empowering JavaScript developers to build world-class mobile apps that run natively on mobile platforms. This book will show you how to apply JavaScript and other front-end skills to build cross-platform React Native applications for iOS and Android using a single codebase. This book will provide you with all the React Native building blocks necessary to become an expert. We’ll give you a brief explanation of the numerous native components and APIs that come bundled with React Native including Images, Views, ListViews, WebViews, and much more. You will learn to utilize form inputs in React Native. You’ll get an overview of Facebook’s Flux data architecture and then apply Redux to manage data with a remote API. You will also learn to animate different parts of your application, as well as routing using React Native’s navigation APIs. By the end of the book, you will be able to build cutting-edge applications using the React Native framework.
Table of Contents (13 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Building a Foundation in React
1. Building a Foundation in React
Library versus framework
Motivation for React
Getting started in React
Describing components in JSX
The component
Component composition
Props and PropTypes
Event handlers
State
The component lifecycle
Alternate component forms
Summary
2
2. Saying HelloWorld in React Native
2. Saying HelloWorld in React Native
Understanding the mobile app development ecosystem
Understanding all the React Native tools
Watchman
Installing our tools
Installing Watchman and Flow
Creating our first React Native app
Understanding our HelloWorld app
Debugging a React Native app
Summary
3
3. Styling and Layout in React Native
3. Styling and Layout in React Native
Constructing and applying styles
Styling without inheritance
Understanding React Native's take on the box model and flexbox
Understanding Flexbox
Styling text with React Native
Styling images
Inspecting and debugging styles
Adding media query behavior to React Native
Summary
4
4. Starting our Project with React Native Components
4. Starting our Project with React Native Components
Native components
Native APIs
Summary
5
5. Flux and Redux
5. Flux and Redux
The Flux architecture
Getting started with Redux
Summary
6
6. Integrating with the NYT API and Redux
6. Integrating with the NYT API and Redux
Understanding the NYT API data
Wiring up our Redux data flow
Wiring up the NYT API with asynchronous requests
Summary
7
7. Navigation and Advanced APIs
chevron up
7. Navigation and Advanced APIs
Navigation landscape
Using Navigator
Advanced navigation with NavigationExperimental
Other advanced APIs
Summary
8
8. Animation and Gestures in React Native
8. Animation and Gestures in React Native
Introducing LayoutAnimation and Animated
Building the basic Onboarding experience
Adding LayoutAnimation
Understanding Animated
Using PanResponder with the Animated API
Summary
9
9. Refactoring for Android
9. Refactoring for Android
Installing the necessary tools
Adding Android support to RNNYT
Summary
10
10. Using and Writing Native Modules
10. Using and Writing Native Modules
Using native modules
Writing native modules
Summary
11
11. Preparing for Production
11. Preparing for Production
Testing
Performance
Running on physical devices
Deploying our application
Summary
12
12. React Native Tools and Resources
12. React Native Tools and Resources
Evaluating React Native Editors, Plugins, and IDEs
Taking React Native beyond iOS and Android
Summary
References

Using Navigator

In this section, we're going to add a simple introduction screen to our application that is presented to the user before the news feed. When they tap the screen, it will navigate to the home screen that we currently have in the application, as shown in the following screenshot:

The first thing we'll do is create a simple new component for this intro screen in a new src/components/IntroScreen.js file:

import React, { PropTypes } from 'react'; 
import { 
  View, 
  TouchableOpacity, 
  StatusBar, 
  StyleSheet 
} from 'react-native'; 
import Title from './Title'; 
import AppText from './AppText'; 
import * as globalStyles from '../styles/global'; 
 
// Set the status bar for iOS to light 
StatusBar.setBarStyle('light-content'); 
 
const IntroScreen = ({ onPress }) => ( 
  <View style={[globalStyles.COMMON_STYLES.pageContainer, styles.container]}> 
    <TouchableOpacity 
      onPress...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 2
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete