Linking native libraries in React Native

Introduction

Linking native libraries lets your React Native app use features from native code. This helps you add special functions that JavaScript alone can't do.

You want to use a device feature like the camera or GPS that needs native code.

You want to add a third-party library that includes native code.

You need better performance for some parts of your app using native modules.

You want to use native UI components not available in React Native by default.

Syntax

React Native

npx react-native link <library-name>

This command connects the native code of the library to your app automatically.

For React Native 0.60 and above, auto-linking usually works without this command.

Examples

This links the react-native-vector-icons library so you can use custom icons in your app.

React Native

npx react-native link react-native-vector-icons

This links the react-native-maps library to show native map views.

React Native

npx react-native link react-native-maps

Sample App

This simple app shows how to use a native library for icons after linking it. The star icon is from the native react-native-vector-icons library.

React Native

import React from 'react';
import { View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default function App() {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>Here is a star icon:</Text>
      <Icon name="star" size={50} color="gold" />
    </View>
  );
}

Important Notes

From React Native 0.60+, most libraries support auto-linking, so manual linking is often not needed.

If auto-linking fails, use npx react-native link to connect native code.

After linking, you may need to rebuild your app to see changes.

Summary

Linking connects native code libraries to your React Native app.

Use npx react-native link for manual linking if auto-linking does not work.

Linking lets you use device features and native UI components.