react-native-media-queries-proposal.js

// 1. Queries for width, min-width, height & min-height
const a = StyleSheet.create({
  container: {
    fontSize: 16,
  },
  '@media (min-width: 500px) and (min-height: 600px)': {
    container: {
      fontSize: 10,
    },
  },
  '@media (min-width: 200px)': {
    container: {
      fontSize: 8,
    },
  },
});

// 2. Queries for orientation
StyleSheet.create({
  container: {
    fontSize: 16,
  },
  '@media (orientation: landscape)': {
    container: {
      fontSize: 15,
    }
  },
});

// 3. Queries with platform-specific stuff (via custom non-standard `ios/android` media_type)
StyleSheet.create({
  container: {
    fontSize: 16,
  },
  '@media ios (min-width: 600px)': {
    container: {
      fontSize: 15,
    }
  },
  '@media android (min-width: 600px)': {
    container: {
      fontSize: 14,
    }
  },
});

// 4. Queries for device ratio
StyleSheet.create({
  container: {
    fontSize: 16,
  },
  '@media ios (aspect-ratio: 16 / 9)': {
    container: {
      fontSize: 15,
    },
  },
});

// 5. Also nest inside styles as well
StyleSheet.create({
  container: {
    fontSize: 16,
    '@media ios (aspect-ratio: 16 / 9)': {
      fontSize: 15,
    },
  },
});

// 6. Platform specific styles
StyleSheet.create({
  container: {
    fontSize: 16,
  },
  '@media ios': {
    container: {
      fontSize: 15,
    },
  },
  '@media android': {
    container: {
      fontSize: 14,
    },
  },
});

I think it would be nicer to just nest the media query inside the selector like this, it looks more like the structure of media queries in css.

StyleSheet.create({
  container: {
    fontSize: 16,

    '@media (min-width: 500px) and (min-height: 600px)': {
      fontSize: 10,
    },  
  },
});

or

StyleSheet.create({
  container: {
    fontSize: 16,
  },
  '@media (min-width: 500px) and (min-height: 600px)': {
    container: {
      fontSize: 10,
    },  
  },
});

Yeah, great idea! Let me update the gist.

PS. It actually works in a way that you can embed media query at any level (even inside an array of transforms though that would've been quite weird) to get it merged with the object at the current level.

Also I like the platform queries but I think it should be something like

'@media (platform: ios)'

this way they look like the others and they can be combined

'@media (platform: android) and '(min-width: 500px)'

The reason they are implemented in place of all | screen etc is that the underlying parser already works with that.

The following quote from CSS3 also convinces me to using it:

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true.

It also has that benefit that we can use a 3rd party parser at the beginning to reduce number of logic that has to be written in order to parse that (in fact, it all works out of the box).

Oh, I see that's good then!