Skip to main content

Installation

Install the package​

Install rn-international-phone-number along with its required peer react-native-safe-area-context:

npm install rn-international-phone-number react-native-safe-area-context

Since react-native-safe-area-context ships native code, install the iOS pods on macOS to complete linking:

npx pod-install ios

:::info Why react-native-safe-area-context? The country selector modal is rendered by rn-country-select, which uses it. You do not need to add a SafeAreaProvider yourself — the modal ships its own. :::

Additional config for Web​

Using React Native CLI​

Create a react-native.config.js file at the root of your project:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [
    './node_modules/rn-country-select/lib/assets/fonts',
  ],
};

Then link the font to your native projects:

npx react-native-asset

Using Expo​

  1. Install expo-font:

    npx expo install expo-font

  2. Load the font at app start:

    import {useFonts} from 'expo-font';

    useFonts({
      TwemojiMozilla: require('./node_modules/rn-country-select/lib/assets/fonts/TwemojiMozilla.woff2'),
    });
note

Recompile your project after adding new fonts.

Next​