1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["1497"],{84484(e,t,n){n.r(t),n.d(t,{metadata:()=>i,default:()=>u,frontMatter:()=>a,contentTitle:()=>s,toc:()=>c,assets:()=>l});var i=JSON.parse('{"id":"native-platform","title":"Native Platform","description":"Your application may need access to platform features that aren\u2019t directly available from react-native or one of the hundreds of third-party libraries maintained by the community. Maybe you want to reuse some existing Objective-C, Swift, Java, Kotlin or C++ code from the JavaScript runtime. Whatever your reason, React Native exposes a powerful set of API to connect your native code to your JavaScript application code.","source":"@site/versioned_docs/version-0.81/native-platforms.md","sourceDirName":".","slug":"/native-platform","permalink":"/docs/0.81/native-platform","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/native-platforms.md\\"},{\\"label\\":\\"Edit page for 0.81 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.81/native-platforms.md\\"}]","tags":[],"version":"0.81","lastUpdatedAt":1755016505000,"frontMatter":{"id":"native-platform","title":"Native Platform"},"sidebar":"docs","previous":{"title":"The Codegen CLI","permalink":"/docs/0.81/the-new-architecture/codegen-cli"},"next":{"title":"Android and iOS","permalink":"/docs/0.81/turbo-native-modules-introduction"}}'),r=n(62540),o=n(43023);let a={id:"native-platform",title:"Native Platform"},s,l={},c=[];function d(e){let t={a:"a",admonition:"admonition",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Your application may need access to platform features that aren\u2019t directly available from react-native or one of the hundreds of ",(0,r.jsx)(t.a,{href:"https://reactnative.directory/",children:"third-party libraries"})," maintained by the community. Maybe you want to reuse some existing Objective-C, Swift, Java, Kotlin or C++ code from the JavaScript runtime. Whatever your reason, React Native exposes a powerful set of API to connect your native code to your JavaScript application code."]}),"\n",(0,r.jsx)(t.p,{children:"This guide introduces:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Native Modules:"})," native libraries that have no User Interface (UI) for the user. Examples would be persistent storage, notifications, network events. These are accessible to your user as JavaScript functions and objects."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Native Component:"})," native platform views, widgets and controllers that are available to your application's JavaScript code through React Components."]}),"\n"]}),"\n",(0,r.jsxs)(t.admonition,{type:"note",children:[(0,r.jsx)(t.p,{children:"You might have previously been familiar with:"}),(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"./legacy/native-modules-intro",children:"Legacy Native Modules"}),";"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"./legacy/native-components-android",children:"Legacy Native Components"}),";"]}),"\n"]}),(0,r.jsx)(t.p,{children:"These are our deprecated native module and component API. You can still use many of these legacy libraries with the New Architecture thanks to our interop layers. You should consider:"}),(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"using alternative libraries,"}),"\n",(0,r.jsx)(t.li,{children:"upgrading to newer library versions that have first-class support for the New Architecture, or"}),"\n",(0,r.jsx)(t.li,{children:"port these libraries yourself to Turbo Native Modules or Fabric Native Components."}),"\n"]})]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["Native Modules","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/0.81/turbo-native-modules-introduction",children:"Android & iOS"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/0.81/the-new-architecture/pure-cxx-modules",children:"Cross-Platform with C++"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/0.81/the-new-architecture/custom-cxx-types",children:"Advanced: Custom C++ Types"})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["Fabric Native Components","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/0.81/fabric-native-components-introduction",children:"Android & iOS"})}),"\n"]}),"\n"]}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},43023(e,t,n){n.d(t,{R:()=>a,x:()=>s});var i=n(63696);let r={},o=i.createContext(r);function a(e){let t=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.