Chainable modifiers • ViewModifier protocol • Responsive layouts • Animations & Gestures • Theme-aware colors • Two-way bindings • Zero JSX • Global imports

What 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.

import { VStack, Text, Button, Spacer, Font, Spacing, Color, Radius, ButtonVariant } from 'react-native-swiftui-dsl';

VStack(
  Text('Welcome Back').font(Font.title).bold(),
  Text('Track your practice sessions').secondary(),
  Button('Get Started', () => navigate('home'), { style: ButtonVariant.filled }),
  Spacer(),
)
.padding(Spacing.lg)
.background(Color.card)
.cornerRadius(Radius.md)
.shadow()

No angle brackets. No style objects. Just clean, readable, composable code.

Why?

| Pain Point | Traditional RN | With this DSL | | -------------------- | -------------------------------------------------- | ----------------------------------------------------------- | | Verbose markup | Deeply nested <View> / <Text> JSX | Flat function calls: VStack(Text(...)) | | Scattered styles | StyleSheet.create at the bottom of every file | Inline chainable modifiers: .padding(Spacing.lg).bold() | | Manual theming | useColorScheme() + conditional colors everywhere | Token-based: .background(Color.card) auto-resolves light/dark | | Form boilerplate | value + onChangeText on every input | Two-way bindings: TextInput($form.email) | | Config overhead | Theme providers required before anything works | Built-in defaults: works out of the box with zero config |

The result? Less code, fewer bugs, and UIs you can actually read.

DSL vs JSX

Here's the same profile card built both ways:

Traditional React Native:

<View style={[styles.card, { backgroundColor: isDark ? '#1E293B' : '#FFF' }]}>
  <Image source={{ uri: user.avatar }} style={styles.avatar} resizeMode="cover" />
  <Text style={[styles.name, { color: isDark ? '#F9FAFB' : '#111827' }]}>{user.name}</Text>
  <Text style={[styles.bio, { color: isDark ? '#94A3B8' : '#6B7280' }]}>{user.bio}</Text>
  <Pressable style={styles.button} onPress={() => navigateToEdit()}>
    <Text style={styles.buttonText}>Edit Profile</Text>
  </Pressable>
</View>
// + 10 lines of StyleSheet.create(...)

With react-native-swiftui-dsl:

VStack(
  Image({ uri: user.avatar }, { resizeMode: ImageResize.cover })
    .frame({ width: 80, height: 80 }).cornerRadius(Radius.lg),
  Text(user.name).font(Font.title).bold(),
  Text(user.bio).font(Font.footnote).secondary().textAlign(TextAlign.center),
  Button('Edit Profile', () => navigateToEdit(), { style: ButtonVariant.filled }),
)
.padding(Spacing.lg).background(Color.card).cornerRadius(Radius.md)
.alignment(Alignment.center).spacing(12)

Same result. 70% less code. Colors auto-resolve for light and dark mode.

Features

• 20 built-in primitives -- VStack, HStack, ZStack, Text, Image, Button, Toggle, TextInput, ScrollStack, LazyList, SectionedList, SafeArea, Spacer, Divider, Icon, Spinner, Link, Raw, Modal, ProgressBar
• 60+ chainable modifiers -- padding, font, background, cornerRadius, shadow, border, opacity, frame, hidden, and many more
• Token-based theme -- Color, Spacing, Font, and Radius tokens auto-resolve for light/dark mode
• Two-way bindings -- SwiftUI-style createBinding and bindForm for effortless forms
• Responsive layouts -- Breakpoint-based modifiers for phones and tablets
• Animations & Gestures -- SwiftUI-inspired animation presets, transitions, swipe/pan/pinch gestures
• ViewModifier protocol -- Reusable, composable modifier classes
• DSLView -- Class-based reusable view components with body() pattern
• Full TypeScript support -- IntelliSense for every modifier, token, and primitive
• Config-free defaults -- Works out of the box without theme providers
• iOS + Android -- Works with React Native and Expo

Installation

npm install react-native-swiftui-dsl

# Required peer dependencies
npm install react react-native react-native-safe-area-context

# Optional
npm install @expo/vector-icons   # For Icon primitive
npm install expo-router           # For ScreenConfigRenderer navigation

See Getting Started for full setup details and quick start guide.

Documentation

Full documentation lives in the docs/ directory:

Getting Started

| Topic | File | | ----- | ---- | | Installation, Quick Start, Config-Free Usage | docs/getting-started.md |

Core Concepts

| Topic | File | | ----- | ---- | | API Reference: Primitives | docs/primitives.md | | API Reference: Modifiers | docs/modifiers.md | | Theme System & Configuration | docs/theme-system.md | | Token System (Color, Font, Spacing, Radius) | docs/tokens.md |

Advanced Features

| Topic | File | | ----- | ---- | | ViewModifier Protocol | docs/view-modifier.md | | DSLView -- Reusable Views | docs/dsl-view.md | | Responsive System | docs/responsive.md | | Animation System | docs/animation.md | | Gesture System | docs/gestures.md | | Transform Modifiers | docs/transforms.md |

Integration

| Topic | File | | ----- | ---- | | Bindings & Conditionals | docs/bindings.md | | Environment Values | docs/environment.md | | Navigation | docs/navigation.md | | Global Imports | docs/global-imports.md |

Utilities & Testing

| Topic | File | | ----- | ---- | | Utilities (PlatformInfo, Logger, etc.) | docs/utilities.md | | Testing | docs/testing.md | | Architecture & Project Structure | docs/architecture.md |

Examples

| Example | File | Topics | | ------- | ---- | ------ | | Basic Usage | examples/01-basic-usage.tsx | Primitives, layout, theming | | View Modifiers | examples/02-view-modifiers.tsx | Modifiers, ViewModifier protocol | | DSLView | examples/03-dsl-view.tsx | Reusable views, composition | | Responsive Layout | examples/04-responsive-layout.tsx | Breakpoints, size classes | | Animations & Gestures | examples/05-animations-gestures.tsx | Animation presets, transitions, gestures | | Global Imports | examples/06-globals-import.tsx | Zero-import usage | | Transforms & Environment | examples/07-transforms-environment.tsx | Transforms, environment values |

Platform Support

| Platform | Status | | -------- | -------------------------------- | | iOS | Fully supported | | Android | Fully supported | | Web | Partial (via react-native-web) |

Contributing

Contributions are welcome! Feel free to open issues for bug reports, feature requests, or questions.

License

MIT