forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
125 lines (116 loc) · 30.9 KB
/
index.html
File metadata and controls
125 lines (116 loc) · 30.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Linking Libraries · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Linking Libraries · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them."/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script type="text/javascript" src="/js/announcement.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.24</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/0.24/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/0.24/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/0.24/accessibilityinfo" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Guides (iOS)</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">The Basics<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.24/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.24/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/native-modules-setup">Native Modules Setup</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (iOS)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.24/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/native-components-ios">Native UI Components</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/0.24/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/app-extensions">App Extensions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (Android)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.24/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Components<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.24/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/navigator">Navigator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/webview">WebView</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">APIs<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.24/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.24/view-style-props">View Style Props</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/linking-libraries-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Linking Libraries</h1></header><article><div><span><p>Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them.</p>
<p>With that in mind we exposed many of these features as independent static libraries.</p>
<p>For most of the libs it will be as quick as dragging two files, sometimes a third step will be necessary, but no more than that.</p>
<p><em>All the libraries we ship with React Native live on the <code>Libraries</code> folder in the root of the repository. Some of them are pure JavaScript, and you only need to <code>require</code> it. Other libraries also rely on some native code, in that case you'll have to add these files to your app, otherwise the app will throw an error as soon as you try to use the library.</em></p>
<h2><a class="anchor" aria-hidden="true" id="here-are-the-few-steps-to-link-your-libraries-that-contain-native-code"></a><a href="#here-are-the-few-steps-to-link-your-libraries-that-contain-native-code" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Here are the few steps to link your libraries that contain native code</h2>
<h3><a class="anchor" aria-hidden="true" id="automatic-linking"></a><a href="#automatic-linking" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Automatic linking</h3>
<h4><a class="anchor" aria-hidden="true" id="step-1"></a><a href="#step-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 1</h4>
<p>Install a library with native dependencies:</p>
<pre><code class="hljs css language-bash">$ npm install <library-with-native-dependencies> --save
</code></pre>
<blockquote>
<p><strong><em>Note:</em></strong> <code>--save</code> or <code>--save-dev</code> flag is very important for this step. React Native will link your libs based on <code>dependencies</code> and <code>devDependencies</code> in your <code>package.json</code> file.</p>
</blockquote>
<h4><a class="anchor" aria-hidden="true" id="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 2</h4>
<p>Link your native dependencies:</p>
<pre><code class="hljs css language-bash">$ react-native link
</code></pre>
<p>Done! All libraries with native dependencies should be successfully linked to your iOS/Android project.</p>
<blockquote>
<p><strong><em>Note:</em></strong> If your iOS project is using CocoaPods (contains <code>Podfile</code>) and linked library has <code>podspec</code> file, then <code>react-native link</code> will link library using Podfile. To support non-trivial Podfiles add <code># Add new pods below this line</code> comment to places where you expect pods to be added.</p>
</blockquote>
<h3><a class="anchor" aria-hidden="true" id="manual-linking"></a><a href="#manual-linking" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual linking</h3>
<h4><a class="anchor" aria-hidden="true" id="step-1-1"></a><a href="#step-1-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 1</h4>
<p>If the library has native code, there must be an <code>.xcodeproj</code> file inside its folder. Drag this file to your project on Xcode (usually under the <code>Libraries</code> group on Xcode);</p>
<p><img src="/docs/assets/AddToLibraries.png" alt=""></p>
<h4><a class="anchor" aria-hidden="true" id="step-2-1"></a><a href="#step-2-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 2</h4>
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>) select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder inside the Library you are importing to <code>Link Binary With Libraries</code></p>
<p><img src="/docs/assets/AddToBuildPhases.png" alt=""></p>
<h4><a class="anchor" aria-hidden="true" id="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Step 3</h4>
<p>Not every library will need this step, what you need to consider is:</p>
<p><em>Do I need to know the contents of the library at compile time?</em></p>
<p>What that means is, are you using this library on the native side or only in JavaScript? If you are only using it in JavaScript, you are good to go!</p>
<p>If you do need to call it from native, then we need to know the library's headers. To achieve that you have to go to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library. (This documentation used to recommend using <code>recursive</code>, but this is no longer recommended, as it can cause subtle build failures, especially with CocoaPods.)</p>
<p><img src="/docs/assets/AddToSearchPaths.png" alt=""></p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.24/native-components-ios"><span class="arrow-prev">← </span><span>Native UI Components</span></a><a class="docs-next button" href="/docs/0.24/running-on-simulator-ios"><span>Running On Simulator</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#here-are-the-few-steps-to-link-your-libraries-that-contain-native-code">Here are the few steps to link your libraries that contain native code</a><ul class="toc-headings"><li><a href="#automatic-linking">Automatic linking</a></li><li><a href="#manual-linking">Manual linking</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.24"],"hitsPerPage":5}
});
</script></body></html>