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
chevron up
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
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

Constructing and applying styles

Let's begin our exploration of component styling by first answering two key questions: what should my style code look like and where does it go inside of my project?

Inline styles

Similar to HTML, styles in React Native can be applied inline by setting the value of the style property, as shown in the following code:

<View style={{ backgroundColor: 'blue', flex: 1, justifyContent: 'center', alignItems: 'center' }}> 
    <Text style={{ color: '#fff', fontSize: 22 }}>Hello World</Text> 
</View>

The output of the code will be as shown in the following screenshot:

You can think of a View much like a div and Text similar to a span or label. Those differences aside, the style properties and values should feel pretty familiar. The color property sets the text color just like in CSS. fontSize, backgroundColor, justifyContent, and alignItems are by and large the camel case version of their CSS equivalents.

Styles as objects in your...

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 5
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