mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
eff2e81bcd
Deploy website version based on 758f18eacb099c9c124773a904992acf6da82a22
479 lines
60 KiB
HTML
479 lines
60 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Linking · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<div class="banner-native-code-required">"/><meta name="docsearch:version" content="0.62"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Linking · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="<div class="banner-native-code-required">"/><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 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.62</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/docs/components-and-apis" target="_self">Components</a></li><li class="siteNavGroupActive"><a href="/docs/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>APIs</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><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/accessibilityinfo">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/docs/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/appearance">Appearance</a></li><li class="navListItem"><a class="navItem" href="/docs/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/docs/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/devsettings">DevSettings</a></li><li class="navListItem"><a class="navItem" href="/docs/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/docs/layoutanimation">LayoutAnimation</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/docs/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/share">Share</a></li><li class="navListItem"><a class="navItem" href="/docs/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/docs/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/vibration">Vibration</a></li><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Hooks</h4><ul><li class="navListItem"><a class="navItem" href="/docs/usecolorscheme">useColorScheme</a></li><li class="navListItem"><a class="navItem" href="/docs/usewindowdimensions">useWindowDimensions</a></li></ul></div><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Android APIs</h4><ul><li class="navListItem"><a class="navItem" href="/docs/backhandler">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/docs/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/toastandroid">ToastAndroid</a></li></ul></div><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">iOS APIs</h4><ul><li class="navListItem"><a class="navItem" href="/docs/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/settings">Settings</a></li></ul></div></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.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Linking</h1></header><article><div><span><div class="banner-native-code-required">
|
||
<h3>Projects with Native Code Only</h3>
|
||
<p>
|
||
The following section only applies to projects with native code exposed. If you are using the managed <code>expo-cli</code> workflow, see the guide on <a href="http://docs.expo.io/versions/latest/workflow/linking/">Linking</a> in the Expo documentation for the appropriate alternative.
|
||
</p>
|
||
</div>
|
||
<p><code>Linking</code> gives you a general interface to interact with both incoming and outgoing app links.</p>
|
||
<p>Every Link (URL) has a URL Scheme, some websites are prefixed with <code>https://</code> or <code>http://</code> and the <code>http</code> is the URL Scheme. Let's call it scheme for short.</p>
|
||
<p>In addition to <code>https</code>, you're likely also familiar with the <code>mailto</code> scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about <a href="#built-in-url-schemes">built-in URL</a> schemes below.</p>
|
||
<p>Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a <strong>Magic Link</strong> email from Slack, the <strong>Launch Slack</strong> button is an anchor tag with an href that looks something like: <code>slack://secret/magic-login/other-secret</code>. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to <a href="#get-the-deep-link">get the deep link</a> into your app.</p>
|
||
<p>Custom URL scheme isn't the only way to open your application on mobile. You don't want to use a custom URL scheme in links in the email because then the links would be broken on desktop. Instead, you want to use a regular <code>https</code> links such as <code>https://www.myapp.io/records/1234546</code>. and on mobile you want that link open your app. Android calls it <strong>Deep Links</strong> (Universal Links - iOS).</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="built-in-url-schemes"></a><a href="#built-in-url-schemes" 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>Built-in URL Schemes</h3>
|
||
<p>As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Scheme</th><th>Description</th><th>iOS</th><th>Android</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>mailto</code></td><td>Open mail app, eg: mailto: <a href="mailto:support@expo.io">support@expo.io</a></td><td>✅</td><td>✅</td></tr>
|
||
<tr><td><code>tel</code></td><td>Open phone app, eg: tel:+123456789</td><td>✅</td><td>✅</td></tr>
|
||
<tr><td><code>sms</code></td><td>Open SMS app, eg: sms:+123456789</td><td>✅</td><td>✅</td></tr>
|
||
<tr><td><code>https</code> / <code>http</code></td><td>Open web browser app, eg: <a href="https://expo.io">https://expo.io</a></td><td>✅</td><td>✅</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<h3><a class="anchor" aria-hidden="true" id="enabling-deep-links"></a><a href="#enabling-deep-links" 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>Enabling Deep Links</h3>
|
||
<p>If you want to enable deep links in your app, please the below guide:</p>
|
||
<div class="toggler">
|
||
<ul role="tablist" class="toggle-syntax">
|
||
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
||
Android
|
||
</li>
|
||
<li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
|
||
iOS
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p><block class="functional syntax" /></p>
|
||
<blockquote>
|
||
<p>For instructions on how to add support for deep linking on Android, refer to <a href="http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters">Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links</a>.</p>
|
||
</blockquote>
|
||
<p>If you wish to receive the intent in an existing instance of MainActivity, you may set the <code>launchMode</code> of MainActivity to <code>singleTask</code> in <code>AndroidManifest.xml</code>. See <a href="http://developer.android.com/guide/topics/manifest/activity-element.html"><code><activity></code></a> documentation for more information.</p>
|
||
<pre><code class="hljs css language-xml"><span class="hljs-tag"><<span class="hljs-name">activity</span>
|
||
<span class="hljs-attr">android:name</span>=<span class="hljs-string">".MainActivity"</span>
|
||
<span class="hljs-attr">android:launchMode</span>=<span class="hljs-string">"singleTask"</span>></span>
|
||
</code></pre>
|
||
<p><block class="classical syntax" /></p>
|
||
<blockquote>
|
||
<p><strong>NOTE:</strong> On iOS, you'll need to link <code>RCTLinking</code> to your project by following the steps described <a href="/docs/linking-libraries-ios#manual-linking">here</a>. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your <code>*AppDelegate.m</code>:</p>
|
||
</blockquote>
|
||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// iOS 9.x or newer</span>
|
||
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTLinkingManager.h></span></span>
|
||
|
||
- (<span class="hljs-built_in">BOOL</span>)application:(<span class="hljs-built_in">UIApplication</span> *)application
|
||
openURL:(<span class="hljs-built_in">NSURL</span> *)url
|
||
options:(<span class="hljs-built_in">NSDictionary</span><<span class="hljs-built_in">UIApplicationOpenURLOptionsKey</span>,<span class="hljs-keyword">id</span>> *)options
|
||
{
|
||
<span class="hljs-keyword">return</span> [RCTLinkingManager application:application openURL:url options:options];
|
||
}
|
||
</code></pre>
|
||
<p>If you're targeting iOS 8.x or older, you can use the following code instead:</p>
|
||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// iOS 8.x or older</span>
|
||
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTLinkingManager.h></span></span>
|
||
|
||
- (<span class="hljs-built_in">BOOL</span>)application:(<span class="hljs-built_in">UIApplication</span> *)application openURL:(<span class="hljs-built_in">NSURL</span> *)url
|
||
sourceApplication:(<span class="hljs-built_in">NSString</span> *)sourceApplication annotation:(<span class="hljs-keyword">id</span>)annotation
|
||
{
|
||
<span class="hljs-keyword">return</span> [RCTLinkingManager application:application openURL:url
|
||
sourceApplication:sourceApplication annotation:annotation];
|
||
}
|
||
</code></pre>
|
||
<p>If your app is using <a href="https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html">Universal Links</a>, you'll need to add the following code as well:</p>
|
||
<pre><code class="hljs css language-objectivec">- (<span class="hljs-built_in">BOOL</span>)application:(<span class="hljs-built_in">UIApplication</span> *)application continueUserActivity:(<span class="hljs-keyword">nonnull</span> <span class="hljs-built_in">NSUserActivity</span> *)userActivity
|
||
restorationHandler:(<span class="hljs-keyword">nonnull</span> <span class="hljs-keyword">void</span> (^)(<span class="hljs-built_in">NSArray</span><<span class="hljs-keyword">id</span><<span class="hljs-built_in">UIUserActivityRestoring</span>>> * _Nullable))restorationHandler
|
||
{
|
||
<span class="hljs-keyword">return</span> [RCTLinkingManager application:application
|
||
continueUserActivity:userActivity
|
||
restorationHandler:restorationHandler];
|
||
}
|
||
</code></pre>
|
||
<p><block class="endBlock syntax" /></p>
|
||
<h3><a class="anchor" aria-hidden="true" id="handling-deep-links"></a><a href="#handling-deep-links" 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>Handling Deep Links</h3>
|
||
<p>There are two ways to handle URLs that open your app.</p>
|
||
<h4><a class="anchor" aria-hidden="true" id="1-if-the-app-is-already-open-the-app-is-foregrounded-and-a-linking-event-is-fired"></a><a href="#1-if-the-app-is-already-open-the-app-is-foregrounded-and-a-linking-event-is-fired" 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>1. If the app is already open, the app is foregrounded and a Linking event is fired</h4>
|
||
<p>You can handle these events with <code>Linking.addEventListener(url, callback)</code>.</p>
|
||
<h4><a class="anchor" aria-hidden="true" id="2-if-the-app-is-not-already-open-it-is-opened-and-the-url-is-passed-in-as-the-initialurl"></a><a href="#2-if-the-app-is-not-already-open-it-is-opened-and-the-url-is-passed-in-as-the-initialurl" 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>2. If the app is not already open, it is opened and the url is passed in as the initialURL</h4>
|
||
<p>You can handle these events with <code>Linking.getInitialURL(url)</code> -- it returns a Promise that resolves to the url, if there is one.</p>
|
||
<hr>
|
||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" 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>Example</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="open-links-and-deep-links-universal-links"></a><a href="#open-links-and-deep-links-universal-links" 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>Open Links and Deep Links (Universal Links)</h3>
|
||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useCallback } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||
<span class="hljs-keyword">import</span> { Alert, Button, Linking, StyleSheet, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||
|
||
<span class="hljs-keyword">const</span> supportedURL = <span class="hljs-string">"https://google.com"</span>;
|
||
|
||
<span class="hljs-keyword">const</span> unsupportedURL = <span class="hljs-string">"slack://open?team=123456"</span>;
|
||
|
||
<span class="hljs-keyword">const</span> OpenURLButton = <span class="hljs-function">(<span class="hljs-params">{ url, children }</span>) =></span> {
|
||
<span class="hljs-keyword">const</span> handlePress = useCallback(<span class="hljs-keyword">async</span> () => {
|
||
<span class="hljs-comment">// Checking if the link is supported for links with custom URL scheme.</span>
|
||
<span class="hljs-keyword">const</span> supported = <span class="hljs-keyword">await</span> Linking.canOpenURL(url);
|
||
|
||
<span class="hljs-keyword">if</span> (supported) {
|
||
<span class="hljs-comment">// Opening the link with some app, if the URL scheme is "http" the web link should be opened</span>
|
||
<span class="hljs-comment">// by some browser in the mobile</span>
|
||
<span class="hljs-keyword">await</span> Linking.openURL(url);
|
||
} <span class="hljs-keyword">else</span> {
|
||
Alert.alert(<span class="hljs-string">`Don't know how to open this URL: <span class="hljs-subst">${url}</span>`</span>);
|
||
}
|
||
}, [url]);
|
||
|
||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">title</span>=<span class="hljs-string">{children}</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{handlePress}</span> /></span>;
|
||
};
|
||
|
||
const App = () => {
|
||
return (
|
||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">OpenURLButton</span> <span class="hljs-attr">url</span>=<span class="hljs-string">{supportedURL}</span>></span>Open Supported URL<span class="hljs-tag"></<span class="hljs-name">OpenURLButton</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">OpenURLButton</span> <span class="hljs-attr">url</span>=<span class="hljs-string">{unsupportedURL}</span>></span>Open Unsupported URL<span class="hljs-tag"></<span class="hljs-name">OpenURLButton</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||
);
|
||
};
|
||
|
||
export default App;
|
||
|
||
const styles = StyleSheet.create({
|
||
container: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||
});
|
||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||
data-snack-name="Linking Function Component Example"
|
||
data-snack-description="Example usage"
|
||
data-snack-code="import%20React%2C%20%7B%20useCallback%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Alert%2C%20Button%2C%20Linking%2C%20StyleSheet%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20supportedURL%20%3D%20%22https%3A%2F%2Fgoogle.com%22%3B%0A%0Aconst%20unsupportedURL%20%3D%20%22slack%3A%2F%2Fopen%3Fteam%3D123456%22%3B%0A%0Aconst%20OpenURLButton%20%3D%20(%7B%20url%2C%20children%20%7D)%20%3D%3E%20%7B%0A%20%20const%20handlePress%20%3D%20useCallback(async%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Checking%20if%20the%20link%20is%20supported%20for%20links%20with%20custom%20URL%20scheme.%0A%20%20%20%20const%20supported%20%3D%20await%20Linking.canOpenURL(url)%3B%0A%0A%20%20%20%20if%20(supported)%20%7B%0A%20%20%20%20%20%20%2F%2F%20Opening%20the%20link%20with%20some%20app%2C%20if%20the%20URL%20scheme%20is%20%22http%22%20the%20web%20link%20should%20be%20opened%0A%20%20%20%20%20%20%2F%2F%20by%20some%20browser%20in%20the%20mobile%0A%20%20%20%20%20%20await%20Linking.openURL(url)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20Alert.alert(%60Don't%20know%20how%20to%20open%20this%20URL%3A%20%24%7Burl%7D%60)%3B%0A%20%20%20%20%7D%0A%20%20%7D%2C%20%5Burl%5D)%3B%0A%0A%20%20return%20%3CButton%20title%3D%7Bchildren%7D%20onPress%3D%7BhandlePress%7D%20%2F%3E%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3COpenURLButton%20url%3D%7BsupportedURL%7D%3EOpen%20Supported%20URL%3C%2FOpenURLButton%3E%0A%20%20%20%20%20%20%3COpenURLButton%20url%3D%7BunsupportedURL%7D%3EOpen%20Unsupported%20URL%3C%2FOpenURLButton%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%7D)%3B%0A"
|
||
data-snack-platform="web"
|
||
data-snack-supported-platforms=ios,android
|
||
data-snack-preview="true"
|
||
style="
|
||
overflow: hidden;
|
||
background: #fafafa;
|
||
border: 1px solid rgba(0,0,0,.16);
|
||
border-radius: 4px;
|
||
height: 514px;
|
||
width: 100%;
|
||
"
|
||
></div></div></div><h3><a class="anchor" aria-hidden="true" id="open-custom-settings"></a><a href="#open-custom-settings" 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>Open Custom Settings</h3>
|
||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useCallback } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||
<span class="hljs-keyword">import</span> { Button, Linking, StyleSheet, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||
|
||
<span class="hljs-keyword">const</span> OpenSettingsButton = <span class="hljs-function">(<span class="hljs-params">{ children }</span>) =></span> {
|
||
<span class="hljs-keyword">const</span> handlePress = useCallback(<span class="hljs-keyword">async</span> () => {
|
||
<span class="hljs-comment">// Open the custom settings if the app has one</span>
|
||
<span class="hljs-keyword">await</span> Linking.openSettings();
|
||
}, []);
|
||
|
||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">title</span>=<span class="hljs-string">{children}</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{handlePress}</span> /></span>;
|
||
};
|
||
|
||
const App = () => {
|
||
return (
|
||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">OpenSettingsButton</span>></span>Open Settings<span class="hljs-tag"></<span class="hljs-name">OpenSettingsButton</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||
);
|
||
};
|
||
|
||
export default App;
|
||
|
||
const styles = StyleSheet.create({
|
||
container: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||
});
|
||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||
data-snack-name="Linking Function Component Example"
|
||
data-snack-description="Example usage"
|
||
data-snack-code="import%20React%2C%20%7B%20useCallback%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Linking%2C%20StyleSheet%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20OpenSettingsButton%20%3D%20(%7B%20children%20%7D)%20%3D%3E%20%7B%0A%20%20const%20handlePress%20%3D%20useCallback(async%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Open%20the%20custom%20settings%20if%20the%20app%20has%20one%0A%20%20%20%20await%20Linking.openSettings()%3B%0A%20%20%7D%2C%20%5B%5D)%3B%0A%0A%20%20return%20%3CButton%20title%3D%7Bchildren%7D%20onPress%3D%7BhandlePress%7D%20%2F%3E%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3COpenSettingsButton%3EOpen%20Settings%3C%2FOpenSettingsButton%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%7D)%3B%0A"
|
||
data-snack-platform="web"
|
||
data-snack-supported-platforms=ios,android
|
||
data-snack-preview="true"
|
||
style="
|
||
overflow: hidden;
|
||
background: #fafafa;
|
||
border: 1px solid rgba(0,0,0,.16);
|
||
border-radius: 4px;
|
||
height: 514px;
|
||
width: 100%;
|
||
"
|
||
></div></div></div><h3><a class="anchor" aria-hidden="true" id="get-the-deep-link"></a><a href="#get-the-deep-link" 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>Get the Deep Link</h3>
|
||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState, useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||
<span class="hljs-keyword">import</span> { Linking, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||
|
||
<span class="hljs-keyword">const</span> useMount = <span class="hljs-function"><span class="hljs-params">func</span> =></span> useEffect(<span class="hljs-function"><span class="hljs-params">()</span> =></span> func(), []);
|
||
|
||
<span class="hljs-keyword">const</span> useInitialURL = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||
<span class="hljs-keyword">const</span> [url, setUrl] = useState(<span class="hljs-literal">null</span>);
|
||
<span class="hljs-keyword">const</span> [processing, setProcessing] = useState(<span class="hljs-literal">true</span>);
|
||
|
||
useMount(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||
<span class="hljs-keyword">const</span> getUrlAsync = <span class="hljs-keyword">async</span> () => {
|
||
<span class="hljs-comment">// Get the deep link used to open the app</span>
|
||
<span class="hljs-keyword">const</span> initialUrl = <span class="hljs-keyword">await</span> Linking.getInitialURL();
|
||
|
||
<span class="hljs-comment">// The setTimeout is just for testing purpose</span>
|
||
setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||
setUrl(initialUrl);
|
||
setProcessing(<span class="hljs-literal">false</span>);
|
||
}, <span class="hljs-number">1000</span>);
|
||
};
|
||
|
||
getUrlAsync();
|
||
});
|
||
|
||
<span class="hljs-keyword">return</span> { url, processing };
|
||
};
|
||
|
||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||
<span class="hljs-keyword">const</span> { <span class="hljs-attr">url</span>: initialUrl, processing } = useInitialURL();
|
||
|
||
<span class="hljs-keyword">return</span> (
|
||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>
|
||
{processing
|
||
? `Processing the initial url from a deep link`
|
||
: `The deep link is: ${initialUrl || "None"}`}
|
||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||
);
|
||
};
|
||
|
||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
|
||
|
||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||
<span class="hljs-attr">container</span>: { <span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>, <span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span> },
|
||
});
|
||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||
data-snack-name="Linking Function Component Example"
|
||
data-snack-description="Example usage"
|
||
data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Linking%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20useMount%20%3D%20func%20%3D%3E%20useEffect(()%20%3D%3E%20func()%2C%20%5B%5D)%3B%0A%0Aconst%20useInitialURL%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Burl%2C%20setUrl%5D%20%3D%20useState(null)%3B%0A%20%20const%20%5Bprocessing%2C%20setProcessing%5D%20%3D%20useState(true)%3B%0A%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20const%20getUrlAsync%20%3D%20async%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%2F%2F%20Get%20the%20deep%20link%20used%20to%20open%20the%20app%0A%20%20%20%20%20%20const%20initialUrl%20%3D%20await%20Linking.getInitialURL()%3B%0A%0A%20%20%20%20%20%20%2F%2F%20The%20setTimeout%20is%20just%20for%20testing%20purpose%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20setUrl(initialUrl)%3B%0A%20%20%20%20%20%20%20%20setProcessing(false)%3B%0A%20%20%20%20%20%20%7D%2C%201000)%3B%0A%20%20%20%20%7D%3B%0A%0A%20%20%20%20getUrlAsync()%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20%7B%20url%2C%20processing%20%7D%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%7B%20url%3A%20initialUrl%2C%20processing%20%7D%20%3D%20useInitialURL()%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20%7Bprocessing%0A%20%20%20%20%20%20%20%20%20%20%3F%20%60Processing%20the%20initial%20url%20from%20a%20deep%20link%60%0A%20%20%20%20%20%20%20%20%20%20%3A%20%60The%20deep%20link%20is%3A%20%24%7BinitialUrl%20%7C%7C%20%22None%22%7D%60%7D%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%7D)%3B%0A"
|
||
data-snack-platform="web"
|
||
data-snack-supported-platforms=ios,android
|
||
data-snack-preview="true"
|
||
style="
|
||
overflow: hidden;
|
||
background: #fafafa;
|
||
border: 1px solid rgba(0,0,0,.16);
|
||
border-radius: 4px;
|
||
height: 514px;
|
||
width: 100%;
|
||
"
|
||
></div></div></div><h3><a class="anchor" aria-hidden="true" id="send-intents-android"></a><a href="#send-intents-android" 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>Send Intents (Android)</h3>
|
||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useCallback } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||
<span class="hljs-keyword">import</span> { Alert, Button, Linking, StyleSheet, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||
|
||
<span class="hljs-keyword">const</span> SendIntentButton = <span class="hljs-function">(<span class="hljs-params">{ action, extras, children }</span>) =></span> {
|
||
<span class="hljs-keyword">const</span> handlePress = useCallback(<span class="hljs-keyword">async</span> () => {
|
||
<span class="hljs-keyword">try</span> {
|
||
<span class="hljs-keyword">await</span> Linking.sendIntent(action, extras);
|
||
} <span class="hljs-keyword">catch</span> (e) {
|
||
Alert.alert(e.message);
|
||
}
|
||
}, [action, extras]);
|
||
|
||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">title</span>=<span class="hljs-string">{children}</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{handlePress}</span> /></span>;
|
||
};
|
||
|
||
const App = () => {
|
||
return (
|
||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">SendIntentButton</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"android.intent.action.POWER_USAGE_SUMMARY"</span>></span>
|
||
Power Usage Summary
|
||
<span class="hljs-tag"></<span class="hljs-name">SendIntentButton</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">SendIntentButton</span>
|
||
<span class="hljs-attr">action</span>=<span class="hljs-string">"android.settings.APP_NOTIFICATION_SETTINGS"</span>
|
||
<span class="hljs-attr">extras</span>=<span class="hljs-string">{[</span>
|
||
{ "<span class="hljs-attr">android.provider.extra.APP_PACKAGE</span>"<span class="hljs-attr">:</span> "<span class="hljs-attr">com.facebook.katana</span>" },
|
||
]}
|
||
></span>
|
||
App Notification Settings
|
||
<span class="hljs-tag"></<span class="hljs-name">SendIntentButton</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||
);
|
||
};
|
||
|
||
export default App;
|
||
|
||
const styles = StyleSheet.create({
|
||
container: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||
});
|
||
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||
data-snack-name="Linking Function Component Example"
|
||
data-snack-description="Example usage"
|
||
data-snack-code="import%20React%2C%20%7B%20useCallback%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Alert%2C%20Button%2C%20Linking%2C%20StyleSheet%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20SendIntentButton%20%3D%20(%7B%20action%2C%20extras%2C%20children%20%7D)%20%3D%3E%20%7B%0A%20%20const%20handlePress%20%3D%20useCallback(async%20()%20%3D%3E%20%7B%0A%20%20%20%20try%20%7B%0A%20%20%20%20%20%20await%20Linking.sendIntent(action%2C%20extras)%3B%0A%20%20%20%20%7D%20catch%20(e)%20%7B%0A%20%20%20%20%20%20Alert.alert(e.message)%3B%0A%20%20%20%20%7D%0A%20%20%7D%2C%20%5Baction%2C%20extras%5D)%3B%0A%0A%20%20return%20%3CButton%20title%3D%7Bchildren%7D%20onPress%3D%7BhandlePress%7D%20%2F%3E%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CSendIntentButton%20action%3D%22android.intent.action.POWER_USAGE_SUMMARY%22%3E%0A%20%20%20%20%20%20%20%20Power%20Usage%20Summary%0A%20%20%20%20%20%20%3C%2FSendIntentButton%3E%0A%20%20%20%20%20%20%3CSendIntentButton%0A%20%20%20%20%20%20%20%20action%3D%22android.settings.APP_NOTIFICATION_SETTINGS%22%0A%20%20%20%20%20%20%20%20extras%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20%22android.provider.extra.APP_PACKAGE%22%3A%20%22com.facebook.katana%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20App%20Notification%20Settings%0A%20%20%20%20%20%20%3C%2FSendIntentButton%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%7D)%3B%0A"
|
||
data-snack-platform="web"
|
||
data-snack-supported-platforms=android
|
||
data-snack-preview="true"
|
||
style="
|
||
overflow: hidden;
|
||
background: #fafafa;
|
||
border: 1px solid rgba(0,0,0,.16);
|
||
border-radius: 4px;
|
||
height: 514px;
|
||
width: 100%;
|
||
"
|
||
></div></div></div><h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||
<h3><a class="anchor" aria-hidden="true" id="constructor"></a><a href="#constructor" 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><code>constructor()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" 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><code>addEventListener()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">addEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>Add a handler to Linking changes by listening to the <code>url</code> event type and providing the handler.</p>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" 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><code>removeEventListener()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>Remove a handler by passing the <code>url</code> event type and the handler.</p>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="openurl"></a><a href="#openurl" 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><code>openURL()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">openURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>Try to open the given <code>url</code> with any of the installed apps.</p>
|
||
<p>You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "<a href="http://maps.apple.com/?ll=37.484847,-122.148386">http://maps.apple.com/?ll=37.484847,-122.148386</a>" on iOS), a contact, or any other URL that can be opened with the installed apps.</p>
|
||
<p>The method returns a <code>Promise</code> object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>url</td><td>string</td><td>Yes</td><td>The URL to open.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<blockquote>
|
||
<p>This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>For web URLs, the protocol ("http://", "https://") must be set accordingly!</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>This method may behave differently in a simulator e.g. "tel:" links are not able to be handled in the iOS simulator as there's no access to the dialer app.</p>
|
||
</blockquote>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="canopenurl"></a><a href="#canopenurl" 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><code>canOpenURL()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">canOpenURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>Determine whether or not an installed app can handle a given URL.</p>
|
||
<p>The method returns a <code>Promise</code> object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.</p>
|
||
<p>The <code>Promise</code> will reject on Android if it was impossible to check if the URL can be opened, and on iOS if you didn't add the specific scheme in the <code>LSApplicationQueriesSchemes</code> key inside <code>Info.plist</code> (see bellow).</p>
|
||
<p><strong>Parameters:</strong></p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>url</td><td>string</td><td>Yes</td><td>The URL to open.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<blockquote>
|
||
<p>For web URLs, the protocol ("http://", "https://") must be set accordingly!</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>As of iOS 9, your app needs to provide the <code>LSApplicationQueriesSchemes</code> key inside <code>Info.plist</code> or canOpenURL will always return false.</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>This method has limitations on iOS 9+. From <a href="https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl">the official Apple documentation</a>:</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always return false. If the user reinstalls or upgrades the app, iOS resets the limit.</p>
|
||
</blockquote>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="opensettings"></a><a href="#opensettings" 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><code>openSettings()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">openSettings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>Open the Settings app and displays the app’s custom settings, if it has any.</p>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="getinitialurl"></a><a href="#getinitialurl" 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><code>getInitialURL()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">getInitialURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>If the app launch was triggered by an app link, it will give the link url, otherwise it will give <code>null</code>.</p>
|
||
<blockquote>
|
||
<p>To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></p>
|
||
</blockquote>
|
||
<hr>
|
||
<h3><a class="anchor" aria-hidden="true" id="sendintent"></a><a href="#sendintent" 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><code>sendIntent()</code></h3>
|
||
<pre><code class="hljs css language-jsx"><span class="token function">sendIntent</span><span class="token punctuation">(</span>action<span class="token punctuation">:</span> string<span class="token punctuation">,</span> extras<span class="token operator">?</span><span class="token punctuation">:</span> Array<span class="token operator"><</span><span class="token punctuation">{</span>key<span class="token punctuation">:</span> string<span class="token punctuation">,</span> value<span class="token punctuation">:</span> string <span class="token operator">|</span> number <span class="token operator">|</span> boolean<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">)</span>
|
||
</code></pre>
|
||
<blockquote>
|
||
<p>@platform android</p>
|
||
</blockquote>
|
||
<p><strong>Android-Only.</strong> Launch an Android intent with extras (optional)</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/docs/panresponder"><span class="function-name-prevnext">PanResponder</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a><ul class="toc-headings"><li><a href="#open-links-and-deep-links-universal-links">Open Links and Deep Links (Universal Links)</a></li><li><a href="#open-custom-settings">Open Custom Settings</a></li><li><a href="#get-the-deep-link">Get the Deep Link</a></li><li><a href="#send-intents-android">Send Intents (Android)</a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#constructor"><code>constructor()</code></a></li><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#openurl"><code>openURL()</code></a></li><li><a href="#canopenurl"><code>canOpenURL()</code></a></li><li><a href="#opensettings"><code>openSettings()</code></a></li><li><a href="#getinitialurl"><code>getInitialURL()</code></a></li><li><a href="#sendintent"><code>sendIntent()</code></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.62"],"hitsPerPage":5}
|
||
});
|
||
</script></body></html> |