React Native - Styling with Styled Components and Emotion

 In the fast-paced world of mobile app development, choosing the right styling method can tremendously boost both the developer experience and application performance. As React Native gains traction for building cross-platform applications, developers encounter numerous styling options. Among these, Styled Components and Emotion shine as powerful libraries that allow for writing component-level styles efficiently and in a structured manner. This blog post will explore these libraries, highlight their features, and illustrate how they can be effectively used in real-world applications.

What Are Styled Components and Emotion?

Styled Components is a library that enables developers to write CSS-in-JS. This technique merges the power of JavaScript with CSS, allowing for dynamic styling solutions. By utilizing tagged template literals, developers can create styled React components easily.

On the flip side, Emotion offers a slightly different approach to CSS-in-JS. It prioritizes performance and flexibility, providing two styling paradigms: object-based styles and template literals.

Both libraries strive to enhance how styles are applied to applications, ensuring alignment with the component-centric architecture of React.

Why Use Styled Components and Emotion?

Using Styled Components and Emotion in React Native comes with several notable advantages:

  1. Scoped Styles: With both libraries, styles are restricted to individual components. This feature prevents unintentional style conflicts, keeping your UI consistent.

  2. Dynamic Styling: They allow for dynamic styles based on props. This flexibility helps adapt components to various states, improving user interaction. For instance, a button can change colors when clicked or hovered over.

  3. Enhanced Readability: When styles are written alongside component code, it makes the codebase cleaner and easier to maintain. Developers can quickly pinpoint styles related to specific components.

  4. Performance Optimization: Emotion is designed for speed. It can optimize styles at build time, reducing unnecessary CSS and improving app load times. A study showed that applications using Emotion were around 20% faster in styling performance compared to traditional methods.

Let's explore each library further with practical examples.

Setting Up Styled Components

Installation

To start using Styled Components in your React Native application, you need to install it first by executing:

npm install styled-components

Basic Usage Example

Consider this straightforward example of creating a styled button using Styled Components:

import React from 'react';

import styled from 'styled-components/native';

import { TouchableOpacity, Text } from 'react-native';

const Button = styled(TouchableOpacity)`

background-color: #3498db;

padding: 10px 20px;

border-radius: 5px;

align-items: center;

`;

const ButtonText = styled(Text)`

color: #fff;

font-size: 16px;

`;

const App = () => (

<Button onPress={() => alert('Button Pressed!')}>

<ButtonText>Click Me</ButtonText>

</Button>

);

export default App;


In this example, we define a styled button that remains visually consistent each time it is rendered. Upon pressing this button, an alert will display. With styles scoped to the component, style conflicts are easily avoided.

Setting Up Emotion

Installation

To use Emotion in your project, install the necessary packages with:


npm install @emotion/native @emotion/react


Basic Usage Example

Here's how to create a styled component with Emotion:


import React from 'react';

import { Text, TouchableOpacity } from 'react-native';

import { styled } from '@emotion/native';

const Button = styled(TouchableOpacity)`

background-color: #e74c3c;

padding: 12px 24px;

border-radius: 5px;

align-items: center;

`;

const ButtonText = styled(Text)`

color: #fff;

font-size: 16px;

`;

const App = () => (

<Button onPress={() => alert('Emotion Button Pressed!')}>

<ButtonText>Press Me</ButtonText>

</Button>

);

export default App;


Like the Styled Components example, this code creates a button with styled text. Emotion's `styled` function offers dynamic capability, allowing style changes based on interactions or state.

Dynamic Styling with Props

A significant advantage of both Styled Components and Emotion is the ability to style components dynamically based on props.

Example with Styled Components

Enhance your button with dynamic styling using Styled Components like this:


const DynamicButton = styled(TouchableOpacity)`

background-color: ${(props) => (props.primary ? '#3498db' : '#e74c3c')};

padding: 10px 20px;

border-radius: 5px;

align-items: center;

`;


Now, you can adjust the button's appearance by using `<DynamicButton primary={true}>Click Me</DynamicButton>`, changing its background color based on the `primary` prop.

Example with Emotion

Emotion also supports dynamic styling in a similar manner:


const DynamicButton = styled(TouchableOpacity)`

background-color: ${(props) => (props.primary ? '#e74c3c' : '#3498db')};

padding: 12px 24px;

border-radius: 5px;

align-items: center;

`;


Again, the usage remains the same, providing ease in defining styles that respond to component states or props.