react-native에서 styled-components 사용하기

react-native expo를 통해 typescript 프로젝트에서 styled-components사용하는 방법을 정리합니다.

styled-components 라이브러리 설치

styled-components 라이브러리와 TypeScript 연동을 위한 라이브러리를 설치합니다.

yarn add styled-components
yarn add --save-dev babel-plugin-styled-components @types/styled-components @types/styled-components-react-nativeCode language: CSS (css)

styled-components	styled-components 라이브러리
@types/styled-components	styled-components 타입
babel-plugin-styled-components	디버깅시 class명을 확인하기 쉽게 만든다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["babel-plugin-styled-components"],
  };
};Code language: JavaScript (javascript)

사용법

import styled form 'styled-components/native';
import { Text, View } from 'react-native';

const Container = styled(View)`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5fcff;
`;

const MainText = styled(Text)`
  font-size: 20px;
  text-align: center;
  margin: 10px;
  color: red;
`;Code language: JavaScript (javascript)

ThemeProvider

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    color: {
      white: string,
      black: string,
    },
    fonts: {
      normal: string,
    }
  };
}Code language: JavaScript (javascript)

기본 테마의 props 인터페이스를 확장 적용

export default {
  color: {
    white: '#ffffff',
    black: '#000000',
  },
  fonts: {
    normal: '14px',
  }
}Code language: CSS (css)

import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import styled from 'styled-components/native';
import Theme from './src/Theme';
import { ThemeProvider } from 'styled-components';

const Container = styled(View)`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5fcff;
`;

const MainText = styled(Text)`
  font-size: 20px;
  text-align: center;
  margin: 10px;
  color: red;
  background-color: ${({ theme }) => theme.color.white};
`;

export default function App() {
  return (
    <ThemeProvider theme={Theme}>
      <Container>
        <MainText>Open up App.tsx to start working on your app!</MainText>
        <StatusBar style="auto" />
      </Container>
    </ThemeProvider>
  );
}Code language: JavaScript (javascript)