react-native/docs/next/libraries.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using Libraries · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Using Libraries · React Native"><meta data-react-helmet="true" name="description" content="This guide introduces React Native developers to finding, installing, and using third-party libraries in their apps."><meta data-react-helmet="true" property="og:description" content="This guide introduces React Native developers to finding, installing, and using third-party libraries in their apps."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/next/libraries"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/next/libraries"><link rel="stylesheet" href="/styles.654d26b0.css">
<link rel="stylesheet" href="/main.c541a094.css">
<link rel="preload" href="/styles.cc2cf098.js" as="script">
<link rel="preload" href="/runtime~main.44dce7c6.js" as="script">
<link rel="preload" href="/main.259a8b48.js" as="script">
<link rel="preload" href="/1.55a8a1b3.js" as="script">
<link rel="preload" href="/2.8585ac8b.js" as="script">
<link rel="preload" href="/1f391b9e.8301d553.js" as="script">
<link rel="preload" href="/939.3c971b89.js" as="script">
<link rel="preload" href="/935f2afb.4085bd98.js" as="script">
<link rel="preload" href="/17896441.6dff1a67.js" as="script">
<link rel="preload" href="/4ec33e7a.331df786.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/next/getting-started">Next</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/next/libraries">Next</a></li><li><a class="dropdown__link" href="/docs/libraries">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/libraries">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/libraries">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/libraries">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/next/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/next/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/next/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/next/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/next/libraries">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/libraries">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/libraries">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/libraries">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/libraries">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-android-fragment">Integration with an Android Fragment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/symbolication">Symbolicating a stack trace</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/testing-overview">Testing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/next/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/upgrading">Upgrading to new versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profiling">Profiling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profile-hermes">Profiling with Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/signed-apk-android">Publishing to Google Play Store</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/app-extensions">App Extensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/publishing-to-app-store">Publishing to Apple App Store</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for React Native <strong>Next</strong> version.</div><div class="margin-top--md">For up-to-date documentation, see the <strong><a href="/docs/libraries">latest version</a></strong> (0.63).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: Next</span></div><header><h1 class="docTitle_cWlf">Using Libraries</h1></header><div class="markdown"><p>React Native provides a set of built-in <a href="/docs/next/components-and-apis">Core Components and APIs</a> ready to use in your app. You&#x27;re not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If the Core Components and APIs don&#x27;t have what you are looking for, you may be able to find and install a library from the community to add the functionality to your app.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="selecting-a-package-manager"></a>Selecting a Package Manager<a aria-hidden="true" tabindex="-1" class="hash-link" href="#selecting-a-package-manager" title="Direct link to heading">#</a></h2><p>React Native libraries are typically installed from the <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm registry</a> using a Node.js package manager such as <a href="https://docs.npmjs.com/cli/npm" target="_blank" rel="noopener noreferrer">npm CLI</a> or <a href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">Yarn Classic</a>.</p><p>If you have Node.js installed on your computer then you already have the npm CLI installed. Some developers prefer to use Yarn Classic for slightly faster install times and additional advanced features like Workspaces. Both tools work great with React Native. We will assume npm for the rest of this guide for simplicity of explanation.</p><blockquote><p>💡 The terms &quot;library&quot; and &quot;package&quot; are used interchangably in the JavaScript community.</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="installing-a-library"></a>Installing a Library<a aria-hidden="true" tabindex="-1" class="hash-link" href="#installing-a-library" title="Direct link to heading">#</a></h2><p>To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let&#x27;s try this with <code>react-native-webview</code>:</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">npm</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Yarn</li></ul><div role="tabpanel" class="margin-vert--md"><div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">npm</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">install</span><span class="token plain"> react-native-webview</span></div></div></div></div></div></div></div></div><p>The library that we installed includes native code, and we need to link to our app before we use it.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="linking-native-code-on-ios"></a>Linking Native Code on iOS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#linking-native-code-on-ios" title="Direct link to heading">#</a></h2><p>React Native uses CocoaPods to manage iOS project dependencies and most React Native libraries follow this same convention. If a library you are using does not, then please refer to their README for additional instruction. In most cases, the following instructions will apply.</p><p>Run <code>pod install</code> in our <code>ios</code> directory in order to link it to our native iOS project. A shortcut for doing this without switching to the <code>ios</code> directory is to run <code>npx pod-install</code>.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-bash codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">npx pod-install</span></div></div></div></div></div><p>Once this is complete, re-build the app binary to start using your new library:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-bash codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">npx react-native run-ios</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="linking-native-code-on-android"></a>Linking Native Code on Android<a aria-hidden="true" tabindex="-1" class="hash-link" href="#linking-native-code-on-android" title="Direct link to heading">#</a></h2><p>React Native uses Gradle to manage Android project dependencies. After you install a library with native dependencies, you will need to re-build the app binary to use your new library:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-bash codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">npx react-native run-android</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="finding-libraries"></a>Finding Libraries<a aria-hidden="true" tabindex="-1" class="hash-link" href="#finding-libraries" title="Direct link to heading">#</a></h2><p><a href="https://reactnative.directory" target="_blank" rel="noopener noreferrer">React Native Directory</a> is a searchable database of libraries built specifically for React Native. This is the first place to look for a library for your React Native app.</p><p>Many of the libraries you will find on the directory are from <a href="https://github.com/react-native-community/" target="_blank" rel="noopener noreferrer">React Native Community</a> or <a href="https://docs.expo.io/versions/latest/" target="_blank" rel="noopener noreferrer">Expo</a>.</p><p>Libraries built by the React Native Community are driven by volunteers and individuals at companies that depend on React Native. They often support iOS, tvOS, Android, Windows, but this varies across projects. Many of the libraries in this organization were once React Native Core Components and APIs.</p><p>Libraries built by Expo are all written in TypeScript and support iOS, Android, and react-native-web wherever possible. They usually require that you first install <a href="https://github.com/expo/expo/tree/master/packages/react-native-unimodules" target="_blank" rel="noopener noreferrer">react-native-unimodules</a> in order to use in your React Native app.</p><p>After React Native Directory, the <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm registry</a> is the next best place if you can&#x27;t find a library specifically for React Native on the directory. The npm registry is the definitive source for JavaScript libraries, but the libraries that it lists may not all be compatible with React Native. React Native is one of many JavaScript programming environments, including Node.js, web browsers, Electron, and more, and npm includes libraries that work for all of these environments.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="determining-library-compatibility"></a>Determining Library Compatibility<a aria-hidden="true" tabindex="-1" class="hash-link" href="#determining-library-compatibility" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="does-it-work-with-react-native"></a>Does it work with React Native?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#does-it-work-with-react-native" title="Direct link to heading">#</a></h3><p>Usually libraries built <em>specifically for other platforms</em> will not work with React Native. Examples include <code>react-select</code> which is built for the web and specifically targets <code>react-dom</code>, and <code>rimraf</code> which is built for Node.js and interacts with your computer file system. Other libraries like <code>lodash</code> use only JavaScript language features and work in any environment. You will gain a sense for this over time, but until then the easiest way to find out is to try it yourself. You can remove packages using <code>npm uninstall</code> if it turns out that it does not work in React Native.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="does-it-work-for-the-platforms-that-my-app-supports"></a>Does it work for the platforms that my app supports?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#does-it-work-for-the-platforms-that-my-app-supports" title="Direct link to heading">#</a></h3><p><a href="https://reactnative.directory" target="_blank" rel="noopener noreferrer">React Native Directory</a> allows you to filter by platform compatibility, such as iOS, Android, Web, and Windows. If the library you would like to use is not currently listed there, refer to the README for the library to learn more.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="does-it-work-with-my-app-version-of-react-native"></a>Does it work with my app version of React Native?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#does-it-work-with-my-app-version-of-react-native" title="Direct link to heading">#</a></h3><p>The latest version of a library is typically compatible with the latest version of React Native. If you are using an older version, you should refer to the README to know which version of the library you should install. You can install a particular version of the library by running <code>npm install &lt;library-name&gt;@&lt;version-number&gt;</code>, for example: <code>npm install @react-native-community/netinfo@^2.0.0</code>.</p></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/../docs/libraries.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-11-16T01:02:08.000Z" class="docLastUpdatedAt_1gIo">11/16/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/next/testing-overview"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Testing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/next/typescript"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Using TypeScript »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#selecting-a-package-manager" class="table-of-contents__link">Selecting a Package Manager</a></li><li><a href="#installing-a-library" class="table-of-contents__link">Installing a Library</a></li><li><a href="#linking-native-code-on-ios" class="table-of-contents__link">Linking Native Code on iOS</a></li><li><a href="#linking-native-code-on-android" class="table-of-contents__link">Linking Native Code on Android</a></li><li><a href="#finding-libraries" class="table-of-contents__link">Finding Libraries</a></li><li><a href="#determining-library-compatibility" class="table-of-contents__link">Determining Library Compatibility</a><ul><li><a href="#does-it-work-with-react-native" class="table-of-contents__link">Does it work with React Native?</a></li><li><a href="#does-it-work-for-the-platforms-that-my-app-supports" class="table-of-contents__link">Does it work for the platforms that my app supports?</a></li><li><a href="#does-it-work-with-my-app-version-of-react-native" class="table-of-contents__link">Does it work with my app version of React Native?</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who&#x27;s using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
<script src="/styles.cc2cf098.js"></script>
<script src="/runtime~main.44dce7c6.js"></script>
<script src="/main.259a8b48.js"></script>
<script src="/1.55a8a1b3.js"></script>
<script src="/2.8585ac8b.js"></script>
<script src="/1f391b9e.8301d553.js"></script>
<script src="/939.3c971b89.js"></script>
<script src="/935f2afb.4085bd98.js"></script>
<script src="/17896441.6dff1a67.js"></script>
<script src="/4ec33e7a.331df786.js"></script>
</body>
</html>