Awesome

English | 简体中文

Ant Design Mobile RN

A configurable Mobile UI specification and React-based implementation.

If you only care about the style you may give [Tanjun] a try.

Features

Follow Ant Design Mobile UI specification.
Configurable UI style for different products.
Support web and native usages based on React Native.
Develop in TypeScript.

Expo

HTML5 Preview: ant-design-mobile-rn/index.html

SDK 52(react-native@0.76.1)
<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=1a1dbedd-d817-4dee-a5d9-1e7cc1ebe4a0&host=u.expo.dev" />

Open the camera app on your device and scan the code above, <br> need install expo app: https://expo.io/tools

<details><summary>Expo SDK(47, 49, 50, 51) history version</summary>

SDK 47 iOS	SDK 47 Android	SDK 49,50	SDK 51
<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=38b3a547-ab2b-4066-95ed-400f1707dcc6&appScheme=exp&host=u.expo.dev" />	<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=05f0e308-2dd5-4cb9-9e6b-1ae31561bfee&appScheme=exp&host=u.expo.dev" />	<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=bbf0a647-4ff2-46bd-9aad-dfd81bc6ba08" />	<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=cb809e16-1f0b-4f2c-9c28-417d7a67abfe&host=u.expo.dev" />

</details>

Install & Usage

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

Installing peer dependencies

Next, install the required peer dependencies. You need to run different commands depending on whether your project is an Expo managed project or a bare React Native project.

If you have an Expo managed project, install the dependencies with expo:

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

If you have a bare React Native project, install the dependencies with npm:
```
npm install react-native-gesture-handler react-native-reanimated
```
For iOS with bare React Native project, make sure you have CocoaPods installed. Then install the pods to complete the installation:
```
cd ios
pod install
cd ..
```

Link icon fonts

Add assets to your react-native.config.js ( If not exist, please create in project’s root directory )

module.exports = {
  assets: ['node_modules/@ant-design/icons-react-native/fonts'],
};

Run the react-native-asset's command and linking + unlinking is automatic

npx react-native-asset

Development

Running On Expo

node >= 18

# go to expo example folder
cd example

# install dependencies
yarn

# start expo
yarn expo

Running On Device

# clone
git clone git@github.com:ant-design/ant-design-mobile-rn.git

# go to ant rn folder
cd ant-design-mobile-rn

# install dependencies
yarn

# start ios
cd rn-kitchen-sink/ios && pod install
yarn ios 

# start android
yarn android

Contributing

We welcome all contributions, please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as a GitHub issue. If you'd like to improve code, check out the Development Instruction and have a good time! :)

Thanks to all the contributors of @ant-design/react-native: