3. Styling and Layout in React Native | Mastering React Native

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Mastering React Native

3.8 (9)

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.

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. 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. 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. 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. Starting our Project with React Native Components

4. Starting our Project with React Native Components

Native components

Native APIs

Summary

5. Flux and Redux

5. Flux and Redux

The Flux architecture

Getting started with Redux

Summary

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. Navigation and Advanced APIs

7. Navigation and Advanced APIs

Navigation landscape

Using Navigator

Advanced navigation with NavigationExperimental

Other advanced APIs

Summary

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. Refactoring for Android

9. Refactoring for Android

Installing the necessary tools

Adding Android support to RNNYT

Summary

10. Using and Writing Native Modules

10. Using and Writing Native Modules

Using native modules

Writing native modules

Summary

11. Preparing for Production

11. Preparing for Production

Testing

Performance

Running on physical devices

Deploying our application

Summary

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

Styling text with React Native

While most of the rules around React Native styling are equally applicable to text, there is one notable exception: nested Text elements actually inherit type styles from one another. As an example, imagine in the HTML/CSS world you have a span element that contains several words, one of which you'd like to appear bold. You could simply wrap that single word with a strong element and achieve your goal. The inner strong element would inherit the typographic styles of the parent span but make its own text bold. This same concept applies in React Native. Take a look at the following code snippet:

const BasicType = () => ( 
  <Text style={styles.headline}> 
    Welcome to <Text style={styles.bold}>React</Text> Native {'\n'} 
    <Text style={styles.subheader}>This is <Text style={styles.bold}>so cool!</Text></Text> 
  </Text> 
); 
 
const styles = StyleSheet.create({ 
  headline...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Mastering React Native

Search

Your notes and bookmarks