Platform conditional statements in stylesheets (react-native)

user_6017360 0
Viewed 4645

For minor platform specific code you can use the Platform module to execute some platform dependent code. As detailed in the docs here: https://facebook.github.io/react-native/docs/platform-specific-code.html

There is an example of how to use it in stylesheets

var styles = StyleSheet.create({ 
   height: (Platform.OS === 'ios') ? 200 : 100, 
});

I would like to do something similar but a simple if statement to decide whether or not to use a style, for example one that is for one platform only.

Here is an example:

var styles = StyleSheet.create({
   textInputStyle: {
      if (Platform.OS === 'android') {
         textAlignVertical:'top' // android only style
      }
   }
});~

This is syntactically incorrect, what's the correct code to achieve this. I would like to avoid having two separate style sheets for each Platform as it seems unnecessary when it's only 1 or 2 fields that are different.

react-native reactjs
4 Answers

I believe this is what you are looking for:

var styles = StyleSheet.create({
   textInputStyle: {
      ...Platform.select({
        ios: {
            //
        },
        android: {
            //
        },
    }),
   }
})

The link you provided shows the above code as an example. (v0.59)

user_9565930
Related