https://reactnative.dev/assets/js/adb13f41.416bd56c.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["11250"],{95372(e,n,t){t.r(n),t.d(n,{metadata:()=>a,default:()=>f,frontMatter:()=>c,contentTitle:()=>d,toc:()=>h,assets:()=>u});var a=JSON.parse('{"id":"network","title":"Networking","description":"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.","source":"@site/versioned_docs/version-0.78/network.md","sourceDirName":".","slug":"/network","permalink":"/docs/0.78/network","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/network.md\\"},{\\"label\\":\\"Edit page for 0.78 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.78/network.md\\"}]","tags":[],"version":"0.78","lastUpdatedAt":1779786097000,"frontMatter":{"id":"network","title":"Networking"},"sidebar":"docs","previous":{"title":"Gesture Responder System","permalink":"/docs/0.78/gesture-responder-system"},"next":{"title":"Security","permalink":"/docs/0.78/security"}}'),s=t(62540),r=t(43023),i=t(77779),o=t(98263),l=t(38469);let c={id:"network",title:"Networking"},d,u={},h=[{value:"Using Fetch",id:"using-fetch",level:2},{value:"Making requests",id:"making-requests",level:3},{value:"Handling the response",id:"handling-the-response",level:3},{value:"Using Other Networking Libraries",id:"using-other-networking-libraries",level:2},{value:"WebSocket Support",id:"websocket-support",level:2},{value:"Known Issues with <code>fetch</code> and cookie based authentication",id:"known-issues-with-fetch-and-cookie-based-authentication",level:2},{value:"Configuring NSURLSession on iOS",id:"configuring-nsurlsession-on-ios",level:2}];function p(e){let n={a:"a",blockquote:"blockquote",code:"code",div:"div",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"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."}),"\n",(0,s.jsx)(n.h2,{id:"using-fetch",children:"Using Fetch"}),"\n",(0,s.jsxs)(n.p,{children:["React Native provides the ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",children:"Fetch API"})," for your networking needs. Fetch will seem familiar if you have used ",(0,s.jsx)(n.code,{children:"XMLHttpRequest"})," or other networking APIs before. You may refer to MDN's guide on ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch",children:"Using Fetch"})," for additional information."]}),"\n",(0,s.jsx)(n.h3,{id:"making-requests",children:"Making requests"}),"\n",(0,s.jsx)(n.p,{children:"In order to fetch content from an arbitrary URL, you can pass the URL to fetch:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="TypeScript"',children:"fetch('https://mywebsite.com/mydata.json');\n"})}),"\n",(0,s.jsx)(n.p,{children:"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:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="TypeScript"',children:"fetch('https://mywebsite.com/endpoint/', {\n  method: 'POST',\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json',\n  },\n  body: JSON.stringify({\n    firstParam: 'yourValue',\n    secondParam: 'yourOtherValue',\n  }),\n});\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Take a look at the ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Request",children:"Fetch Request docs"})," for a full list of properties."]}),"\n",(0,s.jsx)(n.h3,{id:"handling-the-response",children:"Handling the response"}),"\n",(0,s.jsx)(n.p,{children:"The above examples show how you can make a request. In many cases, you will want to do something with the response."}),"\n",(0,s.jsxs)(n.p,{children:["Networking is an inherently asynchronous operation. Fetch method will return a ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise",children:"Promise"})," that makes it straightforward to write code that works in an asynchronous manner:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="TypeScript"',children:"const getMoviesFromApi = () => {\n  return fetch('https://reactnative.dev/movies.json')\n    .then(response => response.json())\n    .then(json =>

1 {\n      return json.movies;\n    })\n    .catch(error => {\n      console.error(error);\n    });\n};\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You can also use the ",(0,s.jsx)(n.code,{children:"async"})," / ",(0,s.jsx)(n.code,{children:"await"})," syntax in a React Native app:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="TypeScript"',children:"const getMoviesFromApiAsync = async () => {\n  try {\n    const response = await fetch(\n      'https://reactnative.dev/movies.json',\n    );\n    const json = await response.json();\n    return json.movies;\n  } catch (error) {\n    console.error(error);\n  }\n};\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Don't forget to catch any errors that may be thrown by ",(0,s.jsx)(n.code,{children:"fetch"}),", otherwise they will be dropped silently."]}),"\n",(0,s.jsxs)(i.A,{groupId:"language",queryString:!0,defaultValue:l.A.defaultSnackLanguage,values:l.A.snackLanguages,children:[(0,s.jsx)(o.A,{value:"javascript",children:(0,s.jsx)(n.div,{className:"snack-player","data-snack-name":"Fetch Example","data-snack-description":"Example usage","data-snack-files":"%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseEffect%2C%20useState%7D%20from%20'react'%3B%5Cnimport%20%7BActivityIndicator%2C%20FlatList%2C%20Text%2C%20View%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BisLoading%2C%20setLoading%5D%20%3D%20useState(true)%3B%5Cn%20%20const%20%5Bdata%2C%20setData%5D%20%3D%20useState(%5B%5D)%3B%5Cn%5Cn%20%20const%20getMovies%20%3D%20async%20()%20%3D%3E%20%7B%5Cn%20%20%20%20try%20%7B%5Cn%20%20%20%20%20%20const%20response%20%3D%20await%20fetch('https%3A%2F%2Freactnative.dev%2Fmovies.json')%3B%5Cn%20%20%20%20%20%20const%20json%20%3D%20await%20response.json()%3B%5Cn%20%20%20%20%20%20setData(json.movies)%3B%5Cn%20%20%20%20%7D%20catch%20(error)%20%7B%5Cn%20%20%20%20%20%20console.error(error)%3B%5Cn%20%20%20%20%7D%20finally%20%7B%5Cn%20%20%20%20%20%20setLoading(false)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%3B%5Cn%5Cn%20%20useEffect(()%20%3D%3E%20%7B%5Cn%20%20%20%20getMovies()%3B%5Cn%20%20%7D%2C%20%5B%5D)%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20padding%3A%2024%7D%7D%3E%5Cn%20%20%20%20%20%20%7BisLoading%20%3F%20(%5Cn%20%20%20%20%20%20%20%20%3CActivityIndicator%20%2F%3E%5Cn%20%20%20%20%20%20)%20%3A%20(%5Cn%20%20%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20%20%20data%3D%7Bdata%7D%5Cn%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7B(%7Bid%7D)%20%3D%3E%20id%7D%5Cn%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Bitem.title%7D%2C%20%7Bitem.releaseYear%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"web","data-snack-supported-platforms":"ios,android,web","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"})}),(0,s.jsx)(o.A,{value:"typescript",children:(0,s.jsx)(n.div,{className:"snack-player","data-snack-name":"Fetch Example","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseEffect%2C%20useState%7D%20from%20'react'%3B%5Cnimport%20%7BActivityIndicator%2C%20FlatList%2C%20Text%2C%20View%7D%20from%20'react-native'%3B%5Cn%5Cntype%20Movie%20%3D%20%7B%5Cn%20%20id%3A%20string%3B%5Cn%20%20title%3A%20string%3B%5Cn%20%20releaseYear%3A%20string%3B%5Cn%7D%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BisLoading%2C%20setLoading%5D%20%3D%20useState(true)%3B%5Cn%20%20const%20%5Bdata%2C%20setData%5D%20%3D%20useState%3CMovie%5B%5D%3E(%5B%5D)%3B%5Cn%5Cn%20%20const%20getMovies%20%3D%20async%20()%20%3D%3E%20%7B%5Cn%20%20%20%20try%20%7B%5Cn%20%20%20%20%20%20const%20response%20%3D%20await%20fetch('https%3A%2F%2Freactnative.dev%2Fmovies.json')%3B%5Cn%20%20%20%20%20%20const%20json%20%3D%20await%20response.json()%3B%5Cn%20%20%20%20%20%20setData(json.movies)%3B%5Cn%20%20%20%20%7D%20catch%20(error)%20%7B%5Cn%20%20%20%20%20%20console.error(error)%3B%5Cn%20%20%20%20%7D%20finally%20%7B%5Cn%20%20%20%20%20%20setLoading(false)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%3B%5Cn%5Cn%20%20useEffect(()%20%3D%3E%20%7B%5Cn%20%20%20%20getMovies()%3B%5Cn%20%20%7D%2C%20%5B%5D)%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20padding%3A%2024%7D%7D%3E%5Cn%20%20%20%20%20%20%7BisLoading%20%3F%20(%5Cn%20%20%20%20%20%20%20%20%3CActivityIndicator%20%2F%3E%5Cn%20%20%20%20%20%20)%20%3A%20(%5Cn%20%20%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20%20%20data%3D%7Bdata%7D%5Cn%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7B(%7Bid%7D)%20%3D%3E%20id%7D%5Cn%20%20%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Bitem.title%7D%2C%20%7Bitem.releaseYear%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-

1platform":"web","data-snack-supported-platforms":"ios,android,web","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"})})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with ",(0,s.jsx)(n.code,{children:"http"}),") you will first need to ",(0,s.jsx)(n.a,{href:"/docs/0.78/integration-with-existing-apps#test-your-integration",children:"add an ATS exception"}),". 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 ",(0,s.jsx)(n.a,{href:"/docs/0.78/publishing-to-app-store#1-enable-app-transport-security",children:"disable ATS completely"}),". Note however that from January 2017, ",(0,s.jsx)(n.a,{href:"https://forums.developer.apple.com/thread/48979",children:"Apple's App Store review will require reasonable justification for disabling ATS"}),". See ",(0,s.jsx)(n.a,{href:"https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33",children:"Apple's documentation"})," for more information."]}),"\n"]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting ",(0,s.jsx)(n.a,{href:"https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic",children:(0,s.jsx)(n.code,{children:"android:usesCleartextTraffic"})})," in the app manifest file."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"using-other-networking-libraries",children:"Using Other Networking Libraries"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest",children:"XMLHttpRequest API"})," is built into React Native. This means that you can use third party libraries such as ",(0,s.jsx)(n.a,{href:"https://github.com/niftylettuce/frisbee",children:"frisbee"})," or ",(0,s.jsx)(n.a,{href:"https://github.com/axios/axios",children:"axios"})," that depend on it, or you can use the XMLHttpRequest API directly if you prefer."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="TypeScript"',children:"const request = new XMLHttpRequest();\nrequest.onreadystatechange = e => {\n  if (request.readyState !== 4) {\n    return;\n  }\n\n  if (request.status === 200) {\n    console.log('success', request.responseText);\n  } else {\n    console.warn('error');\n  }\n};\n\nrequest.open('GET', 'https://mywebsite.com/endpoint/');\nrequest.send();\n"})}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["The security model for XMLHttpRequest is different than on web as there is no concept of ",(0,s.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing",children:"CORS"})," in native apps."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"websocket-support",children:"WebSocket Support"}),"\n",(0,s.jsxs)(n.p,{children:["React Native also supports ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/WebSocket",children:"WebSockets"}),", a protocol which provides full-duplex communication channels over a single TCP connection."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="TypeScript"',children:"const ws = new WebSocket('ws://host.com/path');\n\nws.onopen = () => {\n  // connection opened\n  ws.send('something'); // send a message\n};\n\nws.onmessage = e => {\n  // a message was received\n  console.log(e.data);\n};\n\nws.onerror = e => {\n  // an error occurred\n  console.log(e.message);\n};\n\nws.onclose = e => {\n  // connection closed\n  console.log(e.code, e.reason);\n};\n"})}),"\n",(0,s.jsxs)(n.h2,{id:"known-issues-with-fetch-and-cookie-based-authentication",children:["Known Issues with ",(0,s.jsx)(n.code,{children:"fetch"})," and cookie based authentication"]}),"\n",(0,s.jsxs)(n.p,{children:["The following options are currently not working with ",(0,s.jsx)(n.code,{children:"fetch"})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"redirect:manual"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"credentials:omit"})}),"\n"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: ",(0,s.jsx)(n.a,{href:"https://github.com/facebook/react-native/issues/18837#issuecomment-398779994",children:"https://github.com/facebook/react-native/issues/18837#issuecomment-398779994"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:["Cookie based authentication is currently unstable. You can view some of the issues raised here: ",(0,s.jsx)(n.a,{href:"https://github.com/facebook/react-native/issues/23185",children:"https://github.com/facebook/react-native/issues/23185"})]}),"\n",(0,s.jsxs)(n.li,{children:["As a minimum on iOS, when redirected through a ",(0,s.jsx)(n.code,{children:"302"}),", if a ",(0,s.jsx)(n.code,{children:"Set-Cookie"})," 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."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"configuring-nsurlsession-on-ios",children:"Configuring NSURLSession on iOS"}),"\n",(0,s.jsxs)(n.p,{children:["For some applications it may be appropriate to provide a custom ",(0,s.jsx)(n.code,{children:"NSURLSessionConfiguration"})," for the underlying ",(0,s.jsx)(n.code,{children:"NSURLSession"})," that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply ",(0,s.jsx)(n.code,{children:"NSURLSession"})," with an ephemeral ",(0,s.jsx)(n.code,{children:"NSURLSessionConfiguration"}),". The function ",(0,s.jsx)(n.code,{children:"RCTSetCustomNSURLSessionConfigurationProvider"})," allows for such customization. Remember to add the following import to the file in which ",(0,s.jsx)(n.code,{children:"RCTSetCustomNSURLSessionConfigurationProvider"})," will be called:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-objectivec",metastring:'title="Objective-C"',children:"#import <React/RCTHTTPRequestHandler.h>\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"RCTSetCustomNSURLSessionConfigurationProvider"})," should be called early in the application life cycle such that it is readily available when needed by React, for instance:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-objectivec",metastring:'title="Objective-C"',children:"-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\n\n  // set RCTSetCustomNSURLSessionConfigurationProvider\n  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{\n     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];\n     // configure the session\n     return configuration;\n  });\n\n  // set up React\n  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];\n}\n"})})]})}function f(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},98263(e,n,t){t.d(n,{A:()=>o});var a=t(62540);t(63696);var s=t(11750),r=t(23865);function i({children:e,className:n,hidden:t}){return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)("tabItem_wHwb",n),hidden:t,children:e})}function o({children:e,className:n,value:t}){let{selectedValue:s,lazy:l}=(0,r.uc)(),c=t===s;return!c&&l?null:(0,a.jsx)(i,{className:n,hidden:!c,children:e})}},77779(e,n,t){t.d(n,{A:()=>h});var a=t(62540);t(63696);var s=t(11750),r=t(46065),i=t(23865),o=t(45194),l=t(83029);function c({className:e}){let{selectedValue:n,selectValue:t,tabValues:r,block:l}=(0,i.uc)(),d=[],{blockElementScrollPositionUntilNextRender:u}

1=(0,o.a_)(),h=e=>{let a=e.currentTarget,s=r[d.indexOf(a)].value;s!==n&&(u(a),t(s))},p=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let t=d.indexOf(e.currentTarget)+1;n=d[t]??d[0];break}case"ArrowLeft":{let t=d.indexOf(e.currentTarget)-1;n=d[t]??d[d.length-1]}}n?.focus()};return(0,a.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":l},e),children:r.map(({value:e,label:t,attributes:r})=>(0,a.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{d.push(e)},onKeyDown:p,onClick:h,...r,className:(0,s.A)("tabs__item","tabItem_l0OV",r?.className,{"tabs__item--active":n===e}),children:t??e},e))})}function d({children:e}){return(0,a.jsx)("div",{className:"margin-top--md",children:e})}function u({className:e,children:n}){return(0,a.jsxs)("div",{className:(0,s.A)(r.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,a.jsx)(c,{className:e}),(0,a.jsx)(d,{children:n})]})}function h(e){let n=(0,l.A)(),t=(0,i.OC)(e);return(0,a.jsx)(i.O_,{value:t,children:(0,a.jsx)(u,{className:e.className,children:(0,i.vT)(e.children)})},String(n))}},23865(e,n,t){t.d(n,{OC:()=>h,O_:()=>m,uc:()=>f,vT:()=>d});var a=t(62540),s=t(63696),r=t(49519),i=t(6743),o=t(88511),l=t(15396),c=t(89030);function d(e){return s.Children.toArray(e).filter(e=>"\n"!==e)}function u({value:e,tabValues:n}){return n.some(n=>n.value===e)}function h(e){let n,{defaultValue:t,queryString:a=!1,groupId:d}=e,h=function(e){let{values:n,children:t}=e;return(0,s.useMemo)(()=>{let e=n??s.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,s.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];let n="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${n}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:n,attributes:t,default:a}})=>({value:e,label:n,attributes:t,default:a})),a=(0,l.XI)(e,(e,n)=>e.value===n.value);if(a.length>0)throw Error(`Docusaurus error: Duplicate values "${a.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,t])}(e),[p,f]=(0,s.useState)(()=>(function({defaultValue:e,tabValues:n}){if(0===n.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!u({value:e,tabValues:n}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let t=n.find(e=>e.default)??n[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:t,tabValues:h})),[m,g]=function({queryString:e=!1,groupId:n}){let t=(0,r.W6)(),a=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)(e=>{if(!a)return;let n=new URLSearchParams(t.location.search);n.set(a,e),t.replace({...t.location,search:n.toString()})},[a,t])]}({queryString:a,groupId:d}),[v,b]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[t,a]=(0,c.Dv)(n);return[t,(0,s.useCallback)(e=>{n&&a.set(e)},[n,a])]}({groupId:d}),C=u({value:n=m??v,tabValues:h})?n:null;return(0,i.A)(()=>{C&&f(C)},[C]),{selectedValue:p,selectValue:(0,s.useCallback)(e=>{if(!u({value:e,tabValues:h}))throw Error(`Can't select invalid tab value=${e}`);f(e),g(e),b(e)},[g,b,h]),tabValues:h,lazy:e.lazy??!1,block:e.block??!1}}let p=(0,s.createContext)(null);function f(){let e=s.useContext(p);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function m(e){return(0,a.jsx)(p.Provider,{value:e.value,children:e.children})}},38469(e,n,t){t.d(n,{A:()=>i});var a=t(93227);let s=!!a.A.canUseDOM&&navigator.platform.startsWith("Mac"),r=!!a.A.canUseDOM&&navigator.platform.startsWith("Win"),i={defaultGuide:"quickstart",defaultJsDebugger:"flipper",defaultOs:s?"macos":r?"windows":"linux",defaultPackageManager:"npm",defaultPlatform:s?"ios":"android",defaultSyntax:"functional",defaultAndroidLanguage:"java",defaultAppleLanguage:"objc",defaultJavaScriptSpecLanguages:"typescript",getDevNotesTabs:(e=["android","ios","web","windows"])=>[e.includes("android")?{label:"Android",value:"android"}:void 0,e.includes("ios")?{label:"iOS",value:"ios"}:void 0,e.includes("web")?{label:"Web",value:"web"}:void 0,e.includes("windows")?{label:"Windows",value:"windows"}

2:void 0].filter(Boolean),guides:[{label:"Expo Go Quickstart",value:"quickstart"},{label:"React Native CLI Quickstart",value:"native"}],oses:[{label:"macOS",value:"macos"},{label:"Windows",value:"windows"},{label:"Linux",value:"linux"}],packageManagers:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],platforms:[{label:"Android",value:"android"},{label:"iOS",value:"ios"}],syntax:[{label:"Function Component",value:"functional"},{label:"Class Component",value:"classical"}],androidLanguages:[{label:"Java",value:"java"},{label:"Kotlin",value:"kotlin"}],appleLanguages:[{label:"ObjectiveC",value:"objc"},{label:"Swift",value:"swift"}],javaScriptSpecLanguages:[{label:"TypeScript",value:"typescript"},{label:"Flow",value:"flow"}],jsDebuggers:[{label:"Hermes Debugger / Expo",value:"hermes"},{label:"Flipper",value:"flipper"},{label:"New Debugger (Experimental)",value:"new-debugger"}],snackLanguages:[{label:"TypeScript",value:"typescript"},{label:"JavaScript",value:"javascript"}],defaultSnackLanguage:"typescript"}},43023(e,n,t){t.d(n,{R:()=>i,x:()=>o});var a=t(63696);let s={},r=a.createContext(s);function i(e){let n=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]);