{"id":4538,"url":"https://github.com/adbayb/react-native-responsive","last_synced_at":"2025-04-06T04:11:23.539Z","repository":{"id":51140127,"uuid":"56933004","full_name":"adbayb/react-native-responsive","owner":"adbayb","description":":package: The power of Media Queries now in your React Native project (ios and android) ! ","archived":false,"fork":false,"pushed_at":"2023-12-15T05:22:29.000Z","size":305,"stargazers_count":349,"open_issues_count":10,"forks_count":22,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-29T13:50:05.484Z","etag":null,"topics":["library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adbayb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-04-23T17:54:45.000Z","updated_at":"2023-11-28T15:07:11.000Z","dependencies_parsed_at":"2023-12-15T06:42:28.695Z","dependency_job_id":null,"html_url":"https://github.com/adbayb/react-native-responsive","commit_stats":null,"previous_names":["ayoubdev/react-native-responsive"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adbayb","download_url":"https://codeload.github.com/adbayb/react-native-responsive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339135,"owners_count":20923009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library"],"created_at":"2024-01-05T20:17:15.617Z","updated_at":"2025-04-06T04:11:23.519Z","avatar_url":"https://github.com/adbayb.png","language":"JavaScript","readme":"# React Native Responsive \u003cbr/\u003e [![npm version](https://img.shields.io/badge/npm-v1.0.0-green.svg)](https://www.npmjs.com/package/react-native-responsive)\t[![react-native version](https://img.shields.io/badge/react--native-min%20v0.25.0-blue.svg)](https://github.com/facebook/react-native) \n\n\u003cbr/\u003e\n\nThe power of Media Queries now in your React Native project (ios and android) !\u003cbr/\u003e\nThis library allows you to manage layouts between different sizes and displays: Responsive Design can now be easily managed.\u003cbr/\u003e\nA set of apis, components and decorators helps you to implement and build responsive applications easily and as fast as possible. \n\n\u003cbr/\u003e\n\n![Demonstration Application](https://cloud.githubusercontent.com/assets/10498826/17181797/9f0b9404-5421-11e6-80d3-3b1cbdcf5c6b.gif)\n\n*For more details, see [Demonstration Application Documentation](#demonstration-application) || For corresponding code, see [Demonstration Application Source Code](example)*\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Table of Contents\n\n- [Installation](#installation)\n- [General Usage](#general-usage)\n\t* [Introduction](#introduction)\n\t* [MediaQuery](#mediaquery-component-approach)\n\t\t* [Props](#props)\n\t* [MediaQueryDecorator](#mediaquerydecorator-decorator-approach)\n\t\t* [Prerequisites](#prerequisites)\n\t\t* [Valid Object Keys](#valid-object-keys)\n\t* [MediaQueryStyleSheet](#mediaquerystylesheet-functional-api-approach)\n\t\t* [Apis](#apis)\n\t\t* [Valid Media Features Keys](#valid-media-features-keys)\n- [Examples](#examples)\n\t* [Practical Use Case](#practical-use-case)\n\t* [Demonstration Application](#demonstration-application)\n- [Misc](#misc)\n\t* [Unit Of Measurement](#unit-of-measurement)\n\t* [Debug Component](#mediaquerydebug-debug-component)\n\t\t* [Props](#props)\n\t\t* [Output Example](#output-example)\n\t\t* [Important Note](#important-note-concerning-size-debugging-outputs)\n\t* [TODOs](#todos)\n- [License](#license)\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## Installation\n\n\u003cbr/\u003e\n\n- [x] Go to your root project folder\n- [x] Install react-native-responsive from npm repository: \n\n\t```\n\tnpm install react-native-responsive --save\n\t```\n\n- [x] You are now good to go !\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## General Usage\n\n\u003cbr/\u003e\n\n### Introduction\n\nBefore anything else, some definitions:\n- [x] Responsive Design is the practice of using tools to progressively enhance a content for different viewing contexts\n- [x] Media Query is a CSS tool to help adapting content rendering following conditions\n\nFor this, react-native-responsive library introduces 3 ways to implement media queries:\n- [x] A component based way: [MediaQuery](#mediaquery-component-approach)\n- [x] A decorator based way: [MediaQueryDecorator](#mediaquerydecorator-decorator-approach)\n- [x] A functional api based way: [MediaQueryStyleSheet](#mediaquerystylesheet-functional-api-approach)\n\n\u003cbr/\u003e\n\n### MediaQuery (Component approach)\n\nA MediaQuery component like any other React component with props describing common media query device rules.\nIf a rule is valid, all views stored inside corresponding MediaQuery are displayed. Else, they will be hidden.\nGiven it component nature, you can nest it and do all the normal things that you can do with regular React components.\n\n#### Props:\n\n\u003e **deviceWidth** number *optional* \u003cbr/\u003eDescribes the width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **minDeviceWidth** number *optional* \u003cbr/\u003eDescribes the minimum width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **maxDeviceWidth** number *optional* \u003cbr/\u003eDescribes the maximum width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **deviceHeight** number *optional* \u003cbr/\u003eDescribes the height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **minDeviceHeight** number *optional* \u003cbr/\u003eDescribes the minimum height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **maxDeviceHeight** number *optional* \u003cbr/\u003eDescribes the maximum height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **devicePixelRatio** number *optional* \u003cbr/\u003eDescribes the resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **minDevicePixelRatio** number *optional* \u003cbr/\u003eDescribes the minimum resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **maxDevicePixelRatio** number *optional* \u003cbr/\u003eDescribes the maximum resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **debug** boolean *optional, default = false* \u003cbr/\u003eEnables console debugging.\u003cbr/\u003e\u003cbr/\u003e\n\n\u003cbr/\u003e\n\n### MediaQueryDecorator (Decorator approach)\n\nAn ES2016 syntactic sugar to describe and build media queries (a higher order component is created and responsible for that task):\n```jsx\n@MediaQueryDecorator(MediaFeaturesObject, debug) //debug is optional and allows console debugging\nclass Example extends React.Component {\n\t...\n}\n```\n\n#### Prerequisites\n\nIn order to allow Babel transpiler to parse decorator syntax, you need to enable `transform-decorators` plugin.\n\nFor this:\n- [x] Go to your root project folder\n- [x] If not, create `.babelrc` file\n- [x] Add the following lines to your `.babelrc` file:\n```\n{\n\t\"extends\": \"react-native/packager/react-packager/rn-babelrc.json\",\n\t\"plugins\": [\"transform-decorators-legacy\"]\n}\n``` \n\n#### Valid Object Keys\n\n\u003e **deviceWidth** number *optional* \u003cbr/\u003eDescribes the width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **minDeviceWidth** number *optional* \u003cbr/\u003eDescribes the minimum width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **maxDeviceWidth** number *optional* \u003cbr/\u003eDescribes the maximum width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **deviceHeight** number *optional* \u003cbr/\u003eDescribes the height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **minDeviceHeight** number *optional* \u003cbr/\u003eDescribes the minimum height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **maxDeviceHeight** number *optional* \u003cbr/\u003eDescribes the maximum height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **devicePixelRatio** number *optional* \u003cbr/\u003eDescribes the resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **minDevicePixelRatio** number *optional* \u003cbr/\u003eDescribes the minimum resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **maxDevicePixelRatio** number *optional* \u003cbr/\u003eDescribes the maximum resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\n\u003cbr/\u003e\n\n### MediaQueryStyleSheet (Functional Api approach)\n\n#### Apis\n\n**`MediaQueryStyleSheet.create(baseStylesObject, mediaRulesObject);`** \u003cbr/\u003e\n\u003e It's similar to React Native StyleSheet.create(obj) api except that it takes one more argument: \u003cbr/\u003e\n\u003e mediaRulesObject (*optional*) stores media query rules as keys (corresponding styles are affected as values). \u003cbr/\u003e\n\u003e Rules are written like regular css media query rules.\u003cbr/\u003e\u003cbr/\u003e\n\n**`MediaQueryStyleSheet.debug();`** \u003cbr/\u003e\n\u003e Enables console debugging.\u003cbr/\u003e\u003cbr/\u003e\n\n#### Valid Media Features Keys\n\n\u003e **device-width** number *optional* \u003cbr/\u003eDescribes the width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **min-device-width** number *optional* \u003cbr/\u003eDescribes the minimum width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **max-device-width** number *optional* \u003cbr/\u003eDescribes the maximum width of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **device-height** number *optional* \u003cbr/\u003eDescribes the height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **min-device-height** number *optional* \u003cbr/\u003eDescribes the minimum height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **max-device-height** number *optional* \u003cbr/\u003eDescribes the maximum height of the rendering surface of the output device.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **device-pixel-ratio** number *optional* \u003cbr/\u003eDescribes the resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **min-device-pixel-ratio** number *optional* \u003cbr/\u003eDescribes the minimum resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **max-device-pixel-ratio** number *optional* \u003cbr/\u003eDescribes the maximum resolution in physical pixels per CSS pixel.\u003cbr/\u003e\u003cbr/\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## Examples\n\n\u003cbr/\u003e\n\n### Practical Use Case\n\nIf you want to apply to your application a common CSS media query like this:\n```css\n.container {\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: red;\n}\n@media (min-device-width: 320) and (max-device-height: 720) {\n\t.container {\n\t\tflex-direction: column;\n\t}\n}\n```\n\nWith React Native Responsive, you would write:\n- [x] Through the component MediaQuery:\n\t```jsx\n\t...\n\timport { MediaQuery } from \"react-native-responsive\";\n\n\tconst Example = (props) =\u003e {\n\t\treturn (\n\t\t\t\u003cMediaQuery minDeviceWidth={320} maxDeviceHeight={720}\u003e\n\t\t\t\t\u003cView style={{ flex: 1, flexDirection: \"column\", backgroundColor: \"red\" }}\u003e\n\t\t\t\t\t\u003cText\u003e Test \u003c/Text\u003e\n\t\t\t\t\u003c/View\u003e\n\t\t\t\u003c/MediaQuery\u003e\n\t\t\t\u003cMediaQuery maxDeviceWidth={319} minDeviceHeight={721}\u003e\n\t\t\t\t\u003cView style={{ flex: 1, flexDirection: \"row\", backgroundColor: \"red\" }}\u003e\n\t\t\t\t\t\u003cText\u003e Test \u003c/Text\u003e\n\t\t\t\t\u003c/View\u003e\n\t\t\t\u003c/MediaQuery\u003e\n\t\t);\n\t};\n\t```\n- [x] Through the class decorator MediaQueryDecorator:\n\t```jsx\n\t...\n\timport { MediaQueryDecorator } from \"react-native-responsive\";\n\n\t@MediaQueryDecorator({\n\t\tminDeviceWidth: 320,\n\t\tmaxDeviceHeight: 720\n\t});\n\tclass Example1 extends React.Component {\n\t\t...\n\t}\n\n\t@MediaQueryDecorator({\n\t\tmaxDeviceWidth: 319,\n\t\tminDeviceHeight: 721\n\t});\n\tclass Example2 extends React.Component {\n\t\t...\n\t}\n\t```\n- [x] Through the functional api MediaQueryStyleSheet (more concise since css properties are automatically merged):\n\t```jsx\n\t...\n\timport { MediaQueryStyleSheet } from \"react-native-responsive\";\n\n\tconst styles = MediaQueryStyleSheet.create(\n\t\t//Base styles:\n\t\t{\n\t\t\tcontainer: {\n\t\t\t\tflex: 1,\n\t\t\t\tflexDirection: \"row\",\n\t\t\t\tbackgroundColor: \"red\"\n\t\t\t}\n\t\t},\n\t\t//Media Queries styles:\n\t\t{\n\t\t\t\"@media (min-device-width: 320) and (max-device-height: 720)\": {\n\t\t\t\tcontainer: {\n\t\t\t\t\tflexDirection: \"column\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t);\n\t```\n\n\u003cbr/\u003e\n\n#### Tips for DRY Media Queries\nMuch like SCSS and other preprocessed libraries, you can create a variable to reuse common queries. \n\nIn scss you might do:\n```scss\n$xsUp: \"@media all and (min-width: 320px)\";\n```\n\nWith ES6 you might do:\n```js\nconst IPHONE_7_AND_UP = `@media (min-device-width: 320) and (min-device-height: 720)`;\n```\n\n\u003cbr /\u003e\n\nFor further `DRY`-ness, create a seperate file with all of your media query breakpoints and export for use throughout your application.\n\n```js\nconst IPHONE_WIDTH = 320;\nconst IPHONE_7_HEIGHT = 720;\nexport const IPHONE_7_AND_UP = `@media (min-device-width: ${IPHONE_WIDTH) and (min-device-height: ${IPHONE_7_HEIGHT)`;\n```\n\nAltogether that would look like:\n\n```js\nimport {IPHONE_7_AND_UP} from '../styles/breakpoints';\n\n...\n\nconst styles = MediaQueryStyleSheet.create(\n\t//Base styles:\n\t{\n\t\tcontainer: {\n\t\t\tflex: 1,\n\t\t\tflexDirection: \"row\",\n\t\t\tbackgroundColor: \"red\"\n\t\t}\n\t},\n\t//Media Queries styles:\n\t{\n\t\t[IPHONE_7_AND_UP]: {\n\t\t\tcontainer: {\n\t\t\t\tflexDirection: \"column\"\n\t\t\t}\n\t\t}\n\t}\n);\n```\n\u003cbr /\u003e\n\n### Demonstration Application\n\nIf you want an overview of this library, it's interesting to try the demonstration code located inside `./example` folder.\n\n#### Prerequisites\n\nTo build and test this demo, just follow these steps:\n\n- [x] Connect your device or launch your Android emulator\n- [x] Clone this repository\n- [x] Go to the example folder: `cd ./example`\n- [x] Install npm dependencies: `npm install`\n- [x] Build and deploy the demonstration application by running: \n\t- If you develop on an ios device: `npm run cli run-ios`\n\t- If you develop on an android device: `npm run cli run-android`\n- [x] Enjoy the demonstration !\n\n#### Screenshot output\n\nHere's different layouts managed by React Native Responsive module (Nexus 5 smartphone vs Nexus 10 tablet):\n\n*For corresponding code, see [Source Code](example)*\n\n![Demonstration Application](https://cloud.githubusercontent.com/assets/10498826/17181797/9f0b9404-5421-11e6-80d3-3b1cbdcf5c6b.gif)\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## Misc\n\n\u003cbr/\u003e\n\n### Unit Of Measurement\n\nAll Media Queries (like all React Native Css properties) are expressed in CSS pixels (\u003c=\u003e dip/dp: density independant pixel) (a CSS pixel may not be the same as a hardware pixel especially on high-density displays).\n\nTypically:\n```\ncssPixel (in dip/dp) = hardwarePixel (in px) / pixelRatio\n```\nYou must take in account this while writing your media rules. For example, for a device with a width of 1920 pixels, a height of 1080 pixels and a pixel ratio of 3, you would write instead 640 dp (=1920/3) for width and 360 dp (=1080/3) for height.\n\n*See [mydevice.io](http://mydevice.io/devices/) for some units mapping according to devices* \n\n\u003cbr/\u003e\n\n### MediaQueryDebug (Debug Component)\n\nIf you want some information regarding to hardware specifications of your device, there is a component dedicated to this: **MediaQueryDebug**:\n```jsx\nimport { MediaQueryDebug } from \"react-native-responsive\";\n\nconst Example = (props) =\u003e {\n\treturn (\n\t\t\u003cMediaQueryDebug style={{ flex: 1 }} styleText={{ fontSize: 10 }}/\u003e\n\t);\n};\n```\n\n#### Props\n\n\u003e [View props...](https://facebook.github.io/react-native/docs/view.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e **styleText** object *optional* \u003cbr/\u003eCustomizes text debugging styles.\u003cbr/\u003e\u003cbr/\u003e\n\n#### Output Example\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://cloud.githubusercontent.com/assets/10498826/17178139/868a846a-5414-11e6-910b-53ff70a2726c.png\" title=\"MediaQueryDebug Output\" alt=\"MediaQueryDebug Output\"/\u003e\n\u003c/p\u003e\n\n#### Important note concerning size debugging outputs\n\nOn Android, a device can have screen decoration (such as a navigation bar) along the edges of the display that reduce the amount of application space available from the size returned here.\nReact Native Responsive computes device constraints accordingly to window available space and not to hardware screen size (due to React Native Dimensions api).\n\nFor example, a LG Nexus 5 has:\n```\nHardware view = 640 x 360 dp\nContent view = 592 x 360 dp (due to 48 dp of navigation bar)\n```\n\n\u003cbr/\u003e\n\n### TODOs\n\n- [x] Replace React Native Dimensions.get(\"window\") api (dependent from initial orientation screen) by a custom ios/android native module independent from initial device orientation \n- [x] Add more features:\n\t- Orientation (needs to create android and ios orientation event handler native dependencies)\n\t- Platform ios/android (checks from React Native Platform api)\n- [x] Allow nested media rules through MediaQueryStyleSheet.create() api\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## License\n\n[MIT](./LICENSE \"License MIT\")\n","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadbayb%2Freact-native-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadbayb%2Freact-native-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadbayb%2Freact-native-responsive/lists"}