How to Use Styled Components in React Native

Covering installation, basic usage, props and TypeScript support

Image for post
Image for post

Styled Components compliment React Native’s Stylesheet

Comparing StyleSheet with Styled Components

<Text style={{ fontSize: 14, fontWeight: '600' }}>
React Native styling!
</Text>
// styled component
const StyledText = styled.Text`
font-size: 14px;
`;
// Stylesheet
const styles = Stylesheet.create({
fontSize: 14
});
import { SafeAreaView } from 'react-native'const App = () => (
<SafeAreaView style={{ flex: 1 }}>
...
</SafeAreaView>
);
// styles.jsximport styled from 'styled-components'export const SafeAreaView = styled.SafeAreaView`
flex: 1,
`;
// App.jsximport { SafeAreaView } from './styles'const App = () => (
<SafeAreaView>
...
</SafeAreaView>
);
// styling a box shadow with `Stylesheet`import { StyleSheet } from 'react-native'export const styles = StyleSheet.create({
shadowColor: '#000',
shadowOpacity: 0.25,
shadowOffset: {
width: 0,
height: 2
}
}
// styling a box shadow with a styled componentexport const StyledView = styled.View`
box-shadow: 0px 2px 1px rgba(0,0,0,0.25);
`;
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Setting up Styled Components in React Native

yarn add styled-components @types/styled-components
import styled from 'styled-components/native'
import styled from 'styled-components/native'export const StyledTouchableHighlight = styled.TouchableHighlight`
flex-basis: 33%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
padding: 5px 0;
`;

Using props

// a styled.Text component with props<StyledText
color='#ff0f0f' // red
highlighted={true}
>
My Styled Text
</StyledText>
import styled from 'styled-components'export const StyledText = styled.Text`
color: ${props => props.color}
backgroundColor: ${props => props.highlighted
? 'yellow'
: 'transparent'
};
`;
import styled from 'styled-components'export const StyledText = styled.Text`
color: ${(props) => {
return(props.color);
}


backgroundColor: ${(props) => {
const highlightColor = props.highlighted
? 'yellow'
: 'transparent'
return(highlightColor);
}
;
`;

Example: Styled Container

// StyledContainer is wrapped by a `TouchableOpacity` const Container = (props) => { const [selected, setSelected] = useState(false);return(
<TouchableOpacity
activeOpacity={0.75}
>
<StyledContainer
backgroundColor='#f1f1f1'
shadowColor='rgba(232,232,232,0.6)'
borderColor={selected ? 'blue' : '#eee'}
>
<Text>Title</Text>
<Text>Short description</Text>
</StyledContainer>
</TouchableOpacity>
);
export const Container = styled.View`
display: flex;
border-width: 2px;
border-radius: 6px;
border-color: ${props => props.borderColor};
background-color: ${props => props.backgroundColor};
width: 100%;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
padding: 15px 10px;
box-shadow: ${props => props.shadowColor === undefined
? `none`
: `0px 3px 3px ${props.shadowColor}`
}
;
`;

Styled Components TypeScript Support

// generics allow us to type styled component propsconst StyledView = styled.View<T>`
...
`;
// typing a styled component with an interface export interface ContainerInterface {
backgroundColor: string;
borderColor: string;
shadowColor: string;
}
export const Container = styled.View<ContainerInterface>`
...
`;
export interface ButtonInterface = {
active?: boolean;
label: string;
disabled: boolean;
}
export const StyledButton = styled.TouchableOpacity<ButtonInterface>`
color: ${props => props.active === undefined
? `gray`
: props.active === true
? `green`
: `gray`
};
opacity: $props => props.disabled === undefined
? 1
: props.disabled === true
? 0.5
: 1
};
`;
export const StyledButton = styled.TouchableOpacity<Partial<ButtonInterface>>`
...
`;

In Summary

Written by

Programmer and Author. Director @ JKRBInvestments.com. Creator of ChineseGrammarReview.app for iOS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store