Unlock the Power of CSS-in-JS in React Native

What is CSS-in-JS?

CSS-in-JS enables us to solve common CSS problems, such as name collision, and use normal CSS naming conventions instead of camelCase. It also provides additional benefits when used with library integrations, particularly for mobile apps.

Getting Started with Styled Components and Styled System

To follow along, you’ll need a working knowledge of CSS, React, and React Native. Let’s create a new React Native application using Expo CLI and install the necessary dependencies.

npx expo init my-app
cd my-app
npm install styled-components styled-system

Building a Styled React Native Application

We’ll start by adding style props to React components using Styled System. This library provides a set of functions that add style props to our components, allowing us to rapidly prototype our UI.

import { styled } from 'tyled-components/native';

const Button = styled.TouchableOpacity`
  background-color: #007bff;
  padding: 16px;
  border-radius: 4px;
`;

export default Button;

Creating Reusable Components

By creating reusable components with Styled System, we can provide each component with access to the necessary style props passed to it by the style functions. This makes our code clean, DRY, and easy to maintain.

import { styled } from 'tyled-components/native';

const Card = styled.View`
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`;

export default Card;

Styling Our Layout

Let’s put everything together by building a Notification layout. We’ll create a components folder with three files: Notifications.js, Card.js, and Text.js. Each file will contain code that adds style props to our components.

// components/Notifications.js
import React from 'eact';
import { View, Text } from 'eact-native';
import Card from './Card';
import Text from './Text';

const Notifications = () => {
  return (
    
      Hello, World!
    
  );
};

export default Notifications;

Theming with Styled System

Styled System also supports the use of themes, which allows us to create a consistent and maintainable styling approach. We’ll create a theme.js file that holds an object defining all our styles and use it with the ThemeProvider provided via context by most CSS-in-JS libraries.

// theme.js
export default {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
  spacing: {
    sm: 8,
    md: 16,
    lg: 24,
  },
};

// App.js
import React from 'eact';
import { ThemeProvider } from 'tyled-components/native';
import theme from './theme';
import Notifications from './components/Notifications';

const App = () => {
  return (
    
      
    
  );
};

export default App;

The Benefits of Styled System

Styled System is a revolutionary way of styling React Native components that uses a simple approach. It allows us to:

• rapidly prototype our UI
• work with several CSS-in-JS libraries like styled-components
• provide a consistent and maintainable styling approach

Give it a try on your next project!