Course
Course Decription
Master the art of styling in React Native with our comprehensive course, “React Native Styling Basics.” Learn how to use the StyleSheet API, the Flexbox layout system, and create custom, platform-specific components to build beautiful, responsive interfaces for your mobile apps.
What will I learn?
- 🔥 Work with StyleSheet API and understand differences to CSS
- 🎨 Use the Flexbox layout system to create responsive designs
- 📱 Create custom, platform-specific components for iOS and Android
- 🖌️ Work with themes and use dark mode
- 💪 Learn practical tips for StyleSheet and Expo Router
Enhance your React Native development skills with “React Native Styling Basics” and create stunning, responsive interfaces for your mobile apps today!
💪 Getting Started
Course Overview
In this course, you'll learn how to style your React Native apps using the built-in StyleSheet API. Let's begin with an overview of the course content.
Expo App Setup
In this lesson, we'll set up a new Expo project and run it on iOS, Android and web.
🎨 Styling Basics
Using the StyleSheet API
In this lesson, you'll learn how to use the built-in StyleSheet API to style your React Native components.
Height, Width and Position
We dive into dimensions and how to poistion elements in React Native using the built-in StyleSheet API.
Positioning with Flexbox
We dive into dimensions and how to poistion elements in React Native using the built-in StyleSheet API.
Conditional Styling
In this lesson, we will learn how to conditionally apply styles to components in React Native. We will use the `StyleSheet` API to define styles and the `style` prop to apply them to components. We will also use the `Platform` module to apply platform-specific styles.
Handling Images
In this lesson, we will learn how to handle images in React Native using the built-in Image component.
🚀 Practical Styling
StyleSheet Functions
Let's learn how to use functions in the StyleSheet API to create dynamic styles in React Native.
Platform Specific Styling
In this lesson, we will learn how to use platform-specific styling in React Native.
Platform Specific Components
In this lesson, we will learn how to use platform-specific components in React Native to create a more native experience for users.
Respecting Safe Areas
In this lesson, we'll learn how to respect safe areas in React Native by using the `useSafeAreaInsets` hook.
Creating a dark mode
In this lesson, we'll learn how to create a dark mode for our React Native app using the `useColorScheme` hook.
⚡️ Expor Router
Customising Navigation Elements
In this lesson, we will learn how to customise navigation elements using Expo Router
Using CSS with Expo
In this lesson, we will learn how to use CSS with Expo in React Native.
Platform Specific Layout Files
In this lesson, we will learn how to use platform-specific layout files with Expo Router.
✨ Teardown