Ant Design Mobile RN of React
@ant-design/react-native
is the React implementation of the Ant Design's mobile specification, serving the ant and koubei wireless service.
Features and Advantages
The UI is fully Configurable and Scalable, easily adapt to all kinds of product style.
Support Web / iOS / Android platform (Based on React Native), has a wealth of components, can fully cover all kinds of scenes. (antd-mobile)
Provide "Components are loaded on demand" / "Web page HD display" / "SVG Icon" optimization features, integrated development.
Use TypeScript to develop, provide type definition files, support type and attribute smart tips for easy business development.
Fully compatible with react / preact.
Applicable Scenes
Medium-sized and large-scale applications.
Multi-terminal applications based on react / preact / react-native.
Custom UI-style applications.
Version
Installation
$ npm install @ant-design/react-native @ant-design/icons-react-native
Installing peer dependencies
We manage the following dependencies through peerDependencies
to allow you to choose versions more flexibly and reduce repeated installation of dependencies:
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
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
If you have an Expo managed project, skip the previous two steps and use expo-font to load the font directly:
import { useFonts } from 'expo-font'; const [fontsLoaded] = useFonts({ antoutline: require('@ant-design/icons-react-native/fonts/antoutline.ttf'), })
Usage
Example of usage:
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from '@ant-design/react-native/lib/button';
class HelloWorldApp extends Component {
render() {
return <Button>Start</Button>;
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
If you need to use Modal
and Toast
you also need to add Provider
to the app entry point
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Button, Provider, Toast } from '@ant-design/react-native';
class HelloWorldApp extends Component {
render() {
return (
<Provider>
<Button onPress={() => Toast.info('This is a toast tips')}>
Start
</Button>
</Provider>
);
}
}
Use modularized @ant-design/react-native
The following two ways used to load the only components you used, select one of the ways you like.
Use babel-plugin-import (Recommended)
// .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "@ant-design/react-native" }] // The difference with the Web platform is that you do not need to set the style ] }
Then just change the way of import modules from @ant-design/react-native.
import { Button } from '@ant-design/react-native';
Note: Some people reflected that it would be unable to resolve module
react-dom
in a project created withreact-native init
. If you encounter the same problem, you might try to install babel-plugin-module-resolver.Manually import
import Button from '@ant-design/react-native/lib/button';
More enhanced (optional):
Links
Contributing
Please read our CONTRIBUTING.md first.
If you'd like to help us improve @ant-design/react-native, just create a Pull Request. Feel free to report bugs and issues here.
If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way and How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!
Need Help?
For questions on how to use antd, please post questions to stackoverflow using the antd
/antd-mobile-rn
tag. If you're not finding what you need on stackoverflow, you can find us on gitter as well.
As always, we encourage experienced users to help those who are not familiar with antd
!