mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
51 lines
65 KiB
HTML
51 lines
65 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
|
|
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
|
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
|
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Networking · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Networking · React Native"><meta data-react-helmet="true" name="description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server."><meta data-react-helmet="true" property="og:description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/next/network"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/next/network"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.ca40cabd.css">
|
|
<link rel="preload" href="/styles.07d522c6.js" as="script">
|
|
<link rel="preload" href="/runtime~main.c8bcc9bc.js" as="script">
|
|
<link rel="preload" href="/main.f9288906.js" as="script">
|
|
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
|
|
<link rel="preload" href="/2.58cb5d3d.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.a824c215.js" as="script">
|
|
<link rel="preload" href="/943.8b024446.js" as="script">
|
|
<link rel="preload" href="/935f2afb.71a0a895.js" as="script">
|
|
<link rel="preload" href="/17896441.0c201679.js" as="script">
|
|
<link rel="preload" href="/91478e86.87a89009.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/next/getting-started">Next</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/next/network">Next</a></li><li><a class="dropdown__link" href="/docs/network">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/network">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/network">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/network">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/next/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/next/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/next/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/next/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/next/network">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/network">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/network">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/network">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/network">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-android-fragment">Integration with an Android Fragment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/symbolication">Symbolicating a stack trace</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/upgrading">Upgrading to new versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profiling">Profiling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profile-hermes">Profiling with Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/next/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/signed-apk-android">Publishing to Google Play Store</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/app-extensions">App Extensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/publishing-to-app-store">Publishing to Apple App Store</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for React Native <strong>Next</strong> version.</div><div class="margin-top--md">For up-to-date documentation, see the <strong><a href="/docs/network">latest version</a></strong> (0.63).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: Next</span></div><header><h1 class="docTitle_cWlf">Networking</h1></header><div class="markdown"><p>Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="using-fetch"></a>Using Fetch<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-fetch" title="Direct link to heading">#</a></h2><p>React Native provides the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener noreferrer">Fetch API</a> for your networking needs. Fetch will seem familiar if you have used <code>XMLHttpRequest</code> or other networking APIs before. You may refer to MDN's guide on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" target="_blank" rel="noopener noreferrer">Using Fetch</a> for additional information.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="making-requests"></a>Making requests<a aria-hidden="true" tabindex="-1" class="hash-link" href="#making-requests" title="Direct link to heading">#</a></h4><p>In order to fetch content from an arbitrary URL, you can pass the URL to fetch:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">fetch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'https://mywebsite.com/mydata.json'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">fetch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'https://mywebsite.com/endpoint/'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> method</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'POST'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> headers</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Accept</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'application/json'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Content-Type'</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'application/json'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> body</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">JSON</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">stringify</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> firstParam</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'yourValue'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> secondParam</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'yourOtherValue'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Take a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request" target="_blank" rel="noopener noreferrer">Fetch Request docs</a> for a full list of properties.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="handling-the-response"></a>Handling the response<a aria-hidden="true" tabindex="-1" class="hash-link" href="#handling-the-response" title="Direct link to heading">#</a></h4><p>The above examples show how you can make a request. In many cases, you will want to do something with the response.</p><p>Networking is an inherently asynchronous operation. Fetch methods will return a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" rel="noopener noreferrer">Promise</a> that makes it straightforward to write code that works in an asynchronous manner:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">getMoviesFromApi</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">fetch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'https://reactnative.dev/movies.json'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">then</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">response</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> response</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">json</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">then</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">json</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> json</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">movies</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">catch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">error</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">error</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>You can also use the <code>async</code> / <code>await</code> syntax in a React Native app:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">getMoviesFromApiAsync</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">let</span><span class="token plain"> response </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">await</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">fetch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'https://reactnative.dev/movies.json'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">let</span><span class="token plain"> json </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">await</span><span class="token plain"> response</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">json</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> json</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">movies</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">error</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Don't forget to catch any errors that may be thrown by <code>fetch</code>, otherwise they will be dropped silently.</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">Function Component</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Class Component</li></ul><div role="tabpanel" class="margin-vert--md"><div><div class="snack-player" data-snack-name="Fetch Example" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20useEffect%2C%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20ActivityIndicator%2C%20FlatList%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5BisLoading%2C%20setLoading%5D%20%3D%20useState(true)%3B%0A%20%20const%20%5Bdata%2C%20setData%5D%20%3D%20useState(%5B%5D)%3B%0A%0A%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20fetch('https%3A%2F%2Freactnative.dev%2Fmovies.json')%0A%20%20%20%20%20%20.then((response)%20%3D%3E%20response.json())%0A%20%20%20%20%20%20.then((json)%20%3D%3E%20setData(json.movies))%0A%20%20%20%20%20%20.catch((error)%20%3D%3E%20console.error(error))%0A%20%20%20%20%20%20.finally(()%20%3D%3E%20setLoading(false))%3B%0A%20%20%7D%2C%20%5B%5D)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20padding%3A%2024%20%7D%7D%3E%0A%20%20%20%20%20%20%7BisLoading%20%3F%20%3CActivityIndicator%2F%3E%20%3A%20(%0A%20%20%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20%20%20data%3D%7Bdata%7D%0A%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7B(%7B%20id%20%7D%2C%20index)%20%3D%3E%20id%7D%0A%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%3E%7Bitem.title%7D%2C%20%7Bitem.releaseYear%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20)%7D%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div></div></div></div><blockquote><p>By default, iOS will block any request that's not encrypted using <a href="https://hosting.review/web-hosting-glossary/#12" target="_blank" rel="noopener noreferrer">SSL</a>. If you need to fetch from a cleartext URL (one that begins with <code>http</code>) you will first need to <a href="/docs/next/integration-with-existing-apps#test-your-integration">add an App Transport Security exception</a>. If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can <a href="/docs/next/integration-with-existing-apps#app-transport-security">disable ATS completely</a>. Note however that from January 2017, <a href="https://forums.developer.apple.com/thread/48979" target="_blank" rel="noopener noreferrer">Apple's App Store review will require reasonable justification for disabling ATS</a>. See <a href="https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33" target="_blank" rel="noopener noreferrer">Apple's documentation</a> for more information.</p></blockquote><blockquote><p>On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting <a href="https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic" target="_blank" rel="noopener noreferrer"><code>android:usesCleartextTraffic</code></a> in the app manifest file.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="using-other-networking-libraries"></a>Using Other Networking Libraries<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-other-networking-libraries" title="Direct link to heading">#</a></h3><p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank" rel="noopener noreferrer">XMLHttpRequest API</a> is built into React Native. This means that you can use third party libraries such as <a href="https://github.com/niftylettuce/frisbee" target="_blank" rel="noopener noreferrer">frisbee</a> or <a href="https://github.com/mzabriskie/axios" target="_blank" rel="noopener noreferrer">axios</a> that depend on it, or you can use the XMLHttpRequest API directly if you prefer.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">var</span><span class="token plain"> request </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">XMLHttpRequest</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">request</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function-variable function" style="color:#79b6f2">onreadystatechange</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">request</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">readyState </span><span class="token operator" style="color:#fc929e">!==</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">4</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">request</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">status </span><span class="token operator" style="color:#fc929e">===</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">200</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'success'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> request</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">responseText</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">warn</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'error'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">request</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">open</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'GET'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'https://mywebsite.com/endpoint/'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">request</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">send</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><blockquote><p>The security model for XMLHttpRequest is different than on web as there is no concept of <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank" rel="noopener noreferrer">CORS</a> in native apps.</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="websocket-support"></a>WebSocket Support<a aria-hidden="true" tabindex="-1" class="hash-link" href="#websocket-support" title="Direct link to heading">#</a></h2><p>React Native also supports <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket" target="_blank" rel="noopener noreferrer">WebSockets</a>, a protocol which provides full-duplex communication channels over a single TCP connection.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">var</span><span class="token plain"> ws </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">WebSocket</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'ws://host.com/path'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">ws</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function-variable function" style="color:#79b6f2">onopen</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// connection opened</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> ws</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">send</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'something'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// send a message</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">ws</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function-variable function" style="color:#79b6f2">onmessage</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// a message was received</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">e</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">data</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">ws</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function-variable function" style="color:#79b6f2">onerror</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// an error occurred</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">e</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">message</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">ws</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function-variable function" style="color:#79b6f2">onclose</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// connection closed</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">e</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">code</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> e</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">reason</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="known-issues-with-fetch-and-cookie-based-authentication"></a>Known Issues with <code>fetch</code> and cookie based authentication<a aria-hidden="true" tabindex="-1" class="hash-link" href="#known-issues-with-fetch-and-cookie-based-authentication" title="Direct link to heading">#</a></h2><p>The following options are currently not working with <code>fetch</code></p><ul><li><code>redirect:manual</code></li><li><code>credentials:omit</code></li></ul><ul><li>Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: <a href="https://github.com/facebook/react-native/issues/18837#issuecomment-398779994" target="_blank" rel="noopener noreferrer">https://github.com/facebook/react-native/issues/18837#issuecomment-398779994</a>.</li><li>Cookie based authentication is currently unstable. You can view some of the issues raised here: <a href="https://github.com/facebook/react-native/issues/23185" target="_blank" rel="noopener noreferrer">https://github.com/facebook/react-native/issues/23185</a></li><li>As a minimum on iOS, when redirected through a <code>302</code>, if a <code>Set-Cookie</code> header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.</li></ul></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/../docs/network.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/next/hermes"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Using Hermes</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/next/security"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Security »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#using-fetch" class="table-of-contents__link">Using Fetch</a><ul><li><a href="#using-other-networking-libraries" class="table-of-contents__link">Using Other Networking Libraries</a></li></ul></li><li><a href="#websocket-support" class="table-of-contents__link">WebSocket Support</a></li><li><a href="#known-issues-with-fetch-and-cookie-based-authentication" class="table-of-contents__link">Known Issues with <code>fetch</code> and cookie based authentication</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.07d522c6.js"></script>
|
|
<script src="/runtime~main.c8bcc9bc.js"></script>
|
|
<script src="/main.f9288906.js"></script>
|
|
<script src="/1.ba9ce8bd.js"></script>
|
|
<script src="/2.58cb5d3d.js"></script>
|
|
<script src="/1f391b9e.a824c215.js"></script>
|
|
<script src="/943.8b024446.js"></script>
|
|
<script src="/935f2afb.71a0a895.js"></script>
|
|
<script src="/17896441.0c201679.js"></script>
|
|
<script src="/91478e86.87a89009.js"></script>
|
|
</body>
|
|
</html> |