Ant Design Mobile RN: a React Native component library for Ant Design Mobile

What Ant Design Mobile RN solves, and who it is aimed at

Building a mobile app in React Native means writing a lot of small components: list rows, form fields, modals, pickers, a date selector that behaves correctly on both platforms. Ant Design Mobile RN supplies those components already styled to the Ant Design Mobile specification, which the README describes as "A configurable Mobile UI specification and React-based implementation". The package is published as @ant-design/react-native on npm, and the repository is TypeScript throughout, so component props and theme types are available to consumers without a separate type package.

The audience is narrow and specific. This is for teams already using React Native who want the Ant Design visual language on mobile. The README notes that the components support "web and native usages based on React Native", which matters if you are targeting react-native-web as well. It is not a general-purpose styling toolkit, and it is not the same project as Ant Design for the browser. The related searches around "Ant design React native" and "Antd mobile icons" describe exactly this surface: the mobile port and its icon font.

How the component layer is put together

The repository ships two build outputs, declared in package.json as "main": "lib/index.js" and "module": "es/index.js", with the files field limiting the published tarball to lib and es. CommonJS consumers resolve lib, bundlers that understand the module field resolve es. There is no separate CSS step, which is expected for React Native, where styling is expressed in JavaScript objects rather than stylesheets.

Underneath, the library leans on a set of dependencies rather than implementing everything itself. rc-field-form handles form state, dayjs handles dates, @floating-ui/react-native positions floating elements, and @bang88/react-native-ultimate-listview backs the list components. rc-util and classnames appear as shared helpers. The practical consequence is that a bug in form validation or popover positioning may need to be fixed upstream in those packages, not in this repository. The README does not document a mechanism for overriding those internals, so treat them as part of the library's surface.

The repository layout also shows a .dumi directory and a .dumirc.ts at the top level, alongside a docs folder and an rn-kitchen-sink folder. The kitchen sink is the runnable demo app referenced in the development instructions, and it is the most reliable place to check whether a component behaves the way you expect before wiring it into your own screens.

Installing Ant Design Mobile RN and rendering a first screen

The README gives a single install command covering the library and its icon package. Run it in your project root:

npm install @ant-design/react-native @ant-design/icons-react-native

Peer dependencies come next, and the command differs by project type. On an Expo managed project the README directs you to expo install:

npx expo install react-native-gesture-handler react-native-reanimated

On a bare React Native project the README uses npm and adds a third package, react-native-worklets:

npm install react-native-gesture-handler react-native-reanimated react-native-worklets

That third package is not optional in the bare case. The README states you must also add the react-native-worklets/plugin plugin to babel.config.js, and it warns not to put it in presets. The shape it shows is a plugins array containing the string 'react-native-worklets/plugin'. Skipping this step is the most common way a first render fails, because Reanimated refuses to run without its Babel plugin.

Bare iOS projects need pods as well. From the project root, change into ios, run pod install, and come back. Then link the icon fonts. Create or edit react-native.config.js in the project root so that it exports an assets array pointing at node_modules/@ant-design/icons-react-native/fonts, and run npx react-native-asset. The README notes that linking and unlinking are automatic with that command. If icons render as empty boxes, the asset step is the first thing to re-check.

For a quick look before installing anything, the README publishes Expo preview builds, including one labelled SDK 54 with [email protected], reachable by scanning a QR code with the Expo app. That is a preview of the library's own demo, not a template for your app.

Where the dependency chain bites

The install instructions expose the main friction: this library does not own its animation and gesture layer. Reanimated and worklets are peer dependencies whose versions your app controls, and the README points to the Reanimated installation documentation rather than pinning a version itself. If your app already uses a different Reanimated major version, you are reconciling two constraints. The README is silent on which combinations are supported, so that reconciliation is yours to do.

The package.json also shows react-native-codegen at ^0.0.7, a much older line than the React Native versions the Expo preview targets. The README does not explain how that dependency is used at runtime, so it is hard to judge from the repository alone whether it is a build-time leftover or something the published output needs.

Release cadence is the other thing to weigh. The last push to the repository was on 2026-06-03, and the newest release listed is 5.4.3 from 2025-08-11, preceded by 5.4.2 in May 2025 and 5.4.0 in April 2025. That is roughly a quarterly rhythm rather than a fast one. If your project depends on a fix landing quickly, this is not the right shape of dependency. The README does not document a deprecation policy or a rollback procedure for the component library, so plan upgrades around the changelog files in the repository (CHANGELOG.en-US.md and CHANGELOG.zh-CN.md) rather than around a published support window.

When to reach for something else

If you want the Ant Design look on the web rather than in a native app, this is the wrong package. Ant Design itself is the browser library, and the related searches distinguish the two: "Ant Design Pro" and "Ant Design pro components" point at the web scaffolding and its component set, while this repository is the React Native port. Mixing them in one codebase means two component APIs that look similar but are not interchangeable.

A second alternative is to skip a design-system port entirely and assemble components from React Native primitives plus a styling layer. That costs more upfront work, but it removes the peer dependency negotiation described above, and it removes the risk of a component's behaviour changing under you on the library's release schedule. The README itself points readers who "only care about the style" toward Tanjun, a separate project, which is a fair signal that the maintainers see the styling concern as separable from the component implementation.

A third case is Expo Go users who need a component the library does not ship. Because the library depends on native modules through Reanimated and gesture handler, adding a custom native module still pushes you toward a development build. The Expo preview builds in the README are for the demo app, not a guarantee that any component set works inside the Expo Go sandbox.

Licence and the cost of staying current

The package is MIT licensed, and the LICENSE file sits at the repository root. MIT is permissive: you can use the components in commercial applications, modify them, and redistribute them, provided the copyright notice and licence text travel with the code. That is a description of the licence terms, not legal advice; if your organisation has a policy on third-party notices, route the LICENSE file through it.

Upgrade cost is dominated by the peer dependencies rather than by the library's own API. A version bump here can force a Reanimated or worklets bump there, and on a bare React Native project that means re-running pod install and re-checking the Babel plugin entry. Budget for a rebuild of the native projects, not just an npm install. The repository keeps both an English and a Chinese changelog, which is the practical place to look before deciding whether a given release touches anything you use.

Editorial conclusion

Adopt Ant Design Mobile RN if you are building an iOS or Android app on React Native or Expo and want the Ant Design Mobile look without writing the components yourself. Do not adopt it if you need a web-first component set or a library whose maintainers publish a rolling release cadence; the last push was on 2026-06-03 and the newest release listed is 5.4.3 from 2025-08-11. Before committing, verify three things on your own machine: that your Reanimated and worklets versions match what the library expects, that npx react-native-asset actually links the icon font on both platforms, and that the components you need appear in the rn-kitchen-sink example rather than only in the web documentation.

Frequently asked questions

Official sources

1. ant-design/ant-design-mobile-rn on GitHub
2. License: MIT
3. Project website
4. README
5. Releases