https://reactnative.dev/assets/js/96d6924f.8a4599b8.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["14656"],{24431(e,n,t){t.r(n),t.d(n,{metadata:()=>i,default:()=>h,frontMatter:()=>o,contentTitle:()=>a,toc:()=>c,assets:()=>l});var i=JSON.parse('{"id":"fabric-native-components-ios","title":"Fabric Native Components: iOS","description":"Now it\'s time to write some iOS platform code to be able to render the web view. The steps you need to follow are:","source":"@site/versioned_docs/version-0.82/fabric-native-components-ios.md","sourceDirName":".","slug":"/fabric-native-components-ios","permalink":"/docs/0.82/fabric-native-components-ios","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/fabric-native-components-ios.md\\"},{\\"label\\":\\"Edit page for 0.82 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.82/fabric-native-components-ios.md\\"}]","tags":[],"version":"0.82","lastUpdatedAt":1759937642000,"frontMatter":{"id":"fabric-native-components-ios","title":"Fabric Native Components: iOS"}}'),r=t(62540),s=t(43023);t(77779),t(98263),t(38469);let o={id:"fabric-native-components-ios",title:"Fabric Native Components: iOS"},a,l={},c=[{value:"1. Run Codegen",id:"1-run-codegen",level:3},{value:"3. Write the <code>RCTWebView</code>",id:"3-write-the-rctwebview",level:3},{value:"Add WebKit framework",id:"add-webkit-framework",level:4}];function d(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.p,{children:"Now it's time to write some iOS platform code to be able to render the web view. The steps you need to follow are:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Run Codegen."}),"\n",(0,r.jsxs)(n.li,{children:["Write the code for the ",(0,r.jsx)(n.code,{children:"RCTWebView"})]}),"\n",(0,r.jsxs)(n.li,{children:["Register the ",(0,r.jsx)(n.code,{children:"RCTWebView"})," in the application"]}),"\n"]}

1),"\n",(0,r.jsx)(n.h3,{id:"1-run-codegen",children:"1. Run Codegen"}),"\n",(0,r.jsxs)(n.p,{children:["You can ",(0,r.jsx)(n.a,{href:"the-new-architecture/codegen-cli",children:"manually run"})," the Codegen, however it's simpler to use the application you're going to demo the component in to do this for you."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"cd ios\nbundle install\nbundle exec pod install\n"})}),"\n",(0,r.jsx)(n.p,{children:"Importantly you will see logging output from Codegen, which we're going to use in Xcode to build our WebView native component."}),"\n",(0,r.jsx)(n.admonition,{type:"warning",children:(0,r.jsxs)(n.p,{children:["You should be careful about committing generated code to your repository. Generated code is specific to each version of React Native. Use npm ",(0,r.jsx)(n.a,{href:"https://nodejs.org/en/blog/npm/peer-dependencies",children:"peerDependencies"})," to restrict compatibility with version of React Native."]})}),"\n",(0,r.jsxs)(n.h3,{id:"3-write-the-rctwebview",children:["3. Write the ",(0,r.jsx)(n.code,{children:"RCTWebView"})]}),"\n",(0,r.jsxs)(n.p,{children:["We need to prepare your iOS project using Xcode by completing these ",(0,r.jsx)(n.strong,{children:"5 steps"}),":"]}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"Open the CocoaPods generated Xcode Workspace:"}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"cd ios\nopen Demo.xcworkspace\n"})}),"\n",(0,r.jsx)("img",{className:"half-size",alt:"Open Xcode Workspace",src:"/docs/assets/fabric-native-components/1.webp"}),"\n",(0,r.jsxs)(n.ol,{start:"2",children:["\n",(0,r.jsxs)(n.li,{children:["Right click on app and select ",(0,r.jsx)("code",{children:"New Group"}),", call the new group ",(0,r.jsx)(n.code,{children:"WebView"}),"."]}),"\n"]}),"\n",(0,r.jsx)("img",{className:"half-size",alt:"Right click on app and select New Group",src:"/docs/assets/fabric-native-components/2.webp"}),"\n",(0,r.jsxs)(n.ol,{start:"3",children:["\n",(0,r.jsxs)(n.li,{children:["In the ",(0,r.jsx)(n.code,{children:"WebView"})," group, create ",(0,r.jsx)("code",{children:"New"}),"\u2192",(0,r.jsx)("code",{children:"File from Template"}),"."]}),"\n"]}),"\n",(0,r.jsx)("img",{className:"half-size",alt:"Create a new file using the Cocoa Touch Class template",src:"/docs/assets/fabric-native-components/3.webp"}),"\n",(0,r.jsxs)(n.ol,{start:"4",children:["\n",(0,r.jsxs)(n.li,{children:["Use the ",(0,r.jsx)("code",{children:"Objective-C File"})," template, and name it ",(0,r.jsx)("code",{children:"RCTWebView"}),"."]}),"\n"]}),"\n",(0,r.jsx)("img",{className:"half-size",alt:"Create an Objective-C RCTWebView class",src:"/docs/assets/fabric-native-components/4.webp"}),"\n",(0,r.jsxs)(n.ol,{start:"5",children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Repeat step 4 and create a header file named ",(0,r.jsx)(n.code,{children:"RCTWebView.h"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Rename ",(0,r.jsx)("code",{children:"RCTWebView.m"})," \u2192 ",(0,r.jsx)("code",{children:"RCTWebView.mm"})," making it an Objective-C++ file."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-text",metastring:'title="Demo/ios"',children:"Podfile\n...\nDemo\n\u251C\u2500\u2500 AppDelegate.swift\n...\n// highlight-start\n\u251C\u2500\u2500 RCTWebView.h\n\u2514\u2500\u2500 RCTWebView.mm\n// highlight-end\n"})}),"\n",(0,r.jsx)(n.p,{children:"After creating the header file and the implementation file, you can start implementing them."}),"\n",(0,r.jsxs)(n.p,{children:["This is the code for the ",(0,r.jsx)(n.code,{children:"RCTWebView.h"})," file, which declares the component interface."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-objc",metastring:'title="Demo/RCTWebView/RCTWebView.h"',children:"#import <React/RCTViewComponentView.h>\n#import <UIKit/UIKit.h>\n\nNS_ASSUME_NONNULL_BEGIN\n\n@interface RCTWebView : RCTViewComponentView\n\n// You would declare native methods you'd want to access from the view here\n\n@end\n\nNS_ASSUME_NONNULL_END\n"})}),"\n",(0,r.jsxs)(n.p,{children:["This class defines an ",(0,r.jsx)(n.code,{children:"RCTWebView"}

1)," which extends the ",(0,r.jsx)(n.code,{children:"RCTViewComponentView"})," class. This is the base class for all the native components and it is provided by React Native."]}),"\n",(0,r.jsxs)(n.p,{children:["The code for the implementation file (",(0,r.jsx)(n.code,{children:"RCTWebView.mm"}),") is the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-objc",metastring:'title="Demo/RCTWebView/RCTWebView.mm"',children:'#import "RCTWebView.h"\n\n#import <react/renderer/components/AppSpec/ComponentDescriptors.h>\n#import <react/renderer/components/AppSpec/EventEmitters.h>\n#import <react/renderer/components/AppSpec/Props.h>\n#import <react/renderer/components/AppSpec/RCTComponentViewHelpers.h>\n// highlight-next-line\n#import <WebKit/WebKit.h>\n\nusing namespace facebook::react;\n\n@interface RCTWebView () <RCTCustomWebViewViewProtocol, WKNavigationDelegate>\n@end\n\n@implementation RCTWebView {\n  NSURL * _sourceURL;\n  WKWebView * _webView;\n}\n\n-(instancetype)init\n{\n  if(self = [super init]) {\n    // highlight-start\n    _webView = [WKWebView new];\n    _webView.navigationDelegate = self;\n    [self addSubview:_webView];\n    // highlight-end\n  }\n  return self;\n}\n\n- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps\n{\n  const auto &oldViewProps = *std::static_pointer_cast<CustomWebViewProps const>(_props);\n  const auto &newViewProps = *std::static_pointer_cast<CustomWebViewProps const>(props);\n\n  // Handle your props here\n  if (oldViewProps.sourceURL != newViewProps.sourceURL) {\n    NSString *urlString = [NSString stringWithCString:newViewProps.sourceURL.c_str() encoding:NSUTF8StringEncoding];\n    _sourceURL = [NSURL URLWithString:urlString];\n    // highlight-start\n    if ([self urlIsValid:newViewProps.sourceURL]) {\n      [_webView loadRequest:[NSURLRequest requestWithURL:_sourceURL]];\n    }\n    // highlight-end\n  }\n\n  [super updateProps:props oldProps:oldProps];\n}\n\n-(void)layoutSubviews\n{\n  [super layoutSubviews];\n  _webView.frame = self.bounds;\n\n}\n\n#pragma mark - WKNavigationDelegate\n\n// highlight-start\n-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation\n{\n  CustomWebViewEventEmitter::OnScriptLoaded result = CustomWebViewEventEmitter::OnScriptLoaded{CustomWebViewEventEmitter::OnScriptLoadedResult::Success};\n  self.eventEmitter.onScriptLoaded(result);\n}\n\n- (BOOL)urlIsValid:(std::string)propString\n{\n  if (propString.length() > 0 && !_sourceURL) {\n    CustomWebViewEventEmitter::OnScriptLoaded result = CustomWebViewEventEmitter::OnScriptLoaded{CustomWebViewEventEmitter::OnScriptLoadedResult::Error};\n\n    self.eventEmitter.onScriptLoaded(result);\n    return NO;\n  }\n  return YES;\n}\n\n// Event emitter convenience method\n- (const CustomWebViewEventEmitter &)eventEmitter\n{\n  return static_cast<const CustomWebViewEventEmitter &>(*_eventEmitter);\n}\n// highlight-end\n\n+ (ComponentDescriptorProvider)componentDescriptorProvider\n{\n  return concreteComponentDescriptorProvider<CustomWebViewComponentDescriptor>();\n}\n\n@end\n'})}),"\n",(0,r.jsx)(n.p,{children:"This code is written in Objective-C++ and contains various details:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"@interface"})," implements two protocols:","\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"RCTCustomWebViewViewProtocol"}),", generated by Codegen;"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"WKNavigationDelegate"}),", provided by the WebKit framework to handle the web view navigation events;"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"init"})," method that instantiates the ",(0,r.jsx)(n.code,{children:"WKWebView"}),", adds it to the subviews and that sets the ",(0,r.jsx)(n.code,{children:"navigationDelegate"}),";"]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"updateProps"})," method that is called by React Native when the component's props change;"]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"layoutSubviews"})," method that describes how the custom view needs to be laid out;"]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"webView:didFinishNavigation:"})," method that lets you handle what to do when the ",(0,r.jsx)(n.code,{children:"WKWebView"})," finishes loading the page;"]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"urlIsValid:(std::string)propString"})," method that checks whether the URL received as prop is valid;"]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"eventEmitter"})," method which is a utility to retrieve a strongly typed ",(0,r.jsx)(n.code,{children:"eventEmitter"})," instance"]}),"\n",(0,r.jsxs)(n.li,{children:["the ",(0,r.jsx)(n.code,{children:"componentDescriptorProvider"})," which returns the ",(0,r.jsx)(n.code,{children:"ComponentDescriptor"})," generated by Codegen;"]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"add-webkit-framework",children:"Add WebKit framework"}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsx)(n.p,{children:"This step is only required because we are creating a Web view. Web components on iOS needs to be linked against the WebKit framework provided by Apple. If your component doesn't need to access web-specific features, you can skip this 

1step."})}),"\n",(0,r.jsxs)(n.p,{children:["A web view requires access to some features that Apple provides through one of the frameworks shipped with Xcode and the devices: WebKit.\nYou can see it in the native code by the ",(0,r.jsx)(n.code,{children:"#import <WebKit/WebKit.h>"})," line added in the ",(0,r.jsx)(n.code,{children:"RCTWebView.mm"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"To link the WebKit framework in your app, follow these steps:"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"In Xcode, Click on your project"}),"\n",(0,r.jsx)(n.li,{children:"Select the app target"}),"\n",(0,r.jsx)(n.li,{children:"Select the General tab"}),"\n",(0,r.jsxs)(n.li,{children:["Scroll down until you find the ",(0,r.jsx)(n.em,{children:'"Frameworks, Libraries, and Embedded Contents"'})," section, and press the ",(0,r.jsx)(n.code,{children:"+"})," button"]}),"\n"]}),"\n",(0,r.jsx)("img",{className:"half-size",alt:"Add webkit framework to your app 1",src:"/docs/assets/AddWebKitFramework1.png"}),"\n",(0,r.jsxs)(n.ol,{start:"5",children:["\n",(0,r.jsx)(n.li,{children:"In the search bar, filter for WebKit"}),"\n",(0,r.jsx)(n.li,{children:"Select the WebKit framework"}),"\n",(0,r.jsx)(n.li,{children:"Click on Add."}),"\n"]}),"\n",(0,r.jsx)("img",{className:"half-size",alt:"Add webkit framework to your app 2",src:"/docs/assets/AddWebKitFramework2.png"})]})}function h(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},98263(e,n,t){t.d(n,{A:()=>a});var i=t(62540);t(63696);var r=t(11750),s=t(23865);function o({children:e,className:n,hidden:t}){return(0,i.jsx)("div",{role:"tabpanel",className:(0,r.A)("tabItem_wHwb",n),hidden:t,children:e})}function a({children:e,className:n,value:t}){let{selectedValue:r,lazy:l}=(0,s.uc)(),c=t===r;return!c&&l?null:(0,i.jsx)(o,{className:n,hidden:!c,children:e})}},77779(e,n,t){t.d(n,{A:()=>u});var i=t(62540);t(63696);var r=t(11750),s=t(46065),o=t(23865),a=t(45194),l=t(83029);function c({className:e}){let{selectedValue:n,selectValue:t,tabValues:s,block:l}=(0,o.uc)(),d=[],{blockElementScrollPositionUntilNextRender:h}=(0,a.a_)(),u=e=>{let i=e.currentTarget,r=s[d.indexOf(i)].value;r!==n&&(h(i),t(r))},p=e=>{let n=null;switch(e.key){case"Enter":u(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,i.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":l},e),children:s.map(({value:e,label:t,attributes:s})=>(0,i.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{d.push(e)},onKeyDown:p,onClick:u,...s,className:(0,r.A)("tabs__item","tabItem_l0OV",s?.className,{"tabs__item--active":n===e}),children:t??e},e))})}function d({children:e}){return(0,i.jsx)("div",{className:"margin-top--md",children:e})}function h({className:e,children:n}){return(0,i.jsxs)("div",{className:(0,r.A)(s.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,i.jsx)(c,{className:e}),(0,i.jsx)(d,{children:n})]})}function u(e){let n=(0,l.A)(),t=(0,o.OC)(e);return(0,i.jsx)(o.O_,{value:t,children:(0,i.jsx)(h,{className:e.className,children:(0,o.vT)(e.children)})},String(n))}},23865(e,n,t){t.d(n,{OC:()=>u,O_:()=>b,uc:()=>m,vT:()=>d});var i=t(62540),r=t(63696),s=t(49519),o=t(6743),a=t(88511),l=t(15396),c=t(89030);function d(e){return r.Children.toArray(e).filter(e=>"\n"!==e)}function h({value:e,tabValues:n}){return n.some(n=>n.value===e)}function u(e){let n,{defaultValue:t,queryString:i=!1,groupId:d}=e,u=function(e){let{values:n,children:t}=e;return(0,r.useMemo)(()=>{let e=n??r.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,r.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:i}})=>({value:e,label:n,attributes:t,default:i})),i=(0,l.XI)(e,(e,n)=>e.value===n.value);if(i.length>0)throw Error(`Docusaurus error: Duplicate values "${i.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,t])}(e),[p,m]=(0,r.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(!h({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:u})),[b,w]=function({queryString:e=!1,groupId:n}){let t=(0,s.W6)(),i=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,a.aZ)(i),(0,r.useCallback)(e=>{if(!i)return;let n=new URLSearchParams(t.location.search);n.set(i,e),t.replace({...t.location,search:n.toString()})},[i,t])]}({queryString:i,groupId:d}),[v,f]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[t,i]=(0,c.Dv)(n);return[t,(0,r.useCallback)(e=>{n&&i.set(e)},[n,i])]}({groupId:d}),g=h({value:n=b??v,tabValues:u})?n:null;return(0,o.A)(()=>{g&&m(g)},[g]),{selectedValue:p,selectValue:(0,r.useCallback)(e=>{if(!h({value:e,tabValues:u}))throw Error(`Can't select invalid tab value=${e}`);m(e),w(e),f(e)},[w,f,u]),tabValues:u,lazy:e.lazy??!1,block:e.block??!1}}let p=(0,r.createContext)(null);function m(){let e=r.useContext(p);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function b(e){return(0,i.jsx)(p.Provider,{value:e.value,children:e.children})}},38469(e,n,t){t.d(n,{A:()=>o});var i=t(93227);let r=!!i.A.canUseDOM&&navigator.platform.startsWith("Mac"),s=!!i.A.canUseDOM&&navigator.platform.startsWith("Win"),o={defaultGuide:"quickstart",defaultJsDebugger:"flipper",defaultOs:r?"macos":s?"windows":"linux",defaultPackageManager:"npm",defaultPlatform:r?"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:()=>o,x:()=>a});var i=t(63696);let r={},s=i.createContext(r);function o(e){let n=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);