We brought UX4G to React Native

When we shipped UX4G for React last week, we made a promise: React Native next, then Flutter. Here’s the first half, in the open today.

UX4G for React Native is the same government design system, rebuilt for phones. The same 41 components from the web kit, now genuinely native: real React Native primitives and react-native-svg, with no WebView and no DOM underneath. It’s @hopline/ux4g-react-native, MIT-licensed, on npm now.

One system, two runtimes

A government service usually needs both a website and an app, and the two should feel like one product. So instead of wrapping a web view in a native shell, we did the harder thing.

Both kits read from a single source of truth for the design tokens. Colour, spacing, radius and type live in one file; that file compiles to CSS variables for the web package and a typed theme for the native one. A button on the site and a button in the app are the same button, with the same contrast, focus behaviour and 44px target, because they share the same numbers. Change the design once and it changes in both places. That same token source will feed Compose and SwiftUI later.

Using it

npm install @hopline/ux4g-react-native react-native-svg

import { ThemeProvider, Button, Input, Card } from "@hopline/ux4g-react-native";

export default function App() {
  return (
    <ThemeProvider>
      <Card title="Apply for a scheme">
        <Input label="Full name" required />
        <Button onPress={submit}>Submit</Button>
      </Card>
    </ThemeProvider>
  );
}

Wrap your app once in ThemeProvider and the whole set is there, fully typed. It runs in both bare React Native and Expo.

Re-skinning works just like the web kit: pass a colour ramp to ThemeProvider, or build a theme once with makeTheme, and every component follows. The UX4G violet is the default; one override turns the whole app into a government blue, or your own brand.

It’s native, so it performs like it

These are real components, so on React Native’s New Architecture (Fabric and Hermes) they render at native speed. Where it counts, we did the careful thing: Select virtualizes its dropdown with a FlatList, so a long country or currency list mounts only the rows on screen. Small, fixed sets like Tabs, Breadcrumb and the 37-region IndiaMap render directly, because virtualizing them would only add overhead.

And when you hit a real hot path, a heavy computation or a platform-native view, you can drop to Kotlin or Swift through the Expo Modules API and call it from JavaScript. You never have to leave React Native to do it.

The honest part

This is an early release, 0.1.0. We’ve already put the React kit through two full case studies; the native package shares its tokens and component contracts, but it hasn’t earned the same mileage yet. If you ship it and something feels off, tell us.

One difference from the web kit: there’s no hosted showcase to click through, because native components don’t run in a browser. That’s the point. The components, props and a per-component reference live in the README on GitHub instead.

And as always, this is unofficial and community-maintained. UX4G is © NeGD and MeitY, Government of India. We build it in good faith from the published web kit, but it isn’t an official release and we don’t speak for the government.

Flutter is next, against the same tokens and the same contracts, so a button keeps behaving like a button wherever you build.

The code is on GitHub, the package is @hopline/ux4g-react-native on npm, and if you’re building something native for citizens and want a hand, say hello. A real person replies, usually within a day.