React Native Design Infrastructure

A production-ready, highly customizable, and high-performance React Native Design System — with bundled Montserrat fonts and a fully token-based typography system.

🚀 Features

• 🎨 Powerful Theming: Support for Light/Dark mode and custom themes via ThemeProvider.
• 🔤 Custom Font System: Bring any Google Font — configure your own font family map (light, regular, medium, semiBold, bold, extraBold).
• 📦 Bundled Montserrat: Ships with Montserrat as the default font family, auto-linkable in one command.
• 🧩 Performance First: Built with React.memo, forwardRef, and useMemo for style generation.
• 📱 Adaptive Components: Works seamlessly across iOS and Android.
• 🏗️ Tree-shakable: Only include the components you use.
• 📦 Modern Tooling: Built with builder-bob.
• ⌨️ Strict TypeScript: Fully typed for the best developer experience.

📦 Installation

npm install react-native-design-infrastructure
# OR
yarn add react-native-design-infrastructure

Peer Dependencies

Ensure you have the following peer dependencies installed:

npm install react-native-reanimated react-native-gesture-handler

🔤 Font Setup (Montserrat — Bundled)

This package ships with Montserrat as the default font family. All font files (.ttf) are bundled inside src/assets/fonts/.

Link fonts automatically (one command)

After installing the package, run:

npx react-native-asset

This will copy the Montserrat fonts into your iOS and Android projects automatically:

• iOS → ios/YourApp/Fonts/ (and updates Info.plist)
• Android → android/app/src/main/assets/fonts/

That's it — no manual configuration needed. All components will use Montserrat out of the box.

Bundled font variants

| Key | Font File | |-----|-----------| | light | Montserrat-Light.ttf | | regular | Montserrat-Regular.ttf | | medium | Montserrat-Medium.ttf | | semiBold | Montserrat-SemiBold.ttf | | bold | Montserrat-Bold.ttf | | extraBold | Montserrat-ExtraBold.ttf |

🛠️ Usage

1. Wrap your app with ThemeProvider

import { ThemeProvider } from "react-native-design-infrastructure";

const App = () => (
  <ThemeProvider>
    <Main />
  </ThemeProvider>
);

2. Use Components

import { Button, Text, Card } from "react-native-design-infrastructure";

const MyComponent = () => (
  <Card elevated>
    <Text variant="h2">Hello World</Text>
    <Button
      title="Submit"
      variant="gradient"
      onPress={() => console.log("Pressed")}
    />
  </Card>
);

3. Use the font prop on <Text>

The <Text> component accepts a font prop that resolves to your configured font family:

<Text variant="bodyLarge" font="bold">Bold Montserrat text</Text>
<Text variant="caption" font="light" italic>Light italic caption</Text>
<Text variant="h3" font="semiBold">Section heading</Text>

| font value | Resolves to | |---|---| | "light" | Montserrat-Light | | "regular" | Montserrat-Regular | | "medium" | Montserrat-Medium | | "semiBold" | Montserrat-SemiBold | | "bold" | Montserrat-Bold | | "extraBold" | Montserrat-ExtraBold |

🎨 Customizable Theming

Colors & Border Radius

<ThemeProvider
  initialTheme={{
    colors: {
      primary: "#FF5722",
      secondary: "#009688",
    },
    borderRadius: {
      md: 20,
    },
  }}
>
  <App />
</ThemeProvider>

Custom Google Fonts

You can replace Montserrat with any Google Font. Install and link the font files in your app, then configure the font family map in ThemeProvider:

// Example: Using Poppins (must be linked in your app)
<ThemeProvider
  initialTheme={{
    fontFamily: {
      light: "Poppins-Light",
      regular: "Poppins-Regular",
      medium: "Poppins-Medium",
      semiBold: "Poppins-SemiBold",
      bold: "Poppins-Bold",
      extraBold: "Poppins-ExtraBold",
    },
  }}
>
  <App />
</ThemeProvider>

All components — Button, Badge, Toast, Modal, ListItem, etc. — will automatically use your configured font.

🏗️ Project Architecture

Performance First

The library uses a specialized useStyles hook that leverages useMemo and StyleSheet.create internally. This ensures that styles are only re-calculated when the theme or relevant props change, preventing unnecessary re-renders in complex layouts.

import { useStyles } from "react-native-design-infrastructure";

const styles = useStyles((theme) => ({
  container: {
    padding: theme.spacing(2),
    backgroundColor: theme.colors.surface,
  },
}));

Theming System

Built on a flexible token-based architecture.

• Base Spacing: 8px factor-based scaling (theme.spacing(2) = 16px).
• Light/Dark Mode: First-class support with automatic system theme detection (optional).
• Font Family Map: 6 semantic weight keys (light → extraBold) mapped to real font family names.
• Customizable: Inject your own tokens via ThemeProvider.

🧱 Component Registry

Currently, the library includes 28 core components categorized by their function:

📐 Layout & Structure

• Box / Flex: Core layout primitives.
• HStack / VStack / Center: Flexbox-based alignment wrappers.
• Card: Elevated surfaces with shadow and radius control.
• Divider: Semantic separation with customizable margins.
• ListItem: Optimized row items for lists.
• Avatar: Circle/Square portraits with initials or image support.
• Badge: Status indicators with multiple color variants.
• Wrappers & Portal: Advanced layout and overlay management.

✍️ Typography

• Text: Multi-variant typography system (h1-h4, body, caption) with font prop for semantic weight selection.
• Typography: Prebuilt components — Heading, SubHeading, Title, Paragraph, Caption, Label, Link.

⚡ Interactions

• Button: Highly customizable triggers (Primary, Secondary, Outline, Ghost, Gradient).
• Loader: Themed loading indicators.

📝 Forms & Selection

• TextInput: Professional input fields with labels, errors, and icons.
• Inputs: Specialized input variants.
• Checkbox: Themed selection with animation.
• RadioButton: Single-select options.
• Switch: Performance-optimized toggles.

🔔 Feedback & Overlays

• Modal: Built-in modal system.
• BottomSheet: Native-feeling sheet with gesture control.
• ActionSheet: Context-aware action menus.
• Toast: Floating notifications.
• SegmentedControl: Tab-like selection.
• Feedback: Response triggers for user actions.

📊 Data Display

• Table: Structured data presentation.
• Skeleton: Loading placeholders for improved UX.

🚀 Advanced Features

• Animations: Reanimated-powered animation utilities.
• NativeFeatures: Seamless integration with platform-specific APIs.
• SpecialUX: Bespoke components for premium interaction patterns.

🎯 Project Roadmap & Status

This project is currently in Active Development.

• [x] Core Architecture: Theme engine, performance-optimized style system.
• [x] Foundation Components: Layout, Typography, Buttons, basic Forms.
• [x] Custom Font System: FontFamily map, Montserrat bundled, font prop on <Text>.
• [/] Expansion Phase: Currently at 28/100 components.
• [ ] Advanced Features: Native gesture-driven animations, complex data components.

🛠️ Development & Building

Build the package

npm run build

Run Type-checking

npm run typecheck

Run Tests

npm run test

🚀 Publishing to npm

1. Build: npm run build — ensure lib/ is generated.
2. Login: npm login.
3. Publish: npm publish.

Fonts in src/assets/fonts/ and react-native.config.js are included in the published package automatically.

👨‍💻 Author

Built with ❤️ by Vatsal Patadiya