Contents
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 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
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!