gofi-ui-native

gofi-ui-native is a React Native + TypeScript design system: accessibility-first. The mobile counterpart of gofi-ui (web).

It was built first and foremost for our own projects, and we decided to open it up to the community in case it's useful to you too. It's free to use — but offered as-is, with no guarantees: no promise of fitness for your particular purpose, no committed roadmap, and no guaranteed support. If it fits your needs, great; if not, feel free to fork it and adapt it. See the License for the full disclaimer.

Want to send improvements? Contributions are welcome as a feature branch + Pull Request — see Contributing.

📖 Docs & live showcase: https://joaoprofile.github.io/gofi-ui-native

Install

npm install gofi-ui-native
# peer dependencies (you provide these):
npm install react-native-safe-area-context react-native-svg lucide-react-native

react-native-safe-area-context, react-native-svg and lucide-react-native are peer dependencies — single-instance native modules the host app owns. With Expo, prefer npx expo install so versions match your SDK.

Usage

Wrap your app in SafeAreaProvider + ThemeProvider (+ ToastProvider if you use toasts):

import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ThemeProvider, ToastProvider, Card, Text, Button, FeatureList } from 'gofi-ui-native';

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <ToastProvider>
          <Card variant="brand">
            <Text variant="display" color="onBrand">Welcome</Text>
            <FeatureList onBrand items={[{ label: 'Accessible by default' }]} />
            <Button variant="primary" full onPress={() => {}}>Get started</Button>
          </Card>
        </ToastProvider>
      </ThemeProvider>
    </SafeAreaProvider>
  );
}

Highlights

• Token, never a literal — color/space/radius/type come from one TS token object; swap brand/mode and everything re-themes.
• 3 live brands + dark mode — Blue #AAD7FF (default), Violet, Green (ThemeProvider + useThemeControls).
• Dual-role blue — brand = light surface (navy text, 9.84:1); action = darker shade with AA over white.
• Accessibility from the start — accessibilityRole/Label/State, ≥ 44pt targets, Dynamic Type, reduce-motion and safe-area handled per component.

Components

| Group | Components | |-------|-----------| | Layout | Screen · Stack · Row · Divider | | Atoms | Text · Button · IconButton · Badge · Chip · Avatar · AvatarStack · Skeleton · Spinner | | Forms | Field · Input · Switch · Checkbox · Radio · SegmentedControl | | Containers & Data | Card (incl. brand hero) · ListItem · FeatureList · EmptyState · Progress | | Overlay & Feedback | Header · TabBar · BottomSheet · ModalDialog · ConfirmDialog · Toast | | Charts | BarChart · DonutChart · Sparkline (react-native-svg) |

Repository layout

gofi-ui-native/
  src/        the library (published to npm) — components, theme, tokens
  example/    the Expo docs app (web + native) → deployed to GitHub Pages
  lib/        build output (generated by react-native-builder-bob)

Develop

# library
npm install
npm run typecheck      # tsc --noEmit
npm run build          # react-native-builder-bob → lib/

# docs app (live preview of every component + showcase)
cd example
npm install
npm run web            # http://localhost:8081
npm run ios            # / npm run android — on device / simulator

The docs app imports the library by its published name (gofi-ui-native), aliased to ../src so edits hot-reload while you work.

Contributing

This library is maintained on a best-effort basis, but improvements from the community are welcome. If you'd like to contribute:

1. Open an issue first to report a bug or propose a change — it's the best place to discuss the idea before you write code (and avoids duplicate work).
2. Fork the repo and create a branch off main (e.g. feature/my-improvement or fix/some-bug).
3. Keep changes focused; run npm run typecheck and npm run build before opening the PR.
4. Open a Pull Request describing what changed and why (link the related issue).

PRs are reviewed when time allows — there's no guaranteed turnaround. Please don't be discouraged if a change takes a while or doesn't get merged; you're always free to fork and maintain your own variant.

License

MIT © João Carvalho