Deploy website - based on fafc80e3cef4df06bdf88668fe86dba768afe7e5

docs/platform-specific-code.html

@@ -18,8 +18,8 @@
 <script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Platform Specific Code · 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="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><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="Platform Specific Code · React Native"><meta data-react-helmet="true" name="description" content="When building a cross-platform app, you&#x27;ll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for Android and iOS."><meta data-react-helmet="true" property="og:description" content="When building a cross-platform app, you&#x27;ll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for Android and iOS."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/platform-specific-code"><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/platform-specific-code"><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.c0800141.js" as="script">
-<link rel="preload" href="/main.5a3c9855.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">
@@ -36,10 +36,10 @@
 </span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">Component</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/&gt;</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><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"> Component </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> Platform</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">select</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 function-variable function" style="color:#79b6f2">native</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">&#x27;ComponentForNative&#x27;</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 function-variable function" style="color:#79b6f2">default</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">&#x27;ComponentForWeb&#x27;</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 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"></span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">Component</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/&gt;</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="detecting-the-android-version"></a>Detecting the Android version<a aria-hidden="true" tabindex="-1" class="hash-link" href="#detecting-the-android-version" title="Direct link to heading">#</a></h3><p>On Android, the <code>Platform</code> module can also be used to detect the version of the Android Platform in which the app is running:</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">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Platform </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;react-native&#x27;</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">Platform</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">Version </span><span class="token operator" style="color:#fc929e">===</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">25</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">&#x27;Running on Nougat!&#x27;</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></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="detecting-the-ios-version"></a>Detecting the iOS version<a aria-hidden="true" tabindex="-1" class="hash-link" href="#detecting-the-ios-version" title="Direct link to heading">#</a></h3><p>On iOS, the <code>Version</code> is a result of <code>-[UIDevice systemVersion]</code>, which is a string with the current version of the operating system. An example of the system version is &quot;10.3&quot;. For example, to detect the major version number on iOS:</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">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Platform </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;react-native&#x27;</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">const</span><span class="token plain"> majorVersionIOS </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">parseInt</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">Platform</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">Version</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">10</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">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">majorVersionIOS </span><span class="token operator" style="color:#fc929e">&lt;=</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">9</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">&#x27;Work around a change in behavior&#x27;</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></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="platform-specific-extensions"></a>Platform-specific extensions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#platform-specific-extensions" title="Direct link to heading">#</a></h2><p>When your platform-specific code is more complex, you should consider splitting the code out into separate files. React Native will detect when a file has a <code>.ios.</code> or <code>.android.</code> extension and load the relevant platform file when required from other components.</p><p>For example, say you have the following files in your project:</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-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">BigButton.ios.js</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">BigButton.android.js</span></div></div></div></div></div><p>You can then require the component as follows:</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">import</span><span class="token plain"> BigButton </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;./BigButton&#x27;</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>React Native will automatically pick up the right file based on the running platform.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a>Native-specific extensions (i.e. sharing code with NodeJS and Web)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" title="Direct link to heading">#</a></h2><p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is especially useful for projects that have common code shareLine truncated
+</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> majorVersionIOS </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">parseInt</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">Platform</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">Version</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">10</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">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">majorVersionIOS </span><span class="token operator" style="color:#fc929e">&lt;=</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">9</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">&#x27;Work around a change in behavior&#x27;</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></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="platform-specific-extensions"></a>Platform-specific extensions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#platform-specific-extensions" title="Direct link to heading">#</a></h2><p>When your platform-specific code is more complex, you should consider splitting the code out into separate files. React Native will detect when a file has a <code>.ios.</code> or <code>.android.</code> extension and load the relevant platform file when required from other components.</p><p>For example, say you have the following files in your project:</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-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">BigButton.ios.js</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">BigButton.android.js</span></div></div></div></div></div><p>You can then require the component as follows:</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">import</span><span class="token plain"> BigButton </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;./BigButton&#x27;</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>React Native will automatically pick up the right file based on the running platform.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a>Native-specific extensions (i.e. sharing code with NodeJS and Web)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" title="Direct link to heading">#</a></h2><p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is especially useful for projects that have common code shareLine truncated
 <script src="/styles.07d522c6.js"></script>
-<script src="/runtime~main.c0800141.js"></script>
-<script src="/main.5a3c9855.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>