MediaQuery React Native

StyleSheet.js

export const Device = {
  select(variants) {
    if (W >= 300 && W <= 314) return variants.mobile300 || {}
    if (W >= 315 && W <= 341) return variants.iphone5 || {}
    if (W >= 342 && W <= 359) return variants.mobile342 || {}
    if (W >= 360 && W <= 374) return variants.mi5 || {}
    if (W >= 375 && W <= 399) return variants.iphone678 || {}
    if (W >= 400 && W <= 409) return variants.mobile400 || {}
    if (W >= 410 && W <= 414) return variants.googlePixel || {}
    if (W >= 415 && W <= 434) return variants.mobile415 || {}
    if (W >= 435 && W <= 480) return variants.redmiNote5 || {}
  }
}


const styles = StyleSheet.create({
  logo: {
    ...Device.select({
      iphone5: {
        width: 25,
        height: 25
      },
      mi5: {
        width: 25,
        height: 25
      },
      iphone678: {
        width: 35,
        height: 35
      },
      googlePixel: {
        width: 35,
        height: 35
      },
      redmiNote5: {
        width: 35,
        height: 35
      }
    })
  }
})