Contents

1. create react-native project
2. install styled-components library
3. how to use
   • basic usages in Class Component
   • Theme usage in Class Component
   • Basic usage in Function Components
   • Theme Usage in Function Components
4. reference

create react-native project

this blog introduce how to use styled-component with RN project which is applied TypeScript. if you want to know how to apply TypeScript to RN, see previous blog.

• TypeScript

install styled-components library

install styled-components library and other necessary libraries for integrating TypeScript.

npm install --save styled-components
npm install --save-dev babel-plugin-styled-components @types/styled-components @types/styled-components-react-native

• styled-components: this is styled-components library.
• @types/styled-components: this is stypled-components types for TypeScript.
• babel-plugin-styled-components: this is not required but make class name easily understand. copy and paste below code to babel.config.js.

module.exports = {
  ...
  plugins: ['babel-plugin-styled-components'],
};

how to use

styled-components has theme function for maintaining site level styles. let’s see theme feature and basic usages.

basic usages in Class Component

• basic styling

// src/App.tsx
...
import styled from 'styled-components/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;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Container>
        <MainText>Hello world</MainText>
      </Container>
    );
  }
}

• dynamic styling using props

// src/App.tsx
...
import styled from 'styled-components/native';
...

interface IContainerProps {
  background: string;
}

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props:IContainerProps) => props.background ? props.background : 'white'};
`;
const MainText = styled.Text`
  font-size: 20px;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Container background="red">
        <MainText>Hello world</MainText>
      </Container>
    );
  }
}

Theme usage in Class Component

there are details about how to use TypeScript for theme in official site.

• officail site: styled-components#typescript
• reference site: Styled-Components-Typescript-Example

if you see official site and reference site, you can catch we should use relative path for using styled-components.

so, we don’t use official site way. we use “dynamic styling using props” way.

• src/@types/index.d.ts file

// src/@types/index.d.ts
interface ITheme {
  color: {
    white: string;
    black: string;
  };
  fonts: {
    normal: string;
  };
}

• src/Theme.tsx file

// src/Theme.tsx
export default {
  color: {
    white: '#FFFFFF',
    black: '#000000',
  },
  fonts: {
    normal: '14px',
  },
};

• src/App.tsx file

...
// src/App.tsx
import { ThemeProvider } from 'styled-components';
import styled from 'styled-components/native';
import Theme from './Theme';
...

interface IContainerPorps {
  theme?: ITheme;
}

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props:IContainerProps) => props.theme && props.theme.color.black};
`;
const MainText = styled.Text`
  font-size: 20px;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <ThemeProvider theme={Theme}>
        <Container>
          <MainText>Hello world</MainText>
        </Container>
      </ThemeProvider>
    );
  }
}

Basic usage in Function Components

import React from 'react';
import styled from 'styled-components/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;
`;

interface Props {}
const App = ({}: Props) => {
  return (
    <Container>
      <MainText>Hello world</MainText>
    </Container>
  );
};

export default App;

Theme Usage in Function Components

import React from 'react';
import styled from 'styled-components/native';
import {ThemeProvider} from 'styled-components';
import Theme from './Theme';

interface StyledProps {
  theme: ITheme;
}
const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props: StyledProps) =>
    props.theme && props.theme.color.black};
`;
const MainText = styled.Text`
  font-size: 20px;
  text-align: center;
  margin: 10px;
  color: red;
`;

interface Props {}
const App = ({}: Props) => {
  return (
    <ThemeProvider theme={Theme}>
      <Container>
        <MainText>Hello world</MainText>
      </Container>
    </ThemeProvider>
  );
};

export default App;

reference

• styled-components official site: styled-components
• reference site: Styled-Components-Typescript-Example

Github Sponsor Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!