Understanding styling in React Native
In this article, I will talk about the two most popular ways of styling React Native Apps — StyleSheet and styled-components. We will look at how to structure the style objects and I will share a few tips!
Everyone started with StyleSheet API of React Native to create styles and most of the wonderful react native developers across the globe still think this is the best way to create styles. Let’s first see a basic example.
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.header}>Basic Header</Text>
</View>
)
}const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingVertical: 10
},
header: {
fontSize: 12,
fontFamily: 'Cochin'
}
})
A StyleSheet is an abstraction similar to CSS StyleSheets.
- Instead of creating a new style object every time, StyleSheet helps to create style objects with an ID which is further used to reference instead rendering it again.
- Moving code outside the render() helps in achieving the better understanding of code and adds meaning to low-level components.
- The stylesheet is sent only once over the bridge unlike normal style object inside render().
Must know and should follow things.
# React Native use camelCase instead of kebab-case for style properties
# Instead of pixels, React Native uses “units” that get converted into pixels
# Get screen resolution using:
fullHeight: Dimensions.get('window').height,
fullWidth: Dimensions.get('window').width # You can use code inside style:
let iconSize = 24;
export default StyleSheet.create({
icon: {
height: iconSize,
width: iconSize,
borderRadius: iconSize / 2
}
});# Reuse Basic Style Objects:
/* textMixins.js */
export const errorText = {
fontWeight: "700",
color: "red",
};/* formStyles.js */
import { errorText } from "textMixins";
export default StyleSheet.create({
formErrorMessage: {
...errorText,
fontSize: 22,
},
fieldErrorMessage: {
...errorText,
fontSize: 18,
},
});
# Package which provides helper functions for the efficient use of colors: https://www.npmjs.com/package/color
# Flexbox!!!! (Read more from here)
Better Architecture of Styles
There are always some basic styles or components which we use over and over again somewhere in our project. The first step of better architecture is to define a base style and reuse it whenever required. This helps in maintaining a quality code base, and even in easy refactoring.
// app/styles/base.js
import {StyleSheet, Dimensions} from 'react-native'
export const dimensions = {
fullHeight: Dimensions.get('window').height,
fullWidth: Dimensions.get('window').width
}
export const colors = {
primary: '#226B74',
secondary: '#254B5A',
tertiary: '#5DA6A7'
}
export const padding = {
sm: 10,
md: 20,
lg: 30,
xl: 40
}
export const fonts = {
sm: 12,
md: 18,
lg: 28,
primary: 'Cochin'
}Now we can import this style base.js to our component.
import {colors, fonts, padding, dimensions} from '../../styles/base.js'export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.header}>Basic Header</Text>
<Text style={styles.section}>Basic Section Text</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: padding.sm,
paddingVertical: padding.lg,
width: dimensions.fullWidth
},
header: {
fontSize: fonts.lg,
fontFamily: fonts.primary
},
section: {
paddingVertical: padding.lg,
paddingHorizontal: padding.xl
}
})
Make sure, you define only those styles into the base which are basic attributes across the project. All component specific style should be inside directory where component is lying.
Styled Components
Let’s move onto another big thing in the world of styling in React.js that is styled-components.
Styled Components is a CSS-in-JS library that pushes developers to write CSS per component. It’s very unintuitive for developers are using CSS to write styles in JS which follow camelCase. Styled Components brings back the CSS feel to the developers. Here is a basic example:
styled-components utilizes tagged template literals to style your components.
It removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component, that has your styles attached to it. Let’s look at some pros ;)
# You can pass props to the styled components
const Input = styled.input`
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
`;
// Render a styled text input with a placeholder of "@mxstbr", and one with a value of "@geelen"
render(
<div>
<Input placeholder="@mxstbr" type="text" />
<Input value="@geelen" type="text" />
</div>
);# Custom Components using StyleSheet vs styled-components
One method of sharing styles in React Native is through creating your own component to reuse it.
/* header.js */
const styles = StyleSheet.create({
text: {
fontFamily: "UnreadableSans",
fontSize: 24,
fontWeight "500",
},
});
class Header extends React.Component { render() {
return (
<Text
style={ styles.text }
{ ...this.props }
/>
);
}
}
This component can be used further as:
import Header from "header";
class Home extends React.Component { render() {
return (
<View>
<Header>Article heading</Header>
</View>
);
}
}
This over 20 lines of code can be replaced with this using styled-components and the result achieved would be same:
import styled from "styled-components"; const Header = styled.Text`
font-family: "UnreadableSans";
font-size: 24em;
`;
class Home extends React.Component {render() {
return (
<View>
<Header>Article heading</Header>
</View>
);
}
}
