{"id":21269666,"url":"https://github.com/s-fabian/react-native-alam","last_synced_at":"2025-07-11T05:31:18.982Z","repository":{"id":206698977,"uuid":"717523304","full_name":"s-fabian/react-native-alam","owner":"s-fabian","description":"A tailwind-like solution for react native","archived":false,"fork":false,"pushed_at":"2024-07-30T08:57:51.000Z","size":1779,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-30T12:05:21.186Z","etag":null,"topics":["react-native","styling","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-alam","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/s-fabian.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-11T18:13:24.000Z","updated_at":"2024-07-30T08:57:55.000Z","dependencies_parsed_at":"2024-02-12T23:27:16.183Z","dependency_job_id":"3e26fa18-084f-4f5a-9fe6-805422499a4c","html_url":"https://github.com/s-fabian/react-native-alam","commit_stats":null,"previous_names":["heroclay/react-native-alam"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-fabian%2Freact-native-alam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-fabian%2Freact-native-alam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-fabian%2Freact-native-alam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-fabian%2Freact-native-alam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s-fabian","download_url":"https://codeload.github.com/s-fabian/react-native-alam/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225693748,"owners_count":17509227,"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":["react-native","styling","tailwind","tailwindcss"],"created_at":"2024-11-21T08:09:55.577Z","updated_at":"2024-11-21T08:09:56.040Z","avatar_url":"https://github.com/s-fabian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-alam\n\nA tailwind-like solution for react native\n\nClick _[here](./ATTR.md)_ to see all properties / alams.\n\n## Installation\n\n```sh\nnpm install --save react-native-alam\nyarn add react-native-alam\npnpm add react-native-alam\nbun add react-native-alam\npip install react-native-alam # wait\n```\n\n## Usage\n\n`alam.tsx`\n\n```tsx\nimport createAlam from 'react-native-alam';\n\nexport const Alam = createAlam({});\n```\n\n`component.tsx`\n\n```tsx\nimport { Alam } from './alam';\n\nfunction MySuperComponent({ style }: { style?: Style }) {\n  return (\n    \u003cAlam.View style={style}\u003e\n      \u003cAlam.Text text-xl text-center\u003e\n        Hello World!\n      \u003c/Alam.Text\u003e\n    \u003c/Alam.View\u003e\n  );\n}\n\nexport default Alam.convert(MySuperComponent);\n```\n\n`index.tsx`\n\n```tsx\nimport MySuperComponent from './component';\nimport { Alam } from './alam';\n\nexport default function App() {\n  return (\n    \u003cAlam.View p={20}\u003e\n      \u003cMySuperComponent mt={30} /\u003e\n    \u003c/Alam.View\u003e\n  );\n}\n```\n\n## Advanced Usage\n\n`alam.tsx`\n\n```tsx\nimport createAlam from 'react-native-alam';\n\nconst extended = {\n  'custom-extended': (_: true, style: Style) =\u003e ({\n    color: 'red',\n    ...style,\n  }),\n};\n\nexport const Alam = createAlam(extended);\n```\n\n`index.tsx`\n\n```tsx\nimport { Alam } from './alam';\n\nexport default function App() {\n  return (\n    \u003cAlam.View p={20}\u003e\n      \u003cAlam.Text mt={30} custom-extended\u003e\n        Red Text\n      \u003c/Alam.Text\u003e\n    \u003c/Alam.View\u003e\n  );\n}\n```\n\n## With colors\n\n`root.tsx`\n\n```tsx\nimport { ThemeProvider, Appearance } from 'react-native-alam';\n\nexport const enum Colors {\n  Background = 'background',\n  Foreground = 'foreground',\n  Primary = 'primary',\n}\n\nexport default function Root({ component }) {\n  const isDarkMode = Appearance.getColorScheme() === 'dark';\n\n  const theme: Record\u003cColors, string\u003e = isDarkMode\n    ? {\n        background: '#000000',\n        foreground: '#eeeeee',\n        primary: '#eee8aa',\n      }\n    : {\n        background: '#ffffff',\n        foreground: '#111111',\n        primary: '#daa520',\n      };\n\n  return \u003cThemeProvider colors={theme}\u003e{component}\u003c/ThemeProvider\u003e;\n}\n```\n\n`index.tsx`\n\n```tsx\nimport { Alam } from './alam';\nimport { Colors } from './root';\n\nexport default function App() {\n  return (\n    \u003cAlam.View bg={Colors.Background} p={20}\u003e\n      \u003cAlam.Text color={Colors.Primary}\u003ePrimary Text\u003c/Alam.Text\u003e\n      \u003cAlam.Text color={Colors.Foreground}\u003eForeground Text\u003c/Alam.Text\u003e\n    \u003c/Alam.View\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-fabian%2Freact-native-alam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-fabian%2Freact-native-alam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-fabian%2Freact-native-alam/lists"}