Added NPM package to make using @media queries easier - integrate via PR?

[hiddentao]

I created an NPM package to make using media queries easier - https://github.com/hiddentao/react-native-extended-stylesheet-breakpoints

Example, assume you have two width breakpoints - at 800px and 400px - and one height breakpoint at 500px. You would normally write:

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

const styles = EStyleSheet.create({
  button: {
    width: 500,
    height: 500
  },
  input: {
    paddingHorizontal: 50
  },
  '@media (max-height: 500px)': {
    button: {
      height: 250
    }
  },
  '@media (max-width: 800px)': {
    button: {
      width: 350
    }
  },
  '@media (max-width: 400px)': {
    button: {
      width: 200
    },
    input: {
      paddingHorizontal: 20
    }
  }
})

You can now instead write the above much more succinctly:

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

import {
  setWidthBreakpoints,
  setHeightBreakpoints,
  parse
} from 'react-native-extended-stylesheet-breakpoints'

const perWidth = setWidthBreakpoints(800, 400)
const perHeight = setHeightBreakpoints(500)

const styles = EStyleSheet.create(parse({
  button: {
    width: perWidth(500, 350, 200),
    height: perHeight(500, 250)
  },
  input: {
    paddingHorizontal: perWidth(50, 50, 20)
  }
}))

@vitalets I'm happy to raise a PR to get this integrated into this package if you think it's a good idea.

[vitalets]

Hi @hiddentao !

Although this method of writing @media is really compact it seems to me not very declarative. I think keeping it as an external package is ok.