F0 React Native 🎨

> 🚧 Status: WIP — We are building this design system from the ground up. Expect changes and breaking changes as we iterate. 🏗️

React Native implementation of the F0 Design System.

🚀 Quick Setup

$3

``bash


Install package and peer dependencies


pnpm add @factorialco/f0-react-native \
date-fns@^3.6.0 \
react-native-reanimated@^3.19.4 \
react-native-safe-area-context@^5.4.0 \
react-native-svg@^15.12.1 \
react-native-worklets-core@^1.6.2 \
tailwind-merge@^3.4.0 \
tailwind-variants@^3.2.2 \
tailwindcss@^4.1.18 \
uniwind@^1.2.7 \
twemoji-parser@^14.0.0
`

> Note: The following peer dependencies are required:
> - uniwind and tailwindcss - Required for styling (must be configured in Metro and CSS files)
> - tailwind-merge and tailwind-variants - Required for component variant system and class merging
> - react-native-reanimated - Required for animations
> - react-native-safe-area-context - Required for safe area handling
> - react-native-svg - Required for icon components
> - date-fns - Required for date utilities
> - twemoji-parser - Required for emoji support
>
> react-native-worklets-core is optional but recommended for better performance.

$3

babel.config.js:

`javascript
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"], // Expo only
plugins: [
"react-native-worklets-core/plugin",
"react-native-reanimated/plugin", // MUST be last
],
};
};
`

> Note: Uniwind doesn't require special Babel configuration. The above is a standard Expo setup.

$3

metro.config.js:

`javascript
const { getDefaultConfig } = require("expo/metro-config");
const { withUniwindConfig } = require("uniwind/metro");

const config = getDefaultConfig(__dirname);

// Ensure CSS files trigger reloads
config.resolver.sourceExts = [...(config.resolver.sourceExts || []), "css"];

module.exports = withUniwindConfig(config, {
cssEntryFile: "./global.css",
dtsFile: "./uniwind-types.d.ts",
});
`

$3

global.css (root):

`css
@import 'tailwindcss';
@import 'uniwind';

/ Import F0 styles (theme tokens + base styles) /
@import '@factorialco/f0-react-native/styles';

/ Add your app's source paths for Tailwind CSS v4 /
@source "./app/*/.{js,jsx,ts,tsx}";
@source "./src/*/.{js,jsx,ts,tsx}";

/ Add F0 component sources so Tailwind can detect classes /
@source "./node_modules/@factorialco/f0-react-native/lib";

/ Also scan library source files /
@source "./node_modules/@factorialco/f0-react-native/src/*/.{js,jsx,ts,tsx}";

`

Import in your entry file (App.tsx or index.js):

`typescript
import "./global.css";
`

> Note: Add @source "./node_modules/@factorialco/f0-react-native/lib"; so Tailwind can detect all component classes.

$3

To use custom fonts in your host app, load them with Expo Font and override the font CSS variables.

Install font dependencies (Expo):

`bash
pnpm add expo-font @expo-google-fonts/your-font
`

Load fonts in your app (Expo):

`tsx
import { useFonts } from "expo-font";
import {
YourFont_400Regular,
YourFont_500Medium,
YourFont_600SemiBold,
} from "@expo-google-fonts/your-font";

export default function App() {
const [fontsLoaded] = useFonts({
YourFont_400Regular,
YourFont_500Medium,
YourFont_600SemiBold,
});

if (!fontsLoaded) {
return null; // Or return a loading screen
}

return ; // Render your app root
}
`

Override font variables in global.css:

`css
@theme {
--font-normal: "YourFont-Regular";
--font-medium: "YourFont-Medium";
--font-semibold: "YourFont-SemiBold";
}
`

> Note: The font names must match the PostScript names of the loaded fonts. Use the exact names from your font package or assets.

$3

uniwind-types.d.ts (root):

`typescript
///
`

This file is automatically generated by Uniwind when you run Metro. You can add it to your .gitignore if desired.

📱 Expo Go (Latest Update)

Use this section after each manual update so people can install the latest build in Expo Go.

$3

- Branch / Channel: production
- Update message: Typography Scale
- Published at: Feb 6, 2026 1:19 PM

$3

- 📱 Open in Expo Go

$3





> Android note: If scanning the QR code with your device camera opens a browser or shows a 404, open Expo Go and use its built-in QR scanner.

📦 Usage

$3

`tsx
import { Button, Icon, AppIcons } from "@factorialco/f0-react-native";

export default function App() {
return (
<>



);
}
`

$3

The package exports a cn utility function for merging Tailwind classes with automatic conflict resolution:

`tsx
import { cn } from "@factorialco/f0-react-native";
import { View } from "react-native";

function MyComponent({ className, isActive }) {
return (
className={cn(
'bg-background p-4 rounded-lg',
'border border-divider',
isActive && 'bg-accent',
className
)}
/>
);
}
`

The cn utility:
- ✅ Automatically merges Tailwind classes with conflict resolution
- ✅ Uses tailwind-merge under the hood
- ✅ Supports custom opacity class groups
- ✅ Properly handles conditional classes

$3

All components use tailwind-variants for type-safe variant props:

`tsx
import { Button } from "@factorialco/f0-react-native";

// Type-safe variants


label="Primary Button"
variant="default" // ✅ Autocomplete: "default" | "outline" | "critical" | "neutral" | "ghost" | "promote"
size="md" // ✅ Autocomplete: "sm" | "md" | "lg"
/>
`

🔧 Troubleshooting

$3

If styles from F0 components aren't being applied, ensure:

1. Import styles and add source paths: Your global.css includes the F0 styles and the F0 source path:
`css
@import '@factorialco/f0-react-native/styles';
@source "./node_modules/@factorialco/f0-react-native/lib";
`

2. Metro Cache: Clear Metro bundler cache:
`bash
npx expo start --clear
# or
npm start -- --reset-cache
`

3. Dependencies: Verify all peer dependencies are installed:
`bash
pnpm list tailwind-merge tailwind-variants tailwindcss uniwind
`

$3

If you see TypeScript errors related to variants, ensure tailwind-variants is installed:

`bash
pnpm add tailwind-variants@^3.2.2
`

$3

If you encounter build errors, ensure:
- All peer dependencies are installed
- Metro config includes CSS file extensions
- Babel plugins are properly configured

🔧 Development

`bash


Run tests

pnpm test

Type check

pnpm tsc

Lint

pnpm lint

Build package

pnpm build
`

📦 Peer Dependencies

This package requires the following peer dependencies to be installed in your host project:

| Package | Version | Required | Purpose |
|---------|---------|----------|---------|
| react | * | ✅ Yes | React library |
| react-native | * | ✅ Yes | React Native framework |
| tailwindcss | ^4.1.18 | ✅ Yes | CSS framework |
| uniwind | ^1.2.7 | ✅ Yes | Tailwind CSS for React Native |
| tailwind-merge | ^3.4.0 | ✅ Yes | Class merging utility |
| tailwind-variants | ^3.2.2 | ✅ Yes | Variant system |
| react-native-reanimated | ^3.19.4 | ✅ Yes | Animations |
| react-native-safe-area-context | ^5.4.0 | ✅ Yes | Safe area handling |
| react-native-svg | ^15.12.1 | ✅ Yes | SVG support for icons |
| date-fns | ^3.6.0 | ✅ Yes | Date utilities |
| twemoji-parser | ^14.0.0 | ✅ Yes | Emoji support |
| react-native-worklets-core | ^1.6.2` | ⚠️ Optional | Performance optimization |

📄 License

MIT