Platform conditional statements in stylesheets (react-native)

5
votes

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.

4
reactjsreact-native

4 Answers

6
votes

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)

2
votes

Please have a look on react-native-extended-stylesheet that supports media queries allowing you to define styles for particular platform / screen.

For example:

import EStyleSheet from 'react-native-extended-stylesheet';

...

render() {
  return (
    <View style={styles.column}></View>
  );
}

...

const styles = EStyleSheet.create({
    '@media ios': {
      column: {
        width: '80%'
      }
    },
    '@media android': {
      column: {
        width: '90%'
      }
    }
});

You can also use it for particular style items:

const styles = EStyleSheet.create({
   column: {
      '@media ios': {
         width: '80%'
      },
      '@media android': {
         width: '90%'
      }
   }
});
1
votes

One way to achieve is to have both different styles and then apply it dynamically in render. For ex: 

render(){
  let platformStyle = Platform.OS === 'ios' ? styles.iosStyle: styles.androidStyle;
  return (<View style={platformStyle}>
          .....
          </View>);
  }
  .....
  const styles = StyleSheet.create({
    iosStyle: {
    },
    androidStyle: {

    }
  });
0
votes

I had the same problem with medium-sized RN app than you have.

Currently, I have external stylesheets for both iOS and Android (Layout.ios.js and Layout.android.js) which I import to components. This is meant for basic styling of components and it's not as hard to maintain as it sounds.

There are several minor issues on Android (e.g. lineHeight in some cases causes red screen of death). And that's why I had to implement this approach and I've been happy with it.

Besides most of the components share common styling, so external stylesheet works perfectly in that case too.

But in cases I have only minor difference, I do it locally, e.g.

header: {
  marginTop: (Platform.OS === 'ios') ? 20 : 15
}

I've tried to look for alternative approaches, but at the moment this seems to be the way of doing it.

In addition, textAlignVertical is just ignored by iOS, so you don't need to wrap it with Platform check.