expo-style-bridge


expo-style-bridge is a style transformation library that automatically converts React Native StyleSheet properties into native SwiftUI modifiers (iOS) and Jetpack Compose modifiers (Android). Perfect for developers building cross-platform apps with Expo who need to integrate native UI components while maintaining consistent styling.

$3

- 🔄 Seamless conversion from React Native styles to native platform modifiers
- 📱 Cross-platform support for iOS (SwiftUI) and Android (Jetpack Compose)
- 🎨 Type-safe styling with full TypeScript support
- ⚡ Zero runtime overhead - compile-time transformations
- 🧩 Modular architecture - use only what you need
- 🔧 Extensible - easily add custom style converters

Usage

``typescript
import { convertToSwiftUIModifiers } from 'expo-style-bridge';
import { Button } from '@expo/ui/swift-ui';

const style = {
padding: 16,
opacity: 0.8,
zIndex: 10,
display: 'none',
overflow: 'hidden'
};

const modifiers = convertToSwiftUIModifiers(style); // modifiers is an array

// Use the modifiers with a SwiftUI component

Click me

`




Installation

Install via npm, yarn, or pnpm:

`bash
npm install expo-style-bridge


or

yarn add expo-style-bridge

or

pnpm add expo-style-bridge
`

Supported Style Properties

Transform React Native StyleSheet properties into native platform equivalents:

- Padding: padding, paddingHorizontal, paddingVertical, paddingTop, paddingBottom, paddingLeft, paddingRight → SwiftUI .padding()
- Opacity: opacity → SwiftUI .opacity()
- Layout: zIndex → SwiftUI .zIndex()
- Visibility: display → SwiftUI .hidden()
- Clipping: overflow → SwiftUI .clipped()
- Colors: backgroundColor, color → SwiftUI .background() / .foregroundColor()

$3

Upcoming style property support:
- Gradients
- Border styling (width, radius, color)
- Shadow and elevation
- Transforms (rotate, scale, translate)
- Flexbox layout properties
- Jetpack compose

Project Structure

`
src/
├── index.ts # Main converter with reducer pattern
├── types.ts # TypeScript type definitions
└── mappers/ # Individual style converters
├── padding/
├── opacity/
├── zIndex/
├── hidden/
└── clipped/
`

Each mapper is a self-contained converter with tests. To add a new converter:
1. Create a folder in src/mappers/
2. Implement the converter function
3. Add tests
4. Integrate into the reducer chain in src/index.ts

Use Cases

- Expo Native Modules: Integrate custom native UI components with React Native styling
- Hybrid Apps: Build apps that mix React Native and native views seamlessly
- Migration Projects: Gradually migrate from React Native to native platforms
- Design Systems: Maintain consistent styling across React Native and native components
- Performance Optimization: Leverage native rendering while keeping React Native DX

Requirements

- @expo/ui >= 0.2.0-beta.7
- react-native` >= 0.82.0
- TypeScript >= 4.0 (recommended)

Related Projects

- @expo/ui - Expo's native UI component library
- React Native - Build native apps using React
- Expo - Framework for universal React applications

Contributing

Contributions are welcome! Please read our contributing guidelines and submit PRs for new style converters or improvements.

License

MIT © LabLamb