🎨 React Native Expo Design Playground

🚀 Stop reinventing the wheel—build beautiful, responsive UIs in minutes, not days.

A beautiful, production-ready design system playground for Expo + React Native. Build, test, and ship UI patterns with confidence.

⭐ If you love this project, give it a star! It helps others discover it too. ⭐

---

✨ What is this?

A complete design system starter kit that turns your design tokens into reusable, type-safe React Native components. Perfect for teams who want to:

💡 Powered by Ignite - This project is built on top of Infinite Red's battle-tested React Native boilerplate, enhanced with a clear structure for responsive layouts and design patterns.

• 🎯 Build faster - Pre-built layout primitives (Box, Row, Col, Stack) with responsive props
• 🎨 Design consistently - Type-safe theming with light/dark mode support
• 📱 Ship confidently - Live pattern playground to test before production
• 🔧 Extend easily - Clear docs and examples for adding new patterns

---

🚀 Quick Start

# Install dependencies
yarn install

# Start development server
yarn start

# Run on iOS or Android
yarn ios
yarn android

Need a build? Use yarn build:ios:* or yarn build:android:* for EAS builds.

---

🎯 Key Features

📦 Layout Primitives

Powerful, responsive layout components that work out of the box:

• Box - The foundation (spacing, colors, borders, shadows)
• Row / Col - Flexbox helpers for horizontal/vertical layouts
• Stack - Vertical layouts with consistent spacing
• Surface - Material-style cards with elevation
• Absolute / Center / Spacer - Positioning utilities

Example:

<Box 
  padding={{ smallPhone: "s", tablet: "xl" }}
  backgroundColor="tint"
  borderRadius="m"
>
  <Text variant="heading">Responsive by default</Text>
</Box>

🎨 Live Pattern Playground

Interactive catalog showcasing 10+ layout patterns:

• Basic layouts (Row, Col, Stack)
• Spacing & flexbox patterns
• Border & positioning examples
• Responsive breakpoints
• Visual effects (shadows, elevation)
• Complex compositions (cards, grids)

See it in action: src/screens/LayoutPlaygroundScreen.tsx

🎭 Type-Safe Theming

• Light & dark mode support
• Semantic color tokens
• Responsive breakpoints (smallPhone, phone, tablet)
• Typography variants (heading, body, caption)
• Full TypeScript support

🌍 i18n Ready

• Built-in translation support
• RTL layout support
• Responsive typography

---

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── layout/         # Layout primitives (Box, Row, Col, etc.)
│   ├── Text.tsx        # Typography component
│   └── Button.tsx      # Button component
├── screens/            # App screens
│   └── LayoutPlaygroundScreen.tsx  # Pattern showcase
├── theme/              # Design tokens & theming
│   ├── colors.ts       # Color palette
│   ├── spacing.ts      # Spacing scale
│   └── typography.ts   # Font system
└── app/                # Expo Router navigation
    └── (tabs)/         # Tab navigation

---

🛠️ Tech Stack

Category	Technology
Framework	Expo 54, React Native 0.81, React 19
Navigation	Expo Router + React Navigation
Styling	Shopify Restyle-inspired tokens
State	React Context + MMKV
Language	TypeScript 5.9
Testing	Jest + React Native Testing Library

---

📖 How to Use

1. Start with Box

Every prop maps to a design token:

<Box 
  margin="m" 
  padding="l" 
  backgroundColor="background"
  borderRadius="m"
>
  Content here
</Box>

2. Use Responsive Props

Breakpoints adapt automatically:

<Box 
  padding={{ smallPhone: "xs", phone: "m", tablet: "xl" }}
  flexDirection={{ smallPhone: "column", tablet: "row" }}
>
  Responsive layout
</Box>

3. Add New Text Variants

Follow the guide in docs/ADD_YOURE_NEW_TEXT_VARIENTS.md to extend typography.

4. Create New Screens

Add screens in src/screens/ and register routes in src/app/(tabs)/.

---

📜 Available Scripts

Command	Description
yarn start	Start Expo dev server
yarn ios	Run on iOS simulator
yarn android	Run on Android emulator
yarn lint	Fix linting issues
yarn compile	Type-check codebase
yarn test	Run test suite
yarn build:ios:*	Build iOS app (sim/device/preview/prod)
yarn build:android:*	Build Android app (sim/device/preview/prod)

---

🤝 Contributing

1. Fork the repository
2. Add your pattern to the Layout Playground
3. Update documentation
4. Submit a pull request

Pro tip: Test your patterns in the playground before submitting!

---

📚 Documentation

• Adding Text Variants - Extend the typography system
• Component docs in src/components/ - Each component has JSDoc examples

---

🙏 Acknowledgments

This project is powered by Ignite - Infinite Red's battle-tested React Native boilerplate that has been continuously developed for over 9 years.

What we added:

• 🎨 Enhanced responsive layout system with clear breakpoint structure
• 📐 Comprehensive layout primitives (Box, Row, Col, Stack, etc.) with responsive props
• 🎯 Live pattern playground for testing and showcasing UI patterns
• 📚 Clear documentation for extending the design system

What Ignite provides:

• ⚡ Battle-tested React Native project structure
• 🛠️ Complete development tooling (TypeScript, Jest, ESLint, etc.)
• 🧭 Expo Router navigation setup
• 🎭 Theme system foundation
• 📦 All the essential dependencies and configurations

We're grateful to the Infinite Red team and the Ignite community for creating such an amazing foundation. This project builds upon their excellent work to focus specifically on responsive design patterns and layout primitives.

---

🎉 License

This project is open source and available for reuse. Build something amazing!

---

Made with ❤️ for the React Native community