💅 Getting started with Styled Components

We're super excited here to be using Styled Components in our native iOS and Android apps shipping this month.

Styled Components have provided a great basis for theming across our React Native project, and it couldn't be easier to get started.

$ yarn install styled-components

After installing the package, we simply reference styled-components/native in our components and we're good to go.

import React from 'react';
import styled from 'styled-components/native';
import { Text } from 'react-native';

const ButtonWrapper = styled.TouchableOpacity`
  padding: 10px;
`;

const Button = () => (
  <ButtonWrapper>
    <Text>Hello</Text>
  </ButtonWrapper>
);

This tight coupling of styles and JS allows us to work seamlessly with props.

Try Styled Components today and let us know what you think!