How to use styled components with React Native

Styled-components is a CSS-in-JavaScript library that allows you to use component-level styles in your application. It is easy to maintain, and saves you the stress of remembering, duplicating, or misspelling class names.

React Native is an open-source mobile application framework.

Using styled components, you can build simple, dynamic, and reusable components by writing CSS in your React Native component.

Let’s Get Started

First, you need to create a React Native project. I would be using the expo-clihttps://docs.expo.dev/workflow/expo-cli/ to bootstrap the new project. If you already have an existing React Native project, skip straight to Installing styled-components step.

Installing styled-components

Move into your project’s directory then run any of the following commands.

This command installs the latest version of styled-components on your project.

Using styled-components with React Native

You need to import styled-components library in the file where it is would be used.

By using styled-components, you are defining your styles by creating a new component from an already existing component. For example, you can create a Layout component that inherits properties from React Native’s View component.

props Based Adaptation

According to the styled-component documentation, you can pass a function (“interpolations”) to a styled component’s template literal to adapt it based on its props.

This means that you can give a component a primary state which is set to true when passed,

or, props can be passed to the mounted DOM node.

Do It Yourself

NB: You cannot use keyframes and createGlobalStyle helpers while styling as React Native does not support keyframes or global styles.