styled-components

2019-05-23

this blog is about how to use styled-component library for react-native styling.

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.

install styled-components library

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

npm install --save styled-components
npm install --save-dev @types/styled-components babel-plugin-styled-components
  • 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

  • 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: 20;
  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: 20;
  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

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

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
interface ITheme {
  color: {
    white: string;
    black: string;
  };
  fonts: {
    normal: string;
  };
}
// src/Theme.tsx
export default {
  color: {
    white: '#FFFFFF',
    black: '#000000',
  },
  fonts: {
    normal: '14px',
  },
};
...
// 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: 20;
  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>
    );
  }
}

reference

Buy me a coffeeBuy me a coffee
Posts