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
Credits
Disclaimer
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Chapter 3. Styling and Layout in React Native

So far, we've covered the basics of React development. We understand how to work with props and state and how to compose smaller, reusable components to form more complex views. We've installed the necessary tools to get a React Native app off the ground and now have a working Hello World app running in the iOS Simulator. The React Native API comes with a large library of built-in components, which we'll explore in the next chapter. But before we dive into the various component APIs, it's important we understand how to style and layout these components, much like we would with CSS in the web world.

React Native's approach to style and layout is heavily inspired by the Web. Many of the properties used to decorate your app will feel very familiar to CSS. For layout, rather than relying on floats, the Facebook team has ported the powerful flexbox layout system to React Native enabling us to make declarative, flexible layouts for our mobile apps....