Deploy website - based on 5a0a7b312f0624fdb62f4d99b77230aeb1648936

docs/platform-specific-code/index.html

@@ -16,7 +16,7 @@
 <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.bc3f26fc.css">
 <link rel="stylesheet" href="/main.5bfa61fe.css">
 <link rel="preload" href="/styles.473a8a2f.js" as="script">
-<link rel="preload" href="/runtime~main.b0f5710e.js" as="script">
+<link rel="preload" href="/runtime~main.4a9f417d.js" as="script">
 <link rel="preload" href="/main.e6a4681d.js" as="script">
 <link rel="preload" href="/1.c2efdf9c.js" as="script">
 <link rel="preload" href="/2.df07bbe5.js" as="script">
@@ -36,7 +36,7 @@
 </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_2cZh" 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_1XEh"><div class="codeBlockContent_1u-d"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div class="prism-code language-jsx codeBlock_3iAC"><div class="codeBlockLines_b7E3" 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_2cZh" 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_1XEh"><div class="codeBlockContent_1u-d"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" 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_1XEh"><div class="codeBlockContent_1u-d"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div class="prism-code language-jsx codeBlock_3iAC"><div class="codeBlockLines_b7E3" 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_2cZh" 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.473a8a2f.js"></script>
-<script src="/runtime~main.b0f5710e.js"></script>
+<script src="/runtime~main.4a9f417d.js"></script>
 <script src="/main.e6a4681d.js"></script>
 <script src="/1.c2efdf9c.js"></script>
 <script src="/2.df07bbe5.js"></script>