Getting started

React Native

alpha

@nexub/react-native brings Nexub to iOS and Android apps built with Expo or bare React Native. Same tokens, product brands and prop names as @nexub/react, so one design change ships to web and mobile.

Native chrome, Nexub content

The operating system draws the navigation: tab bar, stack header and back gesture, action sheets, date pickers and iOS 26 Liquid Glass. Nexub colours it, so apps feel native on each platform. Everything people read and tap inside a screen (lists, cards, buttons, inputs, money) is drawn by Nexub and looks the same on iOS, Android and the web.

Install

npx expo install @nexub/react-native react-native-reanimated react-native-worklets react-native-svg react-native-safe-area-context expo-font

Optional: expo-haptics (haptics), expo-glass-effect (Liquid Glass on iOS 26+), expo-screen-capture (PrivacyShield) and @react-native-community/datetimepicker (DateTimeField). Supported: Expo SDK 57+ / React Native 0.86+.

Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.

Set up

import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import { NexubNativeProvider, ToastProvider, nexubFonts, useNexubNavigation } from '@nexub/react-native';

function Screens() {
  const nav = useNexubNavigation();
  return <Stack screenOptions={nav.stack} />;
}

export default function RootLayout() {
  const [ready] = useFonts(nexubFonts);
  if (!ready) return null;
  return (
    <NexubNativeProvider product="payub">
      <ToastProvider>
        <Screens />
      </ToastProvider>
    </NexubNativeProvider>
  );
}

product picks the brand (Leap, Bookub, Payub, Founderub); seed white-labels any other. Light/dark, contrast, Reduce Motion and Reduce Transparency follow the OS unless you set them.

Web → native

Every web component with a native twin. Open one to see both platforms side by side and how they differ.

Web components and their React Native twins
@nexub/react	@nexub/react-native	Differences
Button	`Button`	5 (variants, icons, primary action size, feedback, hit area)
Icon Button	`IconButton`	3 (icon, toggle, hit area)
Button Group	`ButtonGroup`	1 (layout)
Split Button	`Button + ActionSheet`	1 (pattern)
Link	`Link`	2 (navigation, hit area)
Amount	`Amount`	2 (sizes, formatting)
Badge	`Badge`	2 (dot, sizes)
Avatar	`Avatar`	1 (status)
Avatar Group	`AvatarGroup`	None
Separator	`Divider`	1 (name and inset)
Card	`Card`	2 (interaction, surface)
Accordion	`Accordion`	1 (api)
Input	`TextField`	2 (label, keyboard)
Form Field	`TextField`	1 (label)
Password Input	`PasswordInput`	1 (autofill)
Search Input	`SearchField`	1 (name)
Money Input	`MoneyInput`	1 (large entry)
Number Input	`Stepper`	1 (control)
Checkbox	`Checkbox`	2 (label, in lists)
Radio Group	`RadioGroup`	1 (label)
Switch	`Switch`	2 (look, label)
Segmented Control	`SegmentedControl`	1 (api)
Slider	`Slider`	1 (label)
Chip	`Chip`	1 (hit area)
Filter Chip	`FilterChip`	1 (hit area)
Select	`Select`	2 (menu, label)
Date Picker	`DateTimeField`	1 (picker)
Banner	`Banner`	1 (scope)
Alert	`Banner`	1 (name)
Toast	`ToastProvider + useToast`	2 (stack, timing)
Dialog	`Dialog`	1 (use)
Alert Dialog	`Dialog`	1 (dismiss)
Drawer	`BottomSheet`	1 (edge)
Sheet	`BottomSheet`	1 (edge)
Progress	`Progress`	1 (label)
Spinner	`LoadingIndicator`	1 (name)
Skeleton	`Skeleton`	None
Empty State	`EmptyState`	None
Error State	`ErrorState`	None
dropdown-menu	`ContextMenu / ActionSheet`	1 (trigger)

Mobile only

Components that only make sense on a phone.

List ItemOne row, one target: navigation, switch, checkbox, radio, button and value rows, read as one element.List SectionInset-grouped list with a header and footer, like iOS Settings.Bottom SheetA sheet from the bottom with detents, a grabber and keyboard handling. Works in Expo Go; no native dependency.Action SheetA list of actions from the bottom: the system sheet on iOS, a Nexub sheet on Android.Context MenuLong-press menu with the actions also exposed as accessibility actions.Swipeable RowSwipe a row to reveal actions; every swipe action is also an accessibility action.Refresh ControlPull to refresh in Nexub colours.OTP InputOne field drawn as cells, so SMS one-time-code autofill works on iOS and Android.Numeric KeypadAn on-screen keypad for amounts and PINs, with the locale’s decimal key.Expressive Money InputThe big amount on a send-money screen; pair with NumericKeypad.Date Time FieldOpens the platform date or time picker.Sensitive ValueMasks a balance or card number until revealed; re-masks when the app goes to the background and reads as "hidden".Privacy ShieldCovers the app in the app switcher and can block screenshots (expo-screen-capture).CarouselPaged horizontal list with snapping; pair with PageIndicator.Page IndicatorDots for a carousel or onboarding pages.Sticky FooterKeeps the primary action above the keyboard and home indicator.Offline BannerA slim banner while the device is offline.CoachmarkA one-time hint pointing at a control, dismissed by the user.FABFloating action button. Android only by default (`platforms`), since it reads as Material.

Screens

Full screens (sign-in, activity, transaction detail, settings, chat, paywall and more) live in @nexub/react-native/patterns. Each one is on the matching pattern page next to its web version.

Rules the components follow

Built in

Every control reaches a 44pt touch target; primary actions use size="lg".
Text scales with the system size; on iOS each role follows its Dynamic Type curve.
A list row is one screen-reader element; swipe and long-press actions are also accessibility actions.
Money screens hide balances with SensitiveValue, cover the app switcher with PrivacyShield and enter codes with OTPInput (SMS autofill).

Avoid

Haptics on plain taps, or as the only feedback.
Glass on content: it is for the control layer only, and turns solid when the user reduces transparency.
Web patterns on phones: no hover, no split buttons, no popover menus; use sheets and long-press.
Dialogs for forms: use a BottomSheet or a screen.