Styling React Native Applications

The share of native web content consumed on mobile devices is increasing, and in many categories is already more than the share consumed by desktop. In this course, you'll learn to style React Native applications so they look good on all devices.
Course info
Level
Intermediate
Updated
Nov 9, 2020
Duration
1h 50m
Table of contents
Description
Course info
Level
Intermediate
Updated
Nov 9, 2020
Duration
1h 50m
Description

Mobile devices are what many users use to browse the web, but developing apps that simultaneously work on Android, iOS, and in web browsers can be an expensive, time-consuming, and baffling process. In this course, Styling React Native Applications, you’ll learn to style React Native applications, resulting in a consistent and professional appearance on multiple different mobile platforms, with only one code base. First, you’ll see how to apply basic styling to your React Native application using the Stylesheet.Create() method and applying fixed dimensions and positioning to the elements of the page, creating simple and consistent, though inflexible, basic layouts. Next, you’ll discover how to create more robust and dynamic layouts by using Flex styling instead of fixed dimensions, enabling you to create a wider variety of layouts including vertically and horizontally arranged sections, as well as elements that automatically resize to fit the context. Finally, you’ll explore how to animate your application using the LayoutAnimation API, creating fluid transitions between application views and the states within each view. The animation skills you'll learn will enable you to create engaging and interactive applications on all platforms. When you’re finished with this course, you’ll have the skills and knowledge of styling React Native applications to confidently and independently apply robust styles to any application you are assigned to work on, or to build your own applications easily and with minimal code.

About the author
About the author

Daniel Stern is a freelance web developer from Toronto, Ontario who specializes in Angular, ES6, TypeScript and React. His work has been featured in CSS Weekly, JavaScript Weekly and at Full Stack Conf in England.

More from the author
Vue.js: Big Picture
Beginner
1h 32m
Dec 21, 2020
More courses by Daniel Stern
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Daniel Stern, and welcome to my course, Styling React Native Applications. I'm an independent content author and an open source contributor. Every year, the share of internet content viewed on mobile devices increases compared to desktops. A powerful tool to capitalize on this is React Native, which lets you write applications for Android and iOS using React, but how do we apply what we already know about styling to a new and challenging library like React Native, and what new techniques must we learn? In this course, we're going to learn the must know principles behind styling React Native applications and apply them as we style a modern and functional app. Some of the major topics that we'll cover include creating StyleSheets for mobile using React Native, understanding Flex Box and where to use it appropriately to align, justify, and resize content, and animating React Native applications, especially when the user interacts. By the end of this course, you'll be able to contribute valuable expertise to any team working on React Native applications or style your own from scratch. Before beginning this course, you should be familiar with basic CSS, as well as standard React. From here, you should feel comfortable diving into React Native with courses on advanced React Native usage, more advanced React Native animation techniques, and more advanced usage of Flex Box. I hope you'll join me on this journey to learn how to make React Native applications look great with Styling React Native Applications, at Pluralsight.