{"id":4244,"url":"https://github.com/i6mi6/react-native-view","last_synced_at":"2025-04-11T18:31:30.656Z","repository":{"id":57341316,"uuid":"105522846","full_name":"i6mi6/react-native-view","owner":"i6mi6","description":"A lightweight View component for React Native","archived":false,"fork":false,"pushed_at":"2018-06-17T21:41:31.000Z","size":16,"stargazers_count":40,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T20:36:35.593Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/i6mi6.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":"2017-10-02T10:31:42.000Z","updated_at":"2025-01-31T08:07:23.000Z","dependencies_parsed_at":"2022-09-14T04:30:19.484Z","dependency_job_id":null,"html_url":"https://github.com/i6mi6/react-native-view","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/i6mi6%2Freact-native-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i6mi6","download_url":"https://codeload.github.com/i6mi6/react-native-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248458481,"owners_count":21107088,"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:05.633Z","updated_at":"2025-04-11T18:31:30.370Z","avatar_url":"https://github.com/i6mi6.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-view\nA lightweight View component that can be styled quickly.\n\n[![NPM](https://nodei.co/npm/react-native-view.png)](https://www.npmjs.com/package/react-native-view)\n\nInstallation\n---\n```javascript\n$ npm install react-native-view --save\n```\nthen\n```javascript\nimport View from 'react-native-view';\n/*...*/\n\u003cView vcenter hcenter\u003e\n/*...*/\n\u003c/View\u003e\n```\n# Usage\n\n## Align content\n\n\n#### Example\n\n- ##### center children horizontally\n\n```javascript\n\u003cView hcenter\u003e\n/*...*/\n\u003c/View\u003e\n```\n![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hcenter.png?raw=true \"hcenter\")\n\n\n- ##### align children to the left\n\n```javascript\n\u003cView hstart\u003e\n/*...*/\n\u003c/View\u003e\n```\n![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hstart.png?raw=true \"hstart\")\n\n\n- ##### center children horizontally and vertically\n\n```javascript\n\u003cView vcenter hcenter\u003e\n/*...*/\n\u003c/View\u003e\n```\n![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hcenter%20vcenter.png?raw=true \"vcenter hcenter\")\n\n## Available props:\n\n| prop | description |\n| ------ | ------ |\n| hstart | Align children to the left |\n| hcenter | Center children horizontally |\n| hend | Align children to the right |\n| vstart | Align children to the top |\n| vcenter | Center children vertically |\n| vend | Align children to the bottom |\n| flex | Apply **flex: 1** |\n| row | Becomes a row **(column by default)** |\n| stretch | Stretch the view to fill parent |\n| spread | Spread children evenly along the orientation **with padding** |\n| push | Spread children evenly along the orientation **without padding** |\n\n## More examples:\n\n\n- ##### spread\n\n```javascript\n\u003cView spread hcenter\u003e\n/*...*/\n\u003c/View\u003e\n```\n![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/spread.png?raw=true \"push\")\n\n\n- ##### push\n\n```javascript\n\u003cView push hcenter\u003e\n/*...*/\n\u003c/View\u003e\n```\n![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/push.png?raw=true \"spread\")\n\n\n## Padding\n\n\nBy default paddings can be set using breakpoints:\n\n| name | value in px |\n| ------ | ------ |\n| sm | 5 |\n| md | 15 |\n| lg | 30 |\n| xl | 45 |\n\nAlso, you can specify where paddings are applied using directional suffixes: **l - left | r - right | t - top | b - bottom**:\n\n#### Example\n\n\n\n- #### 15px padding top and left\n\n```javascript\n\u003cView mdpt mdpl\u003e\n\u003c/View\u003e\n```\n![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/mdpt_mdpl.png?raw=true \"mdpt mdpl\")\n\n\n- #### 5px padding on all sides\n\n```javascript\n\u003cView smp\u003e\n\u003c/View\u003e\n```\n![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/smp.png?raw=true \"smp\")\n\n\n\nLicense\n----\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi6mi6%2Freact-native-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi6mi6%2Freact-native-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi6mi6%2Freact-native-view/lists"}