BigBinary Blog

We write about Ruby on Rails, React.js, React Native, remote work, open source, engineering and design.

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});
Bilal Budhani in React Native
July 12, 2016
Share

Subscribe to our newsletter