Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ant-design/ant-design-mobile-rn
Ant Design for React Native
https://github.com/ant-design/ant-design-mobile-rn
android antd-mobile ios javascript react react-native typescript
Last synced: 7 days ago
JSON representation
Ant Design for React Native
- Host: GitHub
- URL: https://github.com/ant-design/ant-design-mobile-rn
- Owner: ant-design
- License: mit
- Created: 2018-05-02T08:38:52.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T07:09:52.000Z (3 months ago)
- Last Synced: 2024-10-29T10:53:00.195Z (3 months ago)
- Topics: android, antd-mobile, ios, javascript, react, react-native, typescript
- Language: TypeScript
- Homepage: https://rn.mobile.ant.design/
- Size: 41.7 MB
- Stars: 3,072
- Watchers: 45
- Forks: 611
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.en-US.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Authors: AUTHORS.txt
Awesome Lists containing this project
- awesome - ant-design-mobile-rn - Ant Design for React Native (TypeScript)
- awesome-list - ant-design-mobile-rn - design | 2301 | (TypeScript)
- awesome-made-by-chinese - ant-design-mobile-rn
- awesome-star-libs - ant-design / ant-design-mobile-rn - native UI组件库 (目录)
- awesome-react-native - @ant-design/react-native - Ant Design for React Native.  (UI Frameworks)
README
English | [简体中文](./README.zh-CN.md)
# Ant Design Mobile RN
[](https://travis-ci.org/ant-design/ant-design-mobile-rn)
[](https://codecov.io/gh/ant-design/ant-design-mobile-rn)
[](https://www.npmjs.org/package/@ant-design/react-native)
[](https://npmjs.org/package/@ant-design/react-native)
[](https://david-dm.org/ant-design/ant-design-mobile-rn)
[](http://isitmaintained.com/project/ant-design/ant-design-mobile-rn 'Percentage of issues still open')
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
A configurable Mobile UI specification and React-based implementation.
> If you only care about the style you may give [[Tanjun]](https://github.com/bang88/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](https://1uokun.github.io/ant-design-mobile-rn/index.html)
|SDK 52([email protected])|
|--|
| [
](https://expo.dev/preview/update?message=5.3.0(sdk%3A52)&updateRuntimeVersion=5.3.0&createdAt=2024-11-14T08%3A25%3A05.823Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=1a1dbedd-d817-4dee-a5d9-1e7cc1ebe4a0) |
Open the camera app on your device and scan the code above,
need install expo app: https://expo.io/tools
Expo SDK(47, 49, 50, 51) history version
|SDK 47 iOS|SDK 47 Android|SDK 49,50|SDK 51|
|--|--|--|--|
| [
](https://expo.dev/@1uokun/ant-design-mobile-rn) | [
](https://expo.dev/@1uokun/ant-design-mobile-rn) | [
](https://expo.dev/preview/update?message=5.2.2&updateRuntimeVersion=5.2.2&createdAt=2024-08-12T13%3A33%3A56.096Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=bbf0a647-4ff2-46bd-9aad-dfd81bc6ba08) | [
](https://expo.dev/preview/update?message=5.3.0&updateRuntimeVersion=5.3.0&createdAt=2024-11-14T07%3A33%3A14.502Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=cb809e16-1f0b-4f2c-9c28-417d7a67abfe) |
## Install & Usage
```bash
$ 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`:
```bash
npx expo install react-native-gesture-handler react-native-reanimated
```
- If you have a bare React Native project, install the dependencies with `npm`:
```bash
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:
```bash
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 )
```js
module.exports = {
assets: ['node_modules/@ant-design/icons-react-native/fonts'],
};
```
Run the [react-native-asset](https://github.com/unimonkiez/react-native-asset)'s command and linking + unlinking is automatic
```bash
npx react-native-asset
```
## Links
- [Home Page](http://rn.mobile.ant.design)
- [More Introduce >](docs/react/introduce.en-US.md)
- [Developer Instruction](development.en-US.md)
## Development
- **Running On Expo**
> node >= 18
```bash
# go to expo example folder
cd example
# install dependencies
yarn
# start expo
yarn expo
```
- **Running On Device**
```bash
# clone
git clone [email protected]: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](https://github.com/ant-design/ant-design-mobile-rn/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design-mobile-rn/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design-mobile-rn/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design-mobile-rn/blob/master/development.en-US.md) and have a good time! :)
---
Thanks to all the contributors of @ant-design/react-native:
