{"id":18264732,"url":"https://github.com/native-ly/native-layout-stack","last_synced_at":"2025-07-05T09:38:09.734Z","repository":{"id":38174011,"uuid":"290954075","full_name":"native-ly/native-layout-stack","owner":"native-ly","description":"↘️ SwiftUI like layout management for React Native","archived":false,"fork":false,"pushed_at":"2023-02-03T15:43:54.000Z","size":2777,"stargazers_count":10,"open_issues_count":19,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-20T19:17:06.720Z","etag":null,"topics":["android","expo","grid","horizontal","ios","layout","library","mobile","react","react-native","spacer","stack","swiftui","vertical","web"],"latest_commit_sha":null,"homepage":"https://snack.expo.io/@jbiesiada/native-layout-stack","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/native-ly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-28T04:53:34.000Z","updated_at":"2024-04-15T16:58:01.000Z","dependencies_parsed_at":"2023-02-18T08:31:36.502Z","dependency_job_id":null,"html_url":"https://github.com/native-ly/native-layout-stack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-layout-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-layout-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-layout-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-layout-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/native-ly","download_url":"https://codeload.github.com/native-ly/native-layout-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247252015,"owners_count":20908609,"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":["android","expo","grid","horizontal","ios","layout","library","mobile","react","react-native","spacer","stack","swiftui","vertical","web"],"created_at":"2024-11-05T11:15:46.180Z","updated_at":"2025-04-04T21:30:47.464Z","avatar_url":"https://github.com/native-ly.png","language":"TypeScript","readme":"# [native-layout-stack](https://github.com/native-ly/native-layout-stack)\n\n[![NPM version](https://img.shields.io/npm/v/native-layout-stack?style=flat-square)](https://www.npmjs.com/package/native-layout-stack)\n[![NPM downloads](https://img.shields.io/npm/dm/native-layout-stack?style=flat-square)](https://www.npmjs.com/package/native-layout-stack)\n[![NPM license](https://img.shields.io/npm/l/native-layout-stack?style=flat-square)](https://www.npmjs.com/package/native-layout-stack)\n[![run in expo snack](https://img.shields.io/badge/Run%20in%20Snack-4630EB?style=flat-square\u0026logo=EXPO\u0026labelColor=FFF\u0026logoColor=000)](https://snack.expo.io/@jbiesiada/native-layout-stack)\n[![Codecov](https://img.shields.io/codecov/c/github/native-ly/native-layout-stack?style=flat-square)](https://codecov.io/gh/native-ly/native-layout-stack)\n[![Travis](https://img.shields.io/travis/com/native-ly/native-layout-stack/main?style=flat-square)](https://app.travis-ci.com/github/native-ly/native-layout-stack)\n\n## About\n\n[SwiftUI](https://developer.apple.com/xcode/swiftui/) like layout management for React Native\n\n### Idea\n\nThis library recreates SwiftUI components in React Native:\n\n**Stack**\n\n- [HStack](https://developer.apple.com/documentation/swiftui/hstack/)\n- [VStack](https://developer.apple.com/documentation/swiftui/vstack/)\n\n**Spacer**\n\n- [Spacer](https://developer.apple.com/documentation/swiftui/spacer/)\n\n### Alternatives\n\n- [Stacks](https://github.com/mobily/stacks/) by [Marcin Dziewulski](https://github.com/mobily/)\n- [react-native-divisible-view](https://github.com/kangsu-dev/react-native-divisible-view/) by [kangsu](https://github.com/kangsu-dev/)\n- [React Native Spacing System](https://github.com/hirokazutei/react-native-spacing-system/) by [Hirokazu Nakano Tei](https://github.com/hirokazutei/)\n- [react-native-stacks](https://github.com/andrew-levy/react-native-stacks/) by [Andrew Levy](https://github.com/andrew-levy/)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install native-layout-stack\n```\n\nOr Yarn:\n\n```sh\n$ yarn add native-layout-stack\n```\n\n## Getting Started\n\n**• Connect library with project using ES6 import:**\n\n```js\nimport { LayoutProvider, Stack, Spacer } from 'native-layout-stack'\n```\n\n## Options\n\n### LayoutProvider\n\n| **name**      | **type**                                                                                    | **description**                                   |\n| ------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------- |\n| padding       | Space or [Space] or [Space, Space] or [Space, Space, Space] or [Space, Space, Space, Space] | Outer space                                       |\n| spaces        | Space                                                                                       | Space between children                            |\n| omitNull      | boolean                                                                                     | Skip elements that are `null` or `React.Fragment` |\n| arrayDivision | boolean                                                                                     |                                                   |\n| debug         | boolean                                                                                     | Add random color to spaces                        |\n\n### Stack\n\nStack extends ViewProps and implements all [`LayoutProvider`](#layoutprovider) props without `debug`\n\n### Spacer\n\nComponent uses ViewProps\n\n### Types\n\n| **name** | **type**         |\n| -------- | ---------------- |\n| Space    | number or string |\n\n## Example\n\n```jsx\nimport React from 'react'\nimport { View } from 'react-native'\nimport { LayoutProvider, Stack, Spacer } from 'native-layout-stack'\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cStack padding={[20, 10]} spaces={20}\u003e\n      \u003cView /\u003e\n      \u003cView /\u003e\n      \u003cView /\u003e\n    \u003c/Stack\u003e\n  )\n}\n\nconst App = () =\u003e {\n  return (\n    \u003cLayoutProvider spaces={10} padding={20}\u003e\n      \u003cMyComponent /\u003e\n    \u003c/LayoutProvider\u003e\n  )\n}\n\nexport default App\n```\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnative-ly%2Fnative-layout-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnative-ly%2Fnative-layout-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnative-ly%2Fnative-layout-stack/lists"}