---
title: "Platform specific styles in stylesheet, React Native"
description: "Apply platform specific styles in stylesheet in React Native"
canonical_url: "https://www.bigbinary.com/blog/apply-platform-specific-styles-in-stylesheet-react-native"
markdown_url: "https://www.bigbinary.com/blog/apply-platform-specific-styles-in-stylesheet-react-native.md"
---

# Platform specific styles in stylesheet, React Native

Apply platform specific styles in stylesheet in React Native

- Author: Bilal Budhani
- Published: July 12, 2016
- Categories: React Native

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

React Native [introduced](https://github.com/facebook/react-native/pull/7033)
`Platform.select` helper in
[version 0.28](https://github.com/facebook/react-native/releases/tag/v0.28.0)
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.

```javascript
import { StyleSheet } from "react-native";

export default StyleSheet.create({
  container: {
    flex: 1,
  },

  containerIOS: {
    padding: 4,
    margin: 2,
  },

  containerAndroid: {
    padding: 6,
  },
});
```

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

```javascript
import { StyleSheet, Platform } from "react-native";

export default StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        padding: 4,
        margin: 2,
      },
      android: {
        padding: 6,
      },
    }),
  },
});
```

## Links

- [Human page](https://www.bigbinary.com/blog/apply-platform-specific-styles-in-stylesheet-react-native)