introduce.en-US.md

order	title
0	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.

+

<style> .pic-plus > * { display: inline-block; vertical-align: middle; } .pic-plus { margin: 40px 0; } .pic-plus span { font-size: 30px; color: #aaa; margin: 0 40px; } </style>

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.

Getting Started

Before delving into Ant Design React, a good knowledge of React and ES2015 is needed.

Make sure that you had installed Node.js(> v4.x) correctly.

1. Create a New Project

Can be an existing project, or a newly created empty project with create-react-native-app, you can also copy and modify from the official example scaffolding.

More official examples. Also, you can use any scaffold available in React ecosystem.

The complete procedure please check the document here: antd-mobile-sample/create-react-native-app

2. Installation

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

or

$ yarn add @ant-design/react-native

Link icon fonts

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

or

$ yarn add @ant-design/icons-react-native

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 are using expo please make sure fonts has been loaded

import { AppLoading, Font } from 'expo';
...
...
class App extends React.Component {
  state = {
    theme: null,
    currentTheme: null,
    isReady: false,
  };
  changeTheme = (theme, currentTheme) => {
    this.setState({ theme, currentTheme });
  };
  async componentDidMount() {
    await Font.loadAsync(
      'antoutline',
      // eslint-disable-next-line
      require('@ant-design/icons-react-native/fonts/antoutline.ttf')
    );

    await Font.loadAsync(
      'antfill',
      // eslint-disable-next-line
      require('@ant-design/icons-react-native/fonts/antfill.ttf')
    );
    // eslint-disable-next-line
    this.setState({ isReady: true });
  }
  render() {
    const { theme, currentTheme, isReady } = this.state;
    if (!isReady) {
      return <AppLoading />;
    }
    return (
      <Provider theme={theme}>
        <RootNavigator
          screenProps={{ changeTheme: this.changeTheme, currentTheme }}
        />
      </Provider>
    );
  }
}

This is not the way you would write it if you were using expo sdk32 or above

import { Font } from 'expo';

Instead, use a separate name

import * as Font from 'expo-font';

3. 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 with react-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):

Custom theme and single component style Like #1853

Version

• Stable:
• Next:

Links

• Home Page
• Developer Instruction
• React components

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!

1. Stack Overflow
2. Segment Fault
3.