Book Image

Mastering React Native

Book Image

Mastering React Native

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 (20 chapters)
Mastering React Native
About the Authors
About the Reviewer
Customer Feedback

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> 

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