{"id":4217,"url":"https://github.com/pjjanak/react-native-viewport","last_synced_at":"2025-12-27T04:54:33.635Z","repository":{"id":30017548,"uuid":"33565891","full_name":"pjjanak/react-native-viewport","owner":"pjjanak","description":"Utility to get current size of the viewport.","archived":false,"fork":false,"pushed_at":"2015-09-09T09:20:28.000Z","size":190,"stargazers_count":46,"open_issues_count":6,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-16T17:53:26.467Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","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/pjjanak.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}},"created_at":"2015-04-07T20:15:20.000Z","updated_at":"2023-12-27T04:44:24.000Z","dependencies_parsed_at":"2022-07-28T00:47:02.076Z","dependency_job_id":null,"html_url":"https://github.com/pjjanak/react-native-viewport","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjjanak%2Freact-native-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjjanak%2Freact-native-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjjanak%2Freact-native-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjjanak%2Freact-native-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pjjanak","download_url":"https://codeload.github.com/pjjanak/react-native-viewport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"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":[],"created_at":"2024-01-05T20:17:04.813Z","updated_at":"2025-12-27T04:54:33.583Z","avatar_url":"https://github.com/pjjanak.png","language":"Objective-C","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-viewport\nUtility to get current size of the viewport.\n\n## Add it to your project\n\n1. Run `npm install react-native-viewport --save`\n2. Open your project in XCode, right click on `Libraries` and click `Add Files to \"Your Project Name\"`.\n3. Navigate to `node_modules/react-native-viewport`\n4. Select `Viewport.xcodeproj`\n5. Add `libViewport.a` to `Build Phases -\u003e Link Binary With Libraries`.\n6. Click on `Viewport.xcodeproj` in `Libraries` and go the `Build Settings` tab. Double click the text to the right of `Header Search Paths` and verify that it has `$(SRCROOT)../react-native/React` - if it isn't, then add it. This is so XCode is able to find the headers that the `Viewport` source files are referring to by pointing to the header files installed within the `react-native` `node_modules` directory.\n7. Whenever you want to use it within React code now you can: `var Viewport = require('react-native-viewport');`\n\n## Methods\n***\nNote that any time you receive dimensions you will be given an object formatted like so:\n\n```\n{\n\twidth: 120,\n\theight: 120\n}\n```\n***\n\n`addEventListener(eventName, callback)`\n\n\u003eAdds an event listener to the backing viewport manager. Will call the provided callback whenever the event is fired.\n\n\u003eCurrently the only supported event is `dimensionsDidChange`. As a convenience, you can reference this event via `Viewport.events.DEVICE_DIMENSIONS_EVENT`. This event fires whenever the dimensions of the screen change (e.g. a screen rotation).\n\n`removeEventListener(eventName, callback)`\n\n\u003eRemoves an event listener from the backing viewport manager. Will only remove listeners with the exact name and callback specified.\n\n`getDimensions(callback)`\n\n\u003eGets the current dimensions and passes them to the specified callback. This is useful if you ever want to get dimensions in an adhoc way, such as when the app first boots up and before you have the chance to attach a listener.\n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjjanak%2Freact-native-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpjjanak%2Freact-native-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjjanak%2Freact-native-viewport/lists"}