How to Use Styled Components with React Native | Beginner Course

Is a practical introduction to Styled Components in React Native, ideal for beginners who want cleaner, more dynamic styling. I show installation, styled components, and conditional styles via props.

You will see styled text and buttons, props for colors and sizes, and key differences from traditional React Native styling.

What's inside

• Welcome and Styled Components overview
• Installation and setup in an Expo project
• Creating a styled text component
• Props for dynamic styles
• Styled button with TouchableOpacity
• Conditional styles from props
• Default values for size and color
• Benefits of Styled Components in React Native

Welcome and Styled Components overview

I explain Styled Components: CSS-in-JS for React Native that keeps styles organized and lets you change appearance from props. That improves reuse and maintenance.

All code is on codewithbeto.dev for review and practice.

Installation and setup in an Expo project

Create a new Expo project with expo init and the blank template. Open it in Visual Studio Code and run expo start.

In a new terminal, run yarn add styled-components. Import styled and start building styled components.

Creating a styled text component

I create MyText with styled.Text and CSS inside backticks, for example font-size: 32px;.

React Native CSS uses kebab-case like font-size and requires units such as px. Render MyText instead of plain Text.

Props for dynamic styles

Pass props to change styles dynamically. If gray is true, text color becomes gray.

Use a function inside the template that reads props and returns conditional styles. One component, multiple looks.

Styled button with TouchableOpacity

MyButton uses styled.TouchableOpacity with a violet background and basic styles.

MyText goes inside the button, showing how to compose styled components.

Conditional styles from props

Props like primary change background and text color on the button.

Default prop values prevent errors when optional props are omitted.

Default values for size and color

Text and button accept size and color props with sensible defaults, like 32px font size when size is not passed.

Configurable but consistent when props are missing.

Benefits of Styled Components in React Native

Styled Components keep styles colocated and reusable. Dynamic props are easier than with plain StyleSheet.

CSS-in-JS can improve DX and collaboration. I recommend it for React Native projects that need to scale cleanly.

Resources

CourseReact Native course

React Native fundamentals from setup through advanced components.

YouTubeStyled Components in React Native - Practical Example

Complementary video with detailed Styled Components examples.