{"id":19078655,"url":"https://github.com/nidorx/react-native-ui-blueprint","last_synced_at":"2025-09-13T22:21:49.491Z","repository":{"id":35125560,"uuid":"207926528","full_name":"nidorx/react-native-ui-blueprint","owner":"nidorx","description":"No more wrong margins, text sizes and many other silly visual mistakes. React Native UI Blueprint allow to you implements a pixel-perfect design.","archived":false,"fork":false,"pushed_at":"2023-03-03T06:45:24.000Z","size":11194,"stargazers_count":59,"open_issues_count":10,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-06T05:31:06.699Z","etag":null,"topics":["designer","dev-tools","developer-tools","grid","guides","mobile","pixel-perfect","react-native","react-native-dev-tools","react-native-developer-tools","react-native-grid","react-native-guides","react-native-pixel-perfect","react-native-ruler","react-native-ui","react-native-ux","ruler","ui","ux"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/nidorx.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}},"created_at":"2019-09-11T23:48:54.000Z","updated_at":"2025-08-27T12:59:19.000Z","dependencies_parsed_at":"2023-02-15T06:46:34.783Z","dependency_job_id":"9e0e2e6a-cab7-4e79-b22e-cc73165aae31","html_url":"https://github.com/nidorx/react-native-ui-blueprint","commit_stats":null,"previous_names":["nidorx/react-native-blueprint"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/nidorx/react-native-ui-blueprint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nidorx%2Freact-native-ui-blueprint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nidorx%2Freact-native-ui-blueprint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nidorx%2Freact-native-ui-blueprint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nidorx%2Freact-native-ui-blueprint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nidorx","download_url":"https://codeload.github.com/nidorx/react-native-ui-blueprint/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nidorx%2Freact-native-ui-blueprint/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273893363,"owners_count":25186632,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["designer","dev-tools","developer-tools","grid","guides","mobile","pixel-perfect","react-native","react-native-dev-tools","react-native-developer-tools","react-native-grid","react-native-guides","react-native-pixel-perfect","react-native-ruler","react-native-ui","react-native-ux","ruler","ui","ux"],"created_at":"2024-11-09T02:11:20.789Z","updated_at":"2025-09-13T22:21:49.394Z","avatar_url":"https://github.com/nidorx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003eReact Native UI Blueprint\u003c/h1\u003e\n    \u003cimg src=\"./docs/logo-sm.png\" width=\"250\" /\u003e\n    \u003cp align=\"center\"\u003e\n        To develop pixel perfect apps\n    \u003c/p\u003e    \n    \u003cp\u003e\n        \u003ca href=\"https://badge.fury.io/js/react-native-ui-blueprint\"\u003e\n            \u003cimg src=\"https://badge.fury.io/js/react-native-ui-blueprint.svg\" alt=\"npm version\"\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\nNo more wrong margins, text sizes and many other silly visual mistakes. **React Native UI Blueprint** allow to you implements a pixel-perfect design.\n \n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/features.png\" /\u003e\n\u003c/div\u003e\n\n\n## Installation\n\nYou can install React Native UI Blueprint via Yarn or NPM.\n\n```bash\n# Yarn\nyarn add react-native-ui-blueprint\n\n# NPM\nnpm i react-native-ui-blueprint --save\n```\n\nAfter that, simply encapsulate your application with Blueprint and finally tap the bottom left of the device to show Blueprint.\n\n```jsx\nimport Blueprint from 'react-native-ui-blueprint';\n\n\nexport default class App extends React.PureComponent {\n    render() {\n        return (\n            \u003cBlueprint\u003e\n                \u003cStatusBar backgroundColor={'transparent'} translucent={true} barStyle=\"dark-content\"/\u003e\n                \u003cView style={[StyleSheet.absoluteFill, {justifyContent: 'center', alignItems: 'center'}]}\u003e\n                    \u003cText\u003e\n                        {'My App'}\n                    \u003c/Text\u003e\n                \u003c/View\u003e\n            \u003c/Blueprint\u003e\n        );\n    }\n}\n```\n\n## Reload\n\nFor those who are too lazy to shake the phone, when running Packager (on port 8081), lets you reload the application.\n\n## Grid\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/grid.png\" /\u003e\n\u003c/div\u003e\n\nDisplays grids on your application, allowing the development of interfaces with regular and homogeneous spacing.\n\nWhen working in teams, designers often use grid, use this tool to verify design implementation.\n\n```jsx\n\u003cBlueprint            \n    grid={[\n        {\n            spacing: 30\n        },\n        {\n            spacing: 60\n        }\n    ]}\n \u003e\n    ...\n\u003c/Blueprint\u003e\n```\n\nBy default, Blueprint already defines two grids with 8 and 24 [dp] spacing.\n\nYou can completely remove the grid by passing `false` as parameter.\n\n```jsx\n\u003cBlueprint            \n    grid={false}\n \u003e\n    ...\n\u003c/Blueprint\u003e\n```\n\n### Alignment\n\nThere are 4 horizontal alignment options:\n\n#### Side\n \nThe grid is created from the side, respecting the defined spacing. Useful for validating component spacings and side positions.\n\n#### Center\n\nThe grid is created from the center of the screen, respecting the defined spacing. Used to check centralized alignment of components.\n\n#### Left and Right\n\nThe grid is created from the defined side.\n\n### Grid Properties\n\n| name | type | default | Description |\n|---|---|---|---|\n| `spacing` | `number` | -- | The spacing between grid lines. In [dp] |\n| `color` | `string` | `GRAY:#828282`, `MAGENTA:#ff4aff` or `BLUE:#18A0FB`| Allows you to set the line color. If not informed, the system will switch between GRAY, BLUE and MAGENTA |\n| `opacity` | `number` | `0.2 + $index * 0.1` | Allows you to set opacity. If not entered, the system automatically calculates a value starting with `0.2` and increasing by `0.1` |\n| `width` | `number` | `StyleSheet.hairlineWidth` (1 pixel) | Lets you set the line width |\n\n## Guides\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/guide.png\" /\u003e\n\u003c/div\u003e\n\nDisplays vertical or horizontal guide lines with specific placement. Unlike the grid, the guides does not repeat and allows you to work with three units of measurement: pixel, [dp] and percent.\n\n```jsx\n\u003cBlueprint            \n    guides={[\n        {\n            position: 55,\n            orientation: 'vertical',\n            unit: 'dp'\n        },\n        {\n            position: 616,\n            orientation: 'horizontal',\n            unit: 'dp',\n            color:'#ff4aff'\n        },\n        {\n            position: 580,\n            orientation: 'horizontal',\n            unit: 'dp',\n            color:'#ff4aff'\n        }\n    ]}\n \u003e\n    ...\n\u003c/Blueprint\u003e\n```\n\nBy default Blueprint displays one vertical and one horizontal line, both on 50% of the screen.\n\nYou can completely remove the guides by passing false as parameter.\n\n```jsx\n\u003cBlueprint            \n    guides={false}\n \u003e\n    ...\n\u003c/Blueprint\u003e\n```\n\n### Guides Properties\n\n\n| name | type | default | Description |\n|---|---|---|---|\n| `position` | `number`  | -- | The positioning of the guide. When the unit is pixel, expect an integer. |\n| `orientation` | `horizontal` or `vertical` | --| Sets the orientation of the guide |\n| `unit` | `%`, `dp` or`px` | `dp` | The unit of measurement used to set the guide position |\n| `color` | `string` | `BLUE:#18A0FB`| Allows you to set the line color. |\n| `opacity` | `number` | `0.2 + $index * 0.1` | Allows you to set opacity. If not entered, the system automatically calculates a value starting with `0.2` and increasing by `0.1` |\n| `width` | `number` | `StyleSheet.hairlineWidth` (1 pixel) | Lets you set the line width |\n\n\n## Ruler\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/ruler.png\" /\u003e\n    \u003cimg src=\"./docs/ruler.gif\" /\u003e\n\u003c/div\u003e\n\nAdds a scalable ruler to the screen. The ruler is useful for checking component size and distance from the edges of the screen.\n\nAllows you to change the unit of measurement to pixel, [dp], or percent.\n\nThe ruler also allows you to change the sensitivity to work more accurately. The values are toggled by `1`, `0.5` and `0.1`.\n\n## Ghost\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/ghost.png\" /\u003e\n    \u003cimg src=\"./docs/ghost.gif\" /\u003e\n\u003c/div\u003e\n\nAllows developers and designers put a semi-transparent image overlay over the top of the developed App and perform pixel perfect comparison between them.\n\n\nYou can add local files or configure remote calls asynchronously. With remote calling, you can implement integrations with any Wireframe system that provides an API.\n\n\n### Local files\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/ghost-2.png\" /\u003e\n\u003c/div\u003e\n\n```jsx\n\u003cBlueprint            \n    images={[\n        require('./assets/wireframe-1.png'),\n        require('./assets/wireframe-2.png')\n    ]}\n \u003e\n    ...\n\u003c/Blueprint\u003e\n```\n\n### Remote files\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/ghost-3.png\" /\u003e\n\u003c/div\u003e\n\nIf you know the full path of the screen images, just tell uri. Blueprint looks for information about the height and width of the images.\n\n\n```jsx\n\u003cBlueprint            \n    images={[\n       {\n           uri: 'https://upload.wikimedia.org/wikipedia/commons/4/47/Profilewireframe.png'\n       },\n        require('./assets/wireframe-1.png'),\n        require('./assets/wireframe-2.png')\n    ]}\n \u003e\n    ...\n\u003c/Blueprint\u003e\n```\n\n### Custom Server\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/ghost-4.png\" /\u003e\n    \u003cimg src=\"./docs/ghost-slider.gif\" /\u003e\n\u003c/div\u003e\n\n\nYou can also use some private image server. An example implementation, with node.js, is available in the \"server\" folder.\n\nExternal integration allows the use of any image service that provides an API for listing and viewing images.\n\nYou can look for documentation from services like [Zeplin](https://zeplin.io/) or [Figma](https://www.figma.com/) to do your integrations.\n\n\nFor integration, simply implement an asynchronous function in the `imagesAsync` property.\n\n**Type**\n```jsx        \ntype ImageInfoAsync = {\n    thumb?: {\n        uri: string;\n        width?: number;\n        height?: number;\n    };\n    uri: string;\n    width?: number;\n    height?: number;\n    title?: string;\n};\n\nconst imagesAsynck: () =\u003e Promise\u003cArray\u003cImageInfoAsync\u003e\u003e; \n```\n\n**Sample**\n```jsx\n\u003cBlueprint            \n    imagesAsync={() =\u003e {\n        const server = 'http://localhost:3000';\n        return fetch(`${server}/images.json`)\n            .then(resp =\u003e resp.json())\n            .then(images =\u003e {\n                images.forEach((image: any) =\u003e {\n                    image.uri = `${server}/${image.uri}`;\n                    image.thumb.uri = `${server}/${image.thumb.uri}`;\n                });\n                return images;\n            });\n    }}\n \u003e\n    ...\n\u003c/Blueprint\u003e\n```\n\n### Image Properties\n\n**Type**: `Array\u003cnumber | ImageRequireSource\u003e`\n\n| name | type | Description |\n|---|---|---|\n| `uri` | `string` | `uri` is a string representing the resource identifier for the image, which could be an http address. |\n| `width` | `number` | `width` and `height` can be specified if known at build time. |\n| `height` | `number` | `width` and `height` can be specified if known at build time. |\n\n\n\n## Zoom\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/zoom.png\" /\u003e\n    \u003cimg src=\"./docs/zoom.gif\" /\u003e\n\u003c/div\u003e\n\n\nOne of the most powerful tools in the Blueprint suite, zooming is applied to your application and all other functionality.\n\nThis allows you to work pixel by pixel on your screen, impressing everyone with the quality of your application.\n\n\n\n\n## Feedback, Requests and Roadmap\n\nPlease use [GitHub issues] for feedback, questions or comments.\n\nIf you have specific feature requests or would like to vote on what others are recommending, please go to the [GitHub issues] section as well. I would love to see what you are thinking.\n\n## Contributing\n\nYou can contribute in many ways to this project.\n\n### Translating and documenting\n\nI'm not a native speaker of the English language, so you may have noticed a lot of grammar errors in this documentation.\n\nYou can FORK this project and suggest improvements to this document (https://github.com/nidorx/react-native-ui-blueprint/edit/master/README.md).\n\nIf you find it more convenient, report a issue with the details on [GitHub issues].\n\n### Reporting Issues\n\nIf you have encountered a problem with this component please file a defect on [GitHub issues].\n\nDescribe as much detail as possible to get the problem reproduced and eventually corrected.\n\n### Fixing defects and adding improvements\n\n1. Fork it (\u003chttps://github.com/nidorx/react-native-ui-blueprint/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n## License\n\nThis code is distributed under the terms and conditions of the [MIT license](LICENSE).\n\n\n[dp]: https://en.wikipedia.org/wiki/Device-independent_pixel\n[GitHub issues]: https://github.com/nidorx/react-native-ui-blueprint/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnidorx%2Freact-native-ui-blueprint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnidorx%2Freact-native-ui-blueprint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnidorx%2Freact-native-ui-blueprint/lists"}