React Native components for F0 Design System
npm install @factorialco/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.
``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 mergingreact-native-reanimated
> - - Required for animationsreact-native-safe-area-context
> - - Required for safe area handlingreact-native-svg
> - - Required for icon componentsdate-fns
> - - Required for date utilitiestwemoji-parser
> - - Required for emoji supportreact-native-worklets-core
>
> is optional but recommended for better performance.
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.
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",
});
`
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.
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
}
`
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.
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.
Use this section after each manual update so people can install the latest build in Expo Go.
- Branch / Channel: productionTypography Scale
- Update message: Feb 6, 2026 1:19 PM
- Published at:
> 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.
`tsx
import { Button, Icon, AppIcons } from "@factorialco/f0-react-native";
export default function App() {
return (
<>
>
);
}
`
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 (
'bg-background p-4 rounded-lg',
'border border-divider',
isActive && 'bg-accent',
className
)}
/>
);
}
`
The cn utility:tailwind-merge
- ✅ Automatically merges Tailwind classes with conflict resolution
- ✅ Uses under the hood
- ✅ Supports custom opacity class groups
- ✅ Properly handles conditional classes
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"
/>
`
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
If you see TypeScript errors related to variants, ensure tailwind-variants is installed:
`bash`
pnpm add tailwind-variants@^3.2.2
If you encounter build errors, ensure:
- All peer dependencies are installed
- Metro config includes CSS file extensions
- Babel plugins are properly configured
`bashRun tests
pnpm test
📦 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 |MIT