{"id":48469480,"url":"https://github.com/andrewkochulab/react-native-swiftui-dsl","last_synced_at":"2026-04-07T06:01:46.772Z","repository":{"id":342014289,"uuid":"1172421272","full_name":"AndrewKochulab/react-native-swiftui-dsl","owner":"AndrewKochulab","description":"A SwiftUI-inspired declarative DSL for building React Native UIs with chainable modifiers, theme system, and two-way bindings.","archived":false,"fork":false,"pushed_at":"2026-04-06T19:18:32.000Z","size":343,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-06T21:17:58.050Z","etag":null,"topics":["builder","declarative","dsl","expo","modifiers","react","react-native","swiftui","theme","ui"],"latest_commit_sha":null,"homepage":"","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/AndrewKochulab.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-04T09:39:55.000Z","updated_at":"2026-04-06T19:18:36.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/AndrewKochulab/react-native-swiftui-dsl","commit_stats":null,"previous_names":["andrewkochulab/react-native-swiftui-dsl"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewKochulab/react-native-swiftui-dsl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKochulab%2Freact-native-swiftui-dsl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKochulab%2Freact-native-swiftui-dsl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKochulab%2Freact-native-swiftui-dsl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKochulab%2Freact-native-swiftui-dsl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewKochulab","download_url":"https://codeload.github.com/AndrewKochulab/react-native-swiftui-dsl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewKochulab%2Freact-native-swiftui-dsl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31501903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["builder","declarative","dsl","expo","modifiers","react","react-native","swiftui","theme","ui"],"created_at":"2026-04-07T06:01:44.877Z","updated_at":"2026-04-07T06:01:46.755Z","avatar_url":"https://github.com/AndrewKochulab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/AndrewKochulab/react-native-swiftui-dsl/main/assets/banner.svg\" alt=\"React Native SwiftUI DSL\" width=\"100%\"\u003e\n\u003c/p\u003e\n\nChainable modifiers • ViewModifier protocol • Responsive layouts • Animations \u0026 Gestures • Theme-aware colors • Two-way bindings • Zero JSX • Global imports\n\n---\n\nWhat if building React Native screens felt as natural as SwiftUI? This framework replaces verbose JSX and scattered `StyleSheet` objects with **chainable, type-safe function calls** that read like a blueprint of your UI.\n\n```ts\nimport { VStack, Text, Button, Spacer, Font, Spacing, Color, Radius, ButtonVariant } from 'react-native-swiftui-dsl';\n\nVStack(\n  Text('Welcome Back').font(Font.title).bold(),\n  Text('Track your practice sessions').secondary(),\n  Button('Get Started', () =\u003e navigate('home'), { style: ButtonVariant.filled }),\n  Spacer(),\n)\n.padding(Spacing.lg)\n.background(Color.card)\n.cornerRadius(Radius.md)\n.shadow()\n```\n\nNo angle brackets. No style objects. Just clean, readable, composable code.\n\n---\n\n## Why?\n\n| Pain Point           | Traditional RN                                     | With this DSL                                               |\n| -------------------- | -------------------------------------------------- | ----------------------------------------------------------- |\n| **Verbose markup**   | Deeply nested `\u003cView\u003e` / `\u003cText\u003e` JSX              | Flat function calls: `VStack(Text(...))`                    |\n| **Scattered styles** | `StyleSheet.create` at the bottom of every file    | Inline chainable modifiers: `.padding(Spacing.lg).bold()`   |\n| **Manual theming**   | `useColorScheme()` + conditional colors everywhere | Token-based: `.background(Color.card)` auto-resolves light/dark |\n| **Form boilerplate** | `value` + `onChangeText` on every input            | Two-way bindings: `TextInput($form.email)`                  |\n| **Config overhead**  | Theme providers required before anything works     | Built-in defaults: works out of the box with zero config    |\n\nThe result? **Less code, fewer bugs, and UIs you can actually read.**\n\n---\n\n## DSL vs JSX\n\nHere's the same profile card built both ways:\n\n**Traditional React Native:**\n\n```tsx\n\u003cView style={[styles.card, { backgroundColor: isDark ? '#1E293B' : '#FFF' }]}\u003e\n  \u003cImage source={{ uri: user.avatar }} style={styles.avatar} resizeMode=\"cover\" /\u003e\n  \u003cText style={[styles.name, { color: isDark ? '#F9FAFB' : '#111827' }]}\u003e{user.name}\u003c/Text\u003e\n  \u003cText style={[styles.bio, { color: isDark ? '#94A3B8' : '#6B7280' }]}\u003e{user.bio}\u003c/Text\u003e\n  \u003cPressable style={styles.button} onPress={() =\u003e navigateToEdit()}\u003e\n    \u003cText style={styles.buttonText}\u003eEdit Profile\u003c/Text\u003e\n  \u003c/Pressable\u003e\n\u003c/View\u003e\n// + 10 lines of StyleSheet.create(...)\n```\n\n**With react-native-swiftui-dsl:**\n\n```ts\nVStack(\n  Image({ uri: user.avatar }, { resizeMode: ImageResize.cover })\n    .frame({ width: 80, height: 80 }).cornerRadius(Radius.lg),\n  Text(user.name).font(Font.title).bold(),\n  Text(user.bio).font(Font.footnote).secondary().textAlign(TextAlign.center),\n  Button('Edit Profile', () =\u003e navigateToEdit(), { style: ButtonVariant.filled }),\n)\n.padding(Spacing.lg).background(Color.card).cornerRadius(Radius.md)\n.alignment(Alignment.center).spacing(12)\n```\n\nSame result. **70% less code.** Colors auto-resolve for light and dark mode.\n\n---\n\n## Features\n\n- **20 built-in primitives** -- VStack, HStack, ZStack, Text, Image, Button, Toggle, TextInput, ScrollStack, LazyList, SectionedList, SafeArea, Spacer, Divider, Icon, Spinner, Link, Raw, Modal, ProgressBar\n- **60+ chainable modifiers** -- padding, font, background, cornerRadius, shadow, border, opacity, frame, hidden, and many more\n- **Token-based theme** -- Color, Spacing, Font, and Radius tokens auto-resolve for light/dark mode\n- **Two-way bindings** -- SwiftUI-style `createBinding` and `bindForm` for effortless forms\n- **Responsive layouts** -- Breakpoint-based modifiers for phones and tablets\n- **Animations \u0026 Gestures** -- SwiftUI-inspired animation presets, transitions, swipe/pan/pinch gestures\n- **ViewModifier protocol** -- Reusable, composable modifier classes\n- **DSLView** -- Class-based reusable view components with `body()` pattern\n- **Full TypeScript support** -- IntelliSense for every modifier, token, and primitive\n- **Config-free defaults** -- Works out of the box without theme providers\n- **iOS + Android** -- Works with React Native and Expo\n\n---\n\n## Installation\n\n```bash\nnpm install react-native-swiftui-dsl\n```\n\n```bash\n# Required peer dependencies\nnpm install react react-native react-native-safe-area-context\n\n# Optional\nnpm install @expo/vector-icons   # For Icon primitive\nnpm install expo-router           # For ScreenConfigRenderer navigation\n```\n\nSee [Getting Started](docs/getting-started.md) for full setup details and quick start guide.\n\n---\n\n## Documentation\n\nFull documentation lives in the [`docs/`](docs/README.md) directory:\n\n### Getting Started\n\n| Topic | File |\n| ----- | ---- |\n| Installation, Quick Start, Config-Free Usage | [docs/getting-started.md](docs/getting-started.md) |\n\n### Core Concepts\n\n| Topic | File |\n| ----- | ---- |\n| API Reference: Primitives | [docs/primitives.md](docs/primitives.md) |\n| API Reference: Modifiers | [docs/modifiers.md](docs/modifiers.md) |\n| Theme System \u0026 Configuration | [docs/theme-system.md](docs/theme-system.md) |\n| Token System (Color, Font, Spacing, Radius) | [docs/tokens.md](docs/tokens.md) |\n\n### Advanced Features\n\n| Topic | File |\n| ----- | ---- |\n| ViewModifier Protocol | [docs/view-modifier.md](docs/view-modifier.md) |\n| DSLView -- Reusable Views | [docs/dsl-view.md](docs/dsl-view.md) |\n| Responsive System | [docs/responsive.md](docs/responsive.md) |\n| Animation System | [docs/animation.md](docs/animation.md) |\n| Gesture System | [docs/gestures.md](docs/gestures.md) |\n| Transform Modifiers | [docs/transforms.md](docs/transforms.md) |\n\n### Integration\n\n| Topic | File |\n| ----- | ---- |\n| Bindings \u0026 Conditionals | [docs/bindings.md](docs/bindings.md) |\n| Environment Values | [docs/environment.md](docs/environment.md) |\n| Navigation | [docs/navigation.md](docs/navigation.md) |\n| Global Imports | [docs/global-imports.md](docs/global-imports.md) |\n\n### Utilities \u0026 Testing\n\n| Topic | File |\n| ----- | ---- |\n| Utilities (PlatformInfo, Logger, etc.) | [docs/utilities.md](docs/utilities.md) |\n| Testing | [docs/testing.md](docs/testing.md) |\n| Architecture \u0026 Project Structure | [docs/architecture.md](docs/architecture.md) |\n\n---\n\n## Examples\n\n| Example | File | Topics |\n| ------- | ---- | ------ |\n| Basic Usage | [examples/01-basic-usage.tsx](examples/01-basic-usage.tsx) | Primitives, layout, theming |\n| View Modifiers | [examples/02-view-modifiers.tsx](examples/02-view-modifiers.tsx) | Modifiers, ViewModifier protocol |\n| DSLView | [examples/03-dsl-view.tsx](examples/03-dsl-view.tsx) | Reusable views, composition |\n| Responsive Layout | [examples/04-responsive-layout.tsx](examples/04-responsive-layout.tsx) | Breakpoints, size classes |\n| Animations \u0026 Gestures | [examples/05-animations-gestures.tsx](examples/05-animations-gestures.tsx) | Animation presets, transitions, gestures |\n| Global Imports | [examples/06-globals-import.tsx](examples/06-globals-import.tsx) | Zero-import usage |\n| Transforms \u0026 Environment | [examples/07-transforms-environment.tsx](examples/07-transforms-environment.tsx) | Transforms, environment values |\n\n---\n\n## Platform Support\n\n| Platform | Status                           |\n| -------- | -------------------------------- |\n| iOS      | Fully supported                  |\n| Android  | Fully supported                  |\n| Web      | Partial (via `react-native-web`) |\n\n---\n\n## Contributing\n\nContributions are welcome! Feel free to open issues for bug reports, feature requests, or questions.\n\n---\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewkochulab%2Freact-native-swiftui-dsl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewkochulab%2Freact-native-swiftui-dsl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewkochulab%2Freact-native-swiftui-dsl/lists"}