{"id":16922968,"url":"https://github.com/tjjfvi/solid-native","last_synced_at":"2025-04-09T21:14:50.697Z","repository":{"id":54465702,"uuid":"473256635","full_name":"tjjfvi/solid-native","owner":"tjjfvi","description":"Solid Native expands the Solid ecosystem to include development of native mobile applications.","archived":false,"fork":false,"pushed_at":"2023-11-05T22:57:33.000Z","size":123,"stargazers_count":173,"open_issues_count":1,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-09T21:14:42.939Z","etag":null,"topics":["solidjs"],"latest_commit_sha":null,"homepage":"https://solid-native.t6.fyi","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/tjjfvi.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":"2022-03-23T15:49:49.000Z","updated_at":"2025-03-31T13:16:52.000Z","dependencies_parsed_at":"2024-10-26T21:18:36.774Z","dependency_job_id":"71f49172-00bd-45d2-80b8-9973cd990891","html_url":"https://github.com/tjjfvi/solid-native","commit_stats":{"total_commits":43,"total_committers":4,"mean_commits":10.75,"dds":0.3023255813953488,"last_synced_commit":"abefbf0bb7c5983a9cb36bd598fcf8640256fc78"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjjfvi%2Fsolid-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjjfvi%2Fsolid-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjjfvi%2Fsolid-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjjfvi%2Fsolid-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tjjfvi","download_url":"https://codeload.github.com/tjjfvi/solid-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111971,"owners_count":21049578,"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":["solidjs"],"created_at":"2024-10-13T19:57:25.560Z","updated_at":"2025-04-09T21:14:50.662Z","avatar_url":"https://github.com/tjjfvi.png","language":"TypeScript","readme":"# Solid Native\n\nSolid Native expands the [Solid](https://www.solidjs.com) ecosystem to include\ndevelopment of native mobile applications.\n\n`solid-native` applies `solid-js` as a layer over React Native, making available\ncomposable reactive primitives allowing for fine-grained reactive programing.\nThis results in an approach to native development with the ergonomics and\nfamiliarity known and expected by Solid developers, combined with the addition\nof tooling and libraries from the React Native ecosystem.\n\nCheck out the [demo app](https://github.com/tjjfvi/solid-native/tree/main/examples)!\n\n## Goals\n\nTo make native development using Solid comparable to web development using\nSolid.\n\nTo allow for 'Solid Native' projects, including:\n- new projects based on Solid components that use can consume third-party\n  library React Native components when needed\n- new libraries based on Solid components that want to be available to the React\n  Native audience\n- existing React Native projects that want to add and migrate to Solid\n  components\n- existing React Native libraries that want to add and migrate to Solid\n  components while remaining available to the React Native audience\n\n## Installation\n\n1. Create a new React Native project, or check out an existing one.\n2. Install `solid-native` from NPM using your package manager of choice.\n3. Add `\"solid-native/babel-preset\"` to the `presets` array in your `babel.config.json`\n4. Configure Metro by adding `'cjs'` as a source extension; see `examples/metro.config.js`.\n\n## Usage\n\nWhen you install Solid Native, nothing will change at first, and your app\nshould continue to function as normal. This is because, by default, `.jsx` and `.tsx`\nfiles will be processed as 'React' to accommodate existing React Native components.\n\nTo start using Solid Native, create a new component file, and add `// @solid` to the top.\n\nFor example:\n\n```tsx\n// @solid\nimport { Text } from \"react-native\"\n\nexport const HelloSolid = () =\u003e {\n  return \u003cText\u003eHello, Solid!\u003c/Text\u003e\n}\n```\n\nThe file will be processed as 'Solid' and the component can now be used in your app, in both Solid and React components.\n\nWriting components in Solid Native is much like writing components in standard\nSolid, but with primitive DOM elements replaced with primitive React Native Elements.\n\nFor example, here's Solid's [counter example](https://www.solidjs.com/examples/counter) written in Solid Native.\n\n```tsx\n// @solid\nimport { Text } from \"react-native\";\nimport { createSignal, onCleanup } from \"solid-native\";\n\nexport const CountingComponent = () =\u003e {\n  const [count, setCount] = createSignal(0);\n  const interval = setInterval(\n    () =\u003e setCount(c =\u003e c + 1),\n    1000\n  );\n  onCleanup(() =\u003e clearInterval(interval));\n  return \u003cText\u003eCount value is {count()}\u003c/Text\u003e;\n};\n```\n\nThe only differences here are the `// @solid` at the top and the use of `Text`\ninstead of `div`.\n\n## Interop between Solid \u0026 React\n\nSolid Native supports largely seamless interop between React components and Solid\ncomponents.\n\nWhen you use a Solid component in a React component, Solid Native internally\ncreates signals for tracking the React props, and passes a reactive proxy object to the\nSolid component.\n\nWhen you use a React component in a Solid component, Solid Native effectively\ncreates a memo for each prop, and triggers a rerender on the React component\nwhenever one of the memos updates. It uses Solid's\n[`children`](https://www.solidjs.com/docs/latest/api#children) function to\ncreate the memo for the `children` prop.\n\n### Using React Hooks in Solid Files\n\nGenerally, you shouldn't need to do this; most React hooks have Solid analogs\nthat should be used instead.\n\nHowever, if you must use a React hook (e.g. to use a an established React context,\nor a library such as React Navigation), then you can wrap your Solid component\nwith `withHooks`:\n\n```ts\n// @solid\nimport * as React from \"react\"\nimport { withHooks } from \"solid-native\";\n\nexport const MyComponent = withHooks((hook, props: MyProps) =\u003e {\n  // Like any other Solid component, this component will only be\n  // called once and will not rerender.\n  // However, the function passed to hook will be called every time\n  // the internal React component rerenders.\n  const context = hook(() =\u003e React.useContext(MyContext));\n  // `context` is now a *reactive accessor* to the value returned by `useContext`.\n\n  // ...\n})\n```\n\nThe `hook` function can be called multiple times, but it should only be called\nsynchronously, i.e. before the component returns.\n\n\n## Limitations\n\n### Currently Unsupported Solid APIs\n\nSome Solid APIs are not currently supported:\n- `Context`\n- `Suspense`\n- `ErrorBoundary`\n\nThese are not necessarily fundamental limitations; PRs welcome!\n\n### Calling Solid Components as Regular Functions\n\nBecause Solid Native supports interop between React components and Solid\ncomponents, **you cannot call top-level Solid components as regular functions**.\nDoing so will instead call the React bridge component, and have undesired\neffects.\n\nInstead, instantiate components using JSX syntax.\n\n### Calling Regular Functions as Solid Components\n\nBecause Solid Native supports interop between React components and Solid\ncomponents, **you cannot call non-JSX returning functions as Solid components**.\nDoing so will instead invoke the function as a React component, and have\nundesired effects.\n\nInstead, either return JSX from the function or explicitly make the function a\nSolid component by passing it to `wrapSolidComponent`.\n\n### Unsupported React Features\n\nMost components in React Native libraries will work seamlessly in Solid components,\nwith the exception of:\n- React components that attempt to introspect the children they are passed\n- React components expecting nullary functions as children\n\nIn both of these cases, the best solution is to create a React component that\nwraps the problematic components to avoid the limitations.\n\n## Future Features\n\nPRs are, as always, welcome!\n\n- Supporting more Solid APIs (see [Unsupported Solid APIs](#unsupported-solid-apis))\n- Performance testing\n- Defaulting files to Solid-mode based on file location\n\n## A Note on Naming\n\nThis library is called Solid Native instead of `solid-react-native` because the\ncore purpose of the library is the 'Solid + Native' part – the use of React\nNative is merely a means to that end.\n \nIf a viable library that accomplishes 'Solid + Native' without using React\nNative is created, I will be delighted to cede the name. However, since React\nNative is backed by Facebook and has been under ongoing development for 6 years,\nI think it is pragmatic to base an effort towards 'Solid + Native' off of it.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftjjfvi%2Fsolid-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftjjfvi%2Fsolid-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftjjfvi%2Fsolid-native/lists"}