The prop rename map from RNUI modifiers to a shared native Button

Most of a React Native UI migration is a rename table. The compare page for react-native-ui-lib and otf-kit prints one. This is that table, expanded only with the sentences the same page puts around it, fetched 28 September 2026. Where money comes up, the kit ladder is from pricing the same day.

The page shortens react-native-ui-lib to RNUI, and notes that people also say Wix RNUI. It is a React Native library: 100+ components, its own design language, theming primitives, maintained by Wix as a public face of their internal system. Releases, the FAQ says, are regular. otf-kit on the same page is web plus native, 17 picker-driven themes, and an optional kit. The native package in the code sample is @otfdashkit/ui-native.

The Button is the smallest rename

RNUI, as printed:

import { Button } from 'react-native-ui-lib'

<Button label="Click me" backgroundColor="#1a1a1a" onPress={onClick} />

otf-kit:

import { Button } from '@otfdashkit/ui-native'

<Button variant="default" onPress={onClick}>Click me</Button>

Two mechanical changes. The visible text moves from the label prop to children. The color moves from a backgroundColor hex to a variant. onPress stays. The page files this under a larger styling shift. RNUI's modifier-prop pattern, written like <View bg-blue50>, is unique to it. otf-kit on native uses Tamagui's prop API. The page says bg="$blue50" works, and so does the style prop.

That is the engine row in one line of code. RNUI is StyleSheet-based with custom theming. otf-kit is Tamagui, described as compile-time. Choose the second import because you want that model. The page lists the preference as a win condition, not as a default.

The rename table the page actually prints

RNUI	otf-kit on the page
<Button label="...">	<Button>label</Button>
<TextField>	<Input> plus <Label>
<Card>	<Card>
<Dialog>	<Dialog>
<Toast>	<Toast>
<Picker>	<Select>
<DateTimePicker>	Compose <Popover> with a headless date picker
<Carousel>	Use react-native-reanimated-carousel

Card, Dialog, and Toast keep their names. Those rows are the cheap part of the diff. TextField splits into Input and Label, so any screen that assumed one component owned both the field and its caption needs a layout pass. Picker becomes Select. The date picker is not a rename. The page tells you to compose a Popover and a headless date picker. The carousel is not a rename either. The page points at the package react-native-reanimated-carousel.

The FAQ adds a constraint the table does not. The SDK does not include a wheel picker or a carousel directly. The SaaS Dashboard kit includes a basic carousel. A wheel picker means a community package. RNUI is, in the page's words, more feature-complete on these niche surfaces.

The migration prose names the components to leave alone: Wheel Picker, Hint, and Image with custom overlays. The instruction is to keep RNUI as a peer dependency and run both. The FAQ agrees that mixing works. The theme systems are not shared. The suggested split is otf-kit for the common UI and RNUI for the niche pieces. The page calls that common set "the 80% of common UI," which is a phrase, not the component count.

Counts, themes, and animation, so the rename has a reason

Native counts: 80+ on otf-kit, 100+ on RNUI. Web: 198+ on otf-kit, and the RNUI web cell says none. Platforms: web, iOS, and Android, against iOS and Android only. If the rename is in service of a web app that shares props with native, the Radix-based web parity is the reason the page gives. If there is no web app, the table is optional and the 100+ catalog is the reason the page gives to stay.

Themes: 17 picker-driven themes, swappable at runtime, against RNUI's theme manager plus colors. Animation: Motion and GSAP integrations, against Reanimated-based built-ins. A screen that depends on those built-in Reanimated behaviors is a screen the page says RNUI still wins. Switching it because the rename table looks short would drop the animation model the component already had.

The other listed reasons to stay are coverage and familiarity. React Native only, no web plan, broadest coverage. Niche surfaces, with Wheel Picker, the custom-thumb slider, and the parallax carousel named. An existing Wix stack or an API the team already knows.

The listed reasons to move are the web parity API, the 17 runtime themes, a kit, and a preference for the compile-time style engine.

Where a kit enters a component migration

The kit is not a row in the rename table, and it is the reason some teams open the page. The matrix says RNUI ships no full-stack kit. otf-kit lists SaaS Dashboard at $99 and Fitness at $99. The win paragraph says the kit includes auth, Stripe, and Drizzle, wired. The closing block prices the Everything Bundle at $149 and repeats Fitness at $99 with auth, a database, and workouts, live demo ready. SaaS Dashboard, in that same footer, is 11 screens with billing wired.

Demos linked from the page: the Fitness demo and the SaaS demo. The free SDK is the GitHub repo.

Pricing widens the $99 line. The free SDK is $0: 220+ pieces, 5 design themes in dark and light, full source, AI configs for Cursor, Claude, and Lovable, community support, 1 developer seat. Hold that 5 next to the compare page's 17. They are different claims on different pages. A landing template is $9, one client project, 1 seat. A kit is $99. Live kits named there are SaaS Dashboard, Fitness, and Arcade, with login, payments, and a database wired, 12 months of updates, one client project, and 1 seat. Booking is Preview, and the page says to use the bundle until it is live. Marketplace is coming soon and is not sold individually. The bundle is $149 against $531, save $382: 4 delivered kits, all 15 landing templates, lifetime updates, 1 seat. Fitness and Arcade are marked web plus mobile. SaaS Dashboard is marked web. Team is custom for 5 seats and unlimited client projects. No team price is on the page.

A component rename does not require any of those purchases. The SDK side of the compare page is free, and RNUI is free and MIT. The kit is the purchase when the missing piece is auth, the database, or Stripe, which the rename table will not produce.

A migration order that matches the page

Start with the components that keep their names: Card, Dialog, Toast. Then Button, because label and backgroundColor have a direct landing spot. Then TextField, as Input plus Label, and Picker as Select.

Stop at DateTimePicker, Carousel, Wheel Picker, Hint, and Image overlays. The page does not give you a one-line substitute for those. It gives you a composition, a different carousel package, a community package, or a peer dependency. Keeping RNUI installed for that remainder is the instruction, not a compromise you have to invent.

Do the styling pass with the modifier props in view. bg-blue50 becomes the Tamagui form the page prints, bg="$blue50", or a style prop. Expect the theme objects to stay separate if both libraries remain.

Then decide whether web parity or a kit was the point. If it was only the rename, and the app is staying on the phone, the page's coverage win for RNUI is still the standing advice.

The table and the two Button snippets are on the compare page. The tier list is on pricing.

---

Originally published at otf-kit.dev.