Core Lesson 5 - Styles

This core lesson covers the style and theme settings available in Composer Pro.

Part 1 — Accessing style properties

In this video we'll go through how to access style properties. For a full list of all style properties see the Style properties reference.

Part 2 — Page styles

In this video we'll take a look at page style properties, including "disable scroll" and "stretch to viewport height".

Part 3 — Fonts & typography

In this video we'll learn how to use fonts, upload custom fonts and how to style typography.

Part 4 — Colors

In this video we'll learn how to edit colors for components, as well as the main colors for a theme.

Part 5 — Visual effects & decorations

In this video we'll go through some of the visual effects and decorations, including image modes, borders, box shadow and opacity.

Part 6 — Dimensions & positioning

In this video we'll go through changing the width, height and positioning of components. We'll also cover the z-index and absolute positioning.

Part 7 — Layouts

In this video we'll go through the basics of constructing layouts (which is based on flexbox principles).

Part 8 — Growing and shrinking

In this video we continue with horizontal layouts and how the flexbox grow and shrink parameters enable responsive layouts. For information on the advanced flexbox parameters see here https://reactnative.dev/docs/flexbox

Part 9 — Style bindings

In this video we'll learn how to bind to style properties.

Part 10 — Shared styles

In this video we learn an effective way to share or copy styles across multiple components with shared styles.

Part 11 — Theme

In this video we'll get to know the theme tab and theme controls in detail, as well as how to add custom theme variables.

Part 12 — Animations

In this video we'll add an animation to a component using the Animate Component flow function.

Extras — Helpful Power-ups

Here are some power-up videos you may also find useful!

Power-up: Grid/Table layout

Power-up: Conditional Styling

Power-up: Custom Fonts