Easy Way to Mock window.matchMedia in React Native

react-native-match-media

window.matchMedia polyfill for React Native

Has a peer dependency of walmartreact/react-native-orientation-listener, so make sure that's installed first.

Usage

import matchMedia from 'react-native-match-media'

global.matchMedia = matchMedia

if (global.matchMedia('(min-width: 400px)').matches) {
  // Do something
}

.babelrc

{
	"presets": ["react-native"]
}

.editorconfig

# EditorConfig helps developers define and maintain
# consistent coding styles between different editors and IDEs.

root = true

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

.eslintrc

{
  "extends": "airbnb/base",

  "parser": "babel-eslint",

  "plugins": [
    "babel"
  ],

  "rules": {
    "semi": [2, "never"],
    "no-trailing-spaces": [2, { "skipBlankLines": true }],
    "default-case": 0,
    "no-unused-expressions": [2, {
      "allowShortCircuit": true,
      "allowTernary": true
    }],
    "no-shadow": 0,
    "new-cap": 0,
    "no-loop-func": 0,
  },

  "ecmaFeatures": {
    "experimentalObjectRestSpread": true
  }
}

.gitignore

node_modules
lib
*.log

Download details:

Author: tuckerconnelly
Source: https://github.com/tuckerconnelly/react-native-match-media

License: MIT license

#reactnative #react #javascript