Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Using Styled Components

Styled Components is a CSS-in-JS solution that enables you to create React components with a given style very easily. Using styled-components with Expo, you can create universal styles that'll work the same across web, mobile, and desktop!

Getting Started

Install the Styled Components package:
Terminal
→ yarn add styled-components
Use styled-components/native instead of styled-components:
import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  background-color: #fff;
  align-items: center;
  justify-content: center;
`;
const Title = styled.Text`
  color: #000;
  text-align: center;
  font-size: 16px;
`;
export default () => (
  <Container>
    <Title>Hello</Title>
  </Container>
);

Usage with Next.js

Usage with Next.js is a little different because we need to apply the React Native aliases manually, this can be done via @expo/webpack-config (which is in @expo/next-adapter).
  • Add @expo/next-adapter to your project:
Terminal
→ npx @expo/next-adapter
  • Install the styled-components Babel plugin:
Terminal
→ yarn add -D babel-plugin-styled-components
  • Use the Babel plugin in your babel.config.js file:
babel.config.js
11 module.exports = {
22 presets: ['@expo/next-adapter/babel'],
3 plugins: [['styled-components', { ssr: true }]]
34 };
  • Now you can use styled-components/native just like you would in a regular Expo project!

Considerations

Tree-Shaking

Styled Components imports all of react-native-web which breaks React Native web tree-shaking. This means your bundle size will be larger and include all of the components exported from react-native-web.

Why styled-components/native

Technically you can use styled-components directly like this:
Container.jsx
1 import styled from 'styled-components/native';
1 import styled from 'styled-components';
22
3 const Container = styled.View`
3 const Container = styled(View)`
44 background-color: #fff;
55 `
But doing this in the browser will throw the error: Warning: Using the "className" prop on <View> is deprecated..
  • Message-iconAsk a question on the forums
  • Edit-iconEdit this page

Was this doc helpful?