vitalets / react-native-extended-stylesheet

Extended StyleSheets for React Native
MIT License
2.93k stars 132 forks source link

[feature request] Variables for media query breakpoints #172

Open liquidvisual opened 2 years ago

liquidvisual commented 2 years ago

Great library! I wish I'd found this sooner.

I'm using a lot of media queries for iPad layouts and it'd be really handy to be able to store breakpoints as variables like we can with values.

Example:

const styles = EStyleSheet.create({
  "@media (min-width: $md)": { // <-- $md instead of 744
    container: {
      borderWidth: 2,
      borderColor: "$danger",
    },
  }
EStyleSheet.build({
  $danger: "#fa3a52",
  $xs: 0,
  $sm: 375,
  $md: 744,
  $lg: 992,
  $xl: 1280,
  $xxl: 1440,
});