{"id":29773463,"url":"https://github.com/stinodes/nativesystem","last_synced_at":"2026-07-16T11:03:08.091Z","repository":{"id":57182981,"uuid":"132605263","full_name":"stinodes/nativesystem","owner":"stinodes","description":null,"archived":false,"fork":false,"pushed_at":"2018-11-12T14:41:00.000Z","size":3510,"stargazers_count":3,"open_issues_count":10,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-30T09:03:49.794Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stinodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-08T12:25:02.000Z","updated_at":"2018-10-02T09:09:54.000Z","dependencies_parsed_at":"2022-09-14T06:11:01.192Z","dependency_job_id":null,"html_url":"https://github.com/stinodes/nativesystem","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/stinodes/nativesystem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2Fnativesystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2Fnativesystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2Fnativesystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2Fnativesystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stinodes","download_url":"https://codeload.github.com/stinodes/nativesystem/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2Fnativesystem/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267320332,"owners_count":24068528,"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-07-27T02:00:11.917Z","response_time":82,"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":[],"created_at":"2025-07-27T07:16:42.275Z","updated_at":"2025-10-25T13:09:57.202Z","avatar_url":"https://github.com/stinodes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Native System\nA set of utils, views and systems to help you structure and use your theme \nand create your dynamically themed components using `glamorous`.  \n**Inspired by `styled-system` \u0026  focused on `react-native`.**\n\n## The idea\nThe library makes use of a theme containing a set of colors, \nan array of easily accessible spacings and sub-themes.  \nEvery sub-theme contains a default styling, but also modified versions, which\ncan be merged with the default one, making it easy to create variations of \nexisting components.  \nThe theme-object will look something like this when written out:  \n\n    {\n        colors: {\n            [colorName: string]: Color,\n        },\n        spacing: number[],\n        \n        [subThemeName: string]: {\n            default: {\n                // ... some styles \n            },\n            [modifier string]: {\n                // ... some different styles\n            }\n        }\n    }\n    \nAn api to build the theme up from scratch (or from a default one) is provided.\n\nAside from the theming structure, the library provides a set of utilities to\neasily extract certain colors or sub-themes from the root-theme, including easy\nhelpers to provide dynamic styling to `glamorous`-type components (this would also \nwork with `styled-components` or `emotion`).\n  * [**Theming**][theme-docs]\n\nAdditionally, there are components included which I personally find \nimportant when creating my React Native apps (they are not compatible for web, sadly). \nSome might be more useful to you and your app than others.   \nThese include the following:   \n  * [**Keyboard Handling**][keyboard-docs]  \n    A component sent using context to easily animate components across a component-tree\n    to handle the keyboard gracefully.\n  * **View/SystemView**: an easily styled View-alternative\n  * **Containers**  \n    A range of containers:\n    * **Screen**: easy wrapper to configure properties related to your app's screen, \n    like the StatusBar.\n    * **Row**: a row/list-entry component with a wide range of configurations.\n    * **Card**: a material design-styled card.\n    * **Absolute**: a pre-styled component that's positioned absolutely and takes \n    positioning props.\n    * **Modal**: A wrapper around React Native's native modal, with included overlay and \n    a component to prevent propagation of the close-event.\n    * **SimpleModal**: A pre-composed modal. Just pass in some children and handlers.\n    * **CardModal**: A modal styled like a card.\n    * **DismissArea**: A component handling touches outside of `TextInput`s to dismiss\n    the keyboard.\n  *  [**Coordinator**][coordinator-docs]  \n  A powerful helper-component to easily coordinate more complex \n  animations, so you don't have to spend ages writing interpolations and positioning.\n  * **Input**: A wrapper around React Native's `TextInput` \u0026 a helper to more easily wire \n  up your inputs with Formik. Also contains styled `TextInput`s with error-handling and such.\n  * **Button**:\n    * **Base**: A wrapper for your mark-up to easily add native touch handling without \n    impacting your layout.\n    * **Button**: A styled button component.\n  * **Misc**:\n    * **Text**: A text component. Wow.\n    * **Separator**: A line. To separate things.\n    * **WithThemeFAC**: I like FACs. So I made this. Allows you to get values out of \n    your theme without using a higher order component per se.\n    * **Spinner**: For when your app has not loaded data yet.\n        \n[theme-docs]: src/Components/Theme/Theming.md\n[keyboard-docs]: src/Components/Keyboard/Keyboard.md\n[coordinator-docs]: src/Components/Coordinator/Coordinator.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstinodes%2Fnativesystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstinodes%2Fnativesystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstinodes%2Fnativesystem/lists"}