Awesome
English | 简体中文
<p align="center"> <a href="http://rn.mobile.ant.design"> <img width="320" src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png"> </a> </p>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 51 |
|---|
| <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=2e623b22-08d9-4ab2-92f2-017c7a92d5aa" /> |
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(44, 47, 49, 50) history version</summary>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
Links
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:
<a href="https://github.com/ant-design/ant-design-mobile-rn/graphs/contributors"> <img src="https://opencollective.com/ant-design-mobile-rn/contributors.svg?width=960&button=false" alt="contributors" /> </a>