Back to Blog

Platform specific styles in stylesheet, React Native

While writing cross platform applications we need to add platform specific styles. There are many ways of accomplishing this.

React Native introduced Platform.select helper in version 0.28 which allows us to write platform specific styles in a concise way. In this blog we will see how to use this newly introduced feature.

StyleSheet

A basic stylesheet file might look something like this.

1import { StyleSheet } from "react-native";
2
3export default StyleSheet.create({
4  container: {
5    flex: 1,
6  },
7
8  containerIOS: {
9    padding: 4,
10    margin: 2,
11  },
12
13  containerAndroid: {
14    padding: 6,
15  },
16});

Now let's see how we can re-write this StyleSheet using Platform.select.

1import { StyleSheet, Platform } from "react-native";
2
3export default StyleSheet.create({
4  container: {
5    flex: 1,
6    ...Platform.select({
7      ios: {
8        padding: 4,
9        margin: 2,
10      },
11      android: {
12        padding: 6,
13      },
14    }),
15  },
16});

You might also like

If you liked this blog post, check out similar ones from BigBinary