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

Web support

Preview Web Platform in [here] 🔗
Expo demo app

SDK 49+

Expo SDK history version

|Expo SDK 44|SDK 47 iOS|SDK 47 Android| |--|--|--| | [ expo/ant-design-mobile-rn

](https://expo.dev/@1uokun/ant-design-mobile-rn) | [ expo/ant-design-mobile-rn

](https://expo.dev/@1uokun/ant-design-mobile-rn) |

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

Development

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

Running On Expo

# go to expo example folder
cd example

# install dependencies
yarn

# start expo
yarn expo

Install & Usage

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

yarn add @ant-design/react-native

Installing peer dependencies

npm install @react-native-community/segmented-control @react-native-community/slider @ant-design/icons-react-native react-native-gesture-handler

yarn add @react-native-community/segmented-control @react-native-community/slider @ant-design/icons-react-native react-native-gesture-handler

You need go to ios folder and run pod install (auto linking)，Android will handle it by itself.

Link icon fonts

// config `react-native.config.js` in project’s root directory
module.exports = {
  assets: ['node_modules/@ant-design/icons-react-native/fonts'],
};

then

npx react-native-asset

introduce

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! :)

ant-design / ant-design-mobile-rn

readme