Use Expo together with Ant Design Mobile

Ant Deisgn Mobile is a mobile UI framework I like a lot. It provides not only web version, but also a version for react-native.

However, the instructions for installing with expo from their official website seems outdated as of write. Therefore I would write down the steps to make it work with expo.

1. Install Ant-Design-Mobile React native version

Install the package using expo install instead of yarn or npm as the latter causes some unexpected errors.

expo install @ant-design/react-native

2. configure babel.config.js

In order to load the plugin, we need to configure babel configuration file. Thus we need to install the babel plugin first.

expo install babel-plugin-import

Then all we need to do is to edit the babel.config.js file.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [['import', { libraryName: '@ant-design/react-native' }]], // add this line to import ant design library
  };
};

As of now most of the common components of ant design should be working.

3. [Recommended] Allow Ant Design Icons to work

If you also want the ant design icons to work, you'll have to load the ant design font, like you import other fonts in expo. I hope you are already familiar with that.

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';

export default function App() {
  const [isReady, setIsReady] = useState<boolean>(false);

  useEffect(() => {
    loadFonts();
  }, []);

  async function loadFonts() {
    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')
    );
    setIsReady(true);
  }

  if (!isReady) {
    return <AppLoading />;
  }

  return <View></View>;
}

Note: These are only valid as of write (2021-05-23), as both Expo and Ant Design Mobile are updating their packages quite frequetly. But this chould serve as a general method to get it working. Hope it helps.