mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on 54eebe3e6216b50d6c83f0468dc079241abc03bd
This commit is contained in:
Website Deployment Script
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2015/11/23/making-react-native-apps-accessible">Making React Native apps accessible</a></h1><p class="post-meta">November 23, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener">Georgiy Kassabli</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener"><img src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A" alt="Georgiy Kassabli"/></a></div></div></header><div><span><p>With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.</p>
|
||||
<p>For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the iOS and Android APIs. If you've developed accessible applications for the web, iOS, or Android before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element <em>accessible</em> (therefore exposed to assistive technology) and use <em>accessibilityLabel</em> to provide a string description for the element:</p>
|
||||
<p>For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the Android and iOS APIs. If you've developed accessible applications for Android, iOS, or the web before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element <em>accessible</em> (therefore exposed to assistive technology) and use <em>accessibilityLabel</em> to provide a string description for the element:</p>
|
||||
<pre><code class="hljs"><View accessible={<span class="hljs-literal">true</span>} <span class="hljs-attribute">accessibilityLabel</span>=”This is<span class="hljs-built_in"> simple </span>view”>
|
||||
</code></pre>
|
||||
<p>Let's walk through a slightly more involved application of the React AX API by looking at one of Facebook's own React-powered products: the <strong>Ads Manager app</strong>.</p>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2015/11/23/making-react-native-apps-accessible">Making React Native apps accessible</a></h1><p class="post-meta">November 23, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener">Georgiy Kassabli</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener"><img src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A" alt="Georgiy Kassabli"/></a></div></div></header><div><span><p>With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.</p>
|
||||
<p>For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the iOS and Android APIs. If you've developed accessible applications for the web, iOS, or Android before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element <em>accessible</em> (therefore exposed to assistive technology) and use <em>accessibilityLabel</em> to provide a string description for the element:</p>
|
||||
<p>For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the Android and iOS APIs. If you've developed accessible applications for Android, iOS, or the web before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element <em>accessible</em> (therefore exposed to assistive technology) and use <em>accessibilityLabel</em> to provide a string description for the element:</p>
|
||||
<pre><code class="hljs"><View accessible={<span class="hljs-literal">true</span>} <span class="hljs-attribute">accessibilityLabel</span>=”This is<span class="hljs-built_in"> simple </span>view”>
|
||||
</code></pre>
|
||||
<p>Let's walk through a slightly more involved application of the React AX API by looking at one of Facebook's own React-powered products: the <strong>Ads Manager app</strong>.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Dive into React Native Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Dive into React Native Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2016/03/28/dive-into-react-native-performance"/><meta property="og:description" content="React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Dive into React Native Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Dive into React Native Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2016/03/28/dive-into-react-native-performance"/><meta property="og:description" content="React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></h1><p class="post-meta">March 28, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener">Pieter De Baets</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/5676?v=3&s=460" alt="Pieter De Baets"/></a></div></div></header><div><span><p>React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.</p>
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></h1><p class="post-meta">March 28, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener">Pieter De Baets</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/5676?v=3&s=460" alt="Pieter De Baets"/></a></div></div></header><div><span><p>React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="why-the-hurry"></a><a href="#why-the-hurry" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why the hurry?</h2>
|
||||
<p>With an app that runs faster, content loads quickly, which means people get more time to interact with it, and smooth animations make the app enjoyable to use. In emerging markets, where <a href="https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/">2011 class phones</a> on <a href="https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/">2G networks</a> are the majority, a focus on performance can make the difference between an app that is usable and one that isn't.</p>
|
||||
<p>Since releasing React Native on <a href="https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html">iOS</a> and on <a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/">Android</a>, we have been improving list view scrolling performance, memory efficiency, UI responsiveness, and app startup time. Startup sets the first impression of an app and stresses all parts of the framework, so it is the most rewarding and challenging problem to tackle.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Dive into React Native Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Dive into React Native Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2016/03/28/dive-into-react-native-performance"/><meta property="og:description" content="React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Dive into React Native Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Dive into React Native Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2016/03/28/dive-into-react-native-performance"/><meta property="og:description" content="React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></h1><p class="post-meta">March 28, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener">Pieter De Baets</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/5676?v=3&s=460" alt="Pieter De Baets"/></a></div></div></header><div><span><p>React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.</p>
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></h1><p class="post-meta">March 28, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener">Pieter De Baets</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/5676?v=3&s=460" alt="Pieter De Baets"/></a></div></div></header><div><span><p>React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="why-the-hurry"></a><a href="#why-the-hurry" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why the hurry?</h2>
|
||||
<p>With an app that runs faster, content loads quickly, which means people get more time to interact with it, and smooth animations make the app enjoyable to use. In emerging markets, where <a href="https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/">2011 class phones</a> on <a href="https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/">2G networks</a> are the majority, a focus on performance can make the difference between an app that is usable and one that isn't.</p>
|
||||
<p>Since releasing React Native on <a href="https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html">iOS</a> and on <a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/">Android</a>, we have been improving list view scrolling performance, memory efficiency, UI responsiveness, and app startup time. Startup sets the first impression of an app and stresses all parts of the framework, so it is the most rewarding and challenging problem to tackle.</p>
|
||||
|
||||
@@ -89,23 +89,23 @@
|
||||
<p>Up next, the first featured talk of the evening. <a href="https://twitter.com/clarler">Clarence Leung</a>, Senior Software Engineer at Netflix, presented his talk on Designing APIs for React Native. First he noted the two main types of libraries one may work on: components such as tab bars and date pickers, and libraries that provide access to native services such as the camera roll or in-app payments. There are two ways one may approach when building a library for use in React Native:</p>
|
||||
<ul>
|
||||
<li>Provide platform-specific components</li>
|
||||
<li>A cross-platform library with a similar API for both iOS and Android</li>
|
||||
<li>A cross-platform library with a similar API for both Android and iOS</li>
|
||||
</ul>
|
||||
<p>Each approach has its own considerations, and it’s up to you to determine what works best for your needs.</p>
|
||||
<p><strong>Approach #1</strong></p>
|
||||
<p>As an example of platform-specific components, Clarence talked about the DatePickerIOS and DatePickerAndroid from core React Native. On iOS, date pickers are rendered as part of the UI and can be easily embedded in an existing view, while date pickers on Android are presented modally. It makes sense to provide separate components in this case.</p>
|
||||
<p><strong>Approach #2</strong></p>
|
||||
<p>Photo pickers, on the other hand, are treated similarly on iOS and Android. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using <code>if</code> statements and the <code>Platform</code> component.</p>
|
||||
<p>Photo pickers, on the other hand, are treated similarly on Android and iOS. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using <code>if</code> statements and the <code>Platform</code> component.</p>
|
||||
<p>Regardless of which approach you settle on, it’s a good idea to minimize the API surface and build app-specific libraries. For example, iOS’s In-App Purchase framework supports one-time, consumable purchases, as well as renewable subscriptions. If your app will only need to support consumable purchases, you may get away with dropping support for subscriptions in your cross-platform library.</p>
|
||||
<p><img src="/react-native/blog/assets/rnmsf-august-2016-netflix.jpg" alt=""></p>
|
||||
<p>There was a brief Q&A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both iOS and Android.</p>
|
||||
<p>There was a brief Q&A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both Android and iOS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="bridging-the-gap-using-react-native-in-existing-codebases"></a><a href="#bridging-the-gap-using-react-native-in-existing-codebases" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bridging the Gap, Using React Native in Existing Codebases</h2>
|
||||
<p>The final talk of the night was by <a href="https://twitter.com/intelligibabble">Leland Richardson</a> from Airbnb. The talk was focused on the use of React Native in existing codebases. I already know how easy it is to write a new app from scratch using React Native, so I was very interested to hear about Airbnb’s experience adopting React Native in their existing native apps.</p>
|
||||
<p>Leland started off by talking about greenfield apps versus brownfield apps. Greenfield means to start a project without the need to consider any prior work. This is in contrast to brownfield projects where you need to take into account the existing project’s requirements, development processes, and all of the teams various needs.</p>
|
||||
<p>When you’re working on a greenfield app, the React Native CLI sets up a single repository for both iOS and Android and everything just works. The first challenge against using React Native at Airbnb was the fact that the iOS and Android app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.</p>
|
||||
<p>To get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the iOS and Android repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the iOS and Android repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across iOS and Android, as they work on the React Native repository directly.</p>
|
||||
<p>This does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the iOS and Android repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).</p>
|
||||
<p>Airbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the iOS and Android teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.</p>
|
||||
<p>When you’re working on a greenfield app, the React Native CLI sets up a single repository for both Android and iOS and everything just works. The first challenge against using React Native at Airbnb was the fact that the Android and iOS app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.</p>
|
||||
<p>To get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the Android and iOS repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the Android and iOS repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across Android and iOS, as they work on the React Native repository directly.</p>
|
||||
<p>This does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the Android and iOS repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).</p>
|
||||
<p>Airbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the Android and iOS teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.</p>
|
||||
<p>This has solved most of the issues they had with the split repo approach. Leland did note that this does cause a higher strain on the version control servers, which may be an issue for smaller companies.</p>
|
||||
<p><img src="/react-native/blog/assets/rnmsf-august-2016-airbnb.jpg" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="the-navigation-problem"></a><a href="#the-navigation-problem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Navigation Problem</h3>
|
||||
|
||||
@@ -89,23 +89,23 @@
|
||||
<p>Up next, the first featured talk of the evening. <a href="https://twitter.com/clarler">Clarence Leung</a>, Senior Software Engineer at Netflix, presented his talk on Designing APIs for React Native. First he noted the two main types of libraries one may work on: components such as tab bars and date pickers, and libraries that provide access to native services such as the camera roll or in-app payments. There are two ways one may approach when building a library for use in React Native:</p>
|
||||
<ul>
|
||||
<li>Provide platform-specific components</li>
|
||||
<li>A cross-platform library with a similar API for both iOS and Android</li>
|
||||
<li>A cross-platform library with a similar API for both Android and iOS</li>
|
||||
</ul>
|
||||
<p>Each approach has its own considerations, and it’s up to you to determine what works best for your needs.</p>
|
||||
<p><strong>Approach #1</strong></p>
|
||||
<p>As an example of platform-specific components, Clarence talked about the DatePickerIOS and DatePickerAndroid from core React Native. On iOS, date pickers are rendered as part of the UI and can be easily embedded in an existing view, while date pickers on Android are presented modally. It makes sense to provide separate components in this case.</p>
|
||||
<p><strong>Approach #2</strong></p>
|
||||
<p>Photo pickers, on the other hand, are treated similarly on iOS and Android. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using <code>if</code> statements and the <code>Platform</code> component.</p>
|
||||
<p>Photo pickers, on the other hand, are treated similarly on Android and iOS. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using <code>if</code> statements and the <code>Platform</code> component.</p>
|
||||
<p>Regardless of which approach you settle on, it’s a good idea to minimize the API surface and build app-specific libraries. For example, iOS’s In-App Purchase framework supports one-time, consumable purchases, as well as renewable subscriptions. If your app will only need to support consumable purchases, you may get away with dropping support for subscriptions in your cross-platform library.</p>
|
||||
<p><img src="/react-native/blog/assets/rnmsf-august-2016-netflix.jpg" alt=""></p>
|
||||
<p>There was a brief Q&A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both iOS and Android.</p>
|
||||
<p>There was a brief Q&A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both Android and iOS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="bridging-the-gap-using-react-native-in-existing-codebases"></a><a href="#bridging-the-gap-using-react-native-in-existing-codebases" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bridging the Gap, Using React Native in Existing Codebases</h2>
|
||||
<p>The final talk of the night was by <a href="https://twitter.com/intelligibabble">Leland Richardson</a> from Airbnb. The talk was focused on the use of React Native in existing codebases. I already know how easy it is to write a new app from scratch using React Native, so I was very interested to hear about Airbnb’s experience adopting React Native in their existing native apps.</p>
|
||||
<p>Leland started off by talking about greenfield apps versus brownfield apps. Greenfield means to start a project without the need to consider any prior work. This is in contrast to brownfield projects where you need to take into account the existing project’s requirements, development processes, and all of the teams various needs.</p>
|
||||
<p>When you’re working on a greenfield app, the React Native CLI sets up a single repository for both iOS and Android and everything just works. The first challenge against using React Native at Airbnb was the fact that the iOS and Android app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.</p>
|
||||
<p>To get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the iOS and Android repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the iOS and Android repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across iOS and Android, as they work on the React Native repository directly.</p>
|
||||
<p>This does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the iOS and Android repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).</p>
|
||||
<p>Airbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the iOS and Android teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.</p>
|
||||
<p>When you’re working on a greenfield app, the React Native CLI sets up a single repository for both Android and iOS and everything just works. The first challenge against using React Native at Airbnb was the fact that the Android and iOS app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.</p>
|
||||
<p>To get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the Android and iOS repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the Android and iOS repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across Android and iOS, as they work on the React Native repository directly.</p>
|
||||
<p>This does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the Android and iOS repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).</p>
|
||||
<p>Airbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the Android and iOS teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.</p>
|
||||
<p>This has solved most of the issues they had with the split repo approach. Leland did note that this does cause a higher strain on the version control servers, which may be an issue for smaller companies.</p>
|
||||
<p><img src="/react-native/blog/assets/rnmsf-august-2016-airbnb.jpg" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="the-navigation-problem"></a><a href="#the-navigation-problem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Navigation Problem</h3>
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
</code></pre></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="gestures-and-animations"></a><a href="#gestures-and-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Gestures and Animations</h4>
|
||||
<p>In iOS and Android development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p>
|
||||
<p>In Android and iOS development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p>
|
||||
<p>A good example to illustrate gesture RTL support is <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a>.</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/rtl-demo-swipe-ltr.png" width="280" style="margin:10px">
|
||||
@@ -212,7 +212,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="limitations-and-future-plan"></a><a href="#limitations-and-future-plan" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limitations and Future Plan</h2>
|
||||
<p>The RTL support should cover most of the UX in your app; however, there are some limitations for now:</p>
|
||||
<ul>
|
||||
<li>Text alignment behaviors differ in iOS and Android
|
||||
<li>Text alignment behaviors differ in Android and iOS
|
||||
<ul>
|
||||
<li>In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned.</li>
|
||||
<li>In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment.</li>
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
</code></pre></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="gestures-and-animations"></a><a href="#gestures-and-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Gestures and Animations</h4>
|
||||
<p>In iOS and Android development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p>
|
||||
<p>In Android and iOS development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p>
|
||||
<p>A good example to illustrate gesture RTL support is <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a>.</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/rtl-demo-swipe-ltr.png" width="280" style="margin:10px">
|
||||
@@ -212,7 +212,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="limitations-and-future-plan"></a><a href="#limitations-and-future-plan" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limitations and Future Plan</h2>
|
||||
<p>The RTL support should cover most of the UX in your app; however, there are some limitations for now:</p>
|
||||
<ul>
|
||||
<li>Text alignment behaviors differ in iOS and Android
|
||||
<li>Text alignment behaviors differ in Android and iOS
|
||||
<ul>
|
||||
<li>In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned.</li>
|
||||
<li>In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment.</li>
|
||||
|
||||
@@ -104,7 +104,7 @@ Animated.spring(a, {
|
||||
</code></pre>
|
||||
<p>In this example, the inner image won't get stretched at all because the parent's scaling gets cancelled out. If you'd like to learn more, check out the <a href="/react-native/animations.md">Animations guide</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="dark-status-bars"></a><a href="#dark-status-bars" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Status Bars</h2>
|
||||
<p>A new <code>barStyle</code> value has been added to <code>StatusBar</code>: <code>dark-content</code>. With this addition, you can now use <a href="/react-native/statusbar.md#barstyle"><code>barStyle</code></a> on both iOS and Android. The behavior will now be the following:</p>
|
||||
<p>A new <code>barStyle</code> value has been added to <code>StatusBar</code>: <code>dark-content</code>. With this addition, you can now use <a href="/react-native/statusbar.md#barstyle"><code>barStyle</code></a> on both Android and iOS. The behavior will now be the following:</p>
|
||||
<ul>
|
||||
<li><code>default</code>: Use the platform default (light on iOS, dark on Android).</li>
|
||||
<li><code>light-content</code>: Use a light status bar with black text and icons.</li>
|
||||
|
||||
@@ -104,7 +104,7 @@ Animated.spring(a, {
|
||||
</code></pre>
|
||||
<p>In this example, the inner image won't get stretched at all because the parent's scaling gets cancelled out. If you'd like to learn more, check out the <a href="/react-native/animations.md">Animations guide</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="dark-status-bars"></a><a href="#dark-status-bars" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Status Bars</h2>
|
||||
<p>A new <code>barStyle</code> value has been added to <code>StatusBar</code>: <code>dark-content</code>. With this addition, you can now use <a href="/react-native/statusbar.md#barstyle"><code>barStyle</code></a> on both iOS and Android. The behavior will now be the following:</p>
|
||||
<p>A new <code>barStyle</code> value has been added to <code>StatusBar</code>: <code>dark-content</code>. With this addition, you can now use <a href="/react-native/statusbar.md#barstyle"><code>barStyle</code></a> on both Android and iOS. The behavior will now be the following:</p>
|
||||
<ul>
|
||||
<li><code>default</code>: Use the platform default (light on iOS, dark on Android).</li>
|
||||
<li><code>light-content</code>: Use a light status bar with black text and icons.</li>
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
<p>Example output:</p>
|
||||
<p><img src="/react-native/blog/assets/git-upgrade-output.png" alt=""></p>
|
||||
<p>You can also run <code>react-native-git-upgrade</code> with no arguments to upgrade to the latest version of React Native.</p>
|
||||
<p>We try to preserve your changes in iOS and Android build files, so you don't need to run <code>react-native link</code> after an upgrade.</p>
|
||||
<p>We try to preserve your changes in Android and iOS build files, so you don't need to run <code>react-native link</code> after an upgrade.</p>
|
||||
<p>We have designed the implementation to be as little intrusive as possible. It is entirely based on a local Git repository created on-the-fly in a temporary directory. It won't interfere with your project repository (no matter what VCS you use: Git, SVN, Mercurial, ... or none). Your sources are restored in case of unexpected errors.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="how-does-it-work"></a><a href="#how-does-it-work" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How does it work?</h2>
|
||||
<p>The key step is generating a Git patch. The patch contains all the changes made in the React Native templates between the version your app is using and the new version.</p>
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
<p>Example output:</p>
|
||||
<p><img src="/react-native/blog/assets/git-upgrade-output.png" alt=""></p>
|
||||
<p>You can also run <code>react-native-git-upgrade</code> with no arguments to upgrade to the latest version of React Native.</p>
|
||||
<p>We try to preserve your changes in iOS and Android build files, so you don't need to run <code>react-native link</code> after an upgrade.</p>
|
||||
<p>We try to preserve your changes in Android and iOS build files, so you don't need to run <code>react-native link</code> after an upgrade.</p>
|
||||
<p>We have designed the implementation to be as little intrusive as possible. It is entirely based on a local Git repository created on-the-fly in a temporary directory. It won't interfere with your project repository (no matter what VCS you use: Git, SVN, Mercurial, ... or none). Your sources are restored in case of unexpected errors.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="how-does-it-work"></a><a href="#how-does-it-work" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How does it work?</h2>
|
||||
<p>The key step is generating a Git patch. The patch contains all the changes made in the React Native templates between the version your app is using and the new version.</p>
|
||||
|
||||
@@ -101,9 +101,9 @@
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="microsoft"></a><a href="#microsoft" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Microsoft</h3>
|
||||
<ul>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the iOS and Android app stores.</li>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the Android and iOS app stores.</li>
|
||||
<li>While building the Skype app on React Native, we send pull requests to React Native in order to address bugs and missing features that we come across. So far, we've gotten about <a href="https://github.com/facebook/react-native/pulls?utf8=%E2%9C%93&q=is%3Apr%20author%3Arigdern%20">70 pull requests merged</a>.</li>
|
||||
<li>React Native enabled us to power both the iOS and Android Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="shoutem"></a><a href="#shoutem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Shoutem</h3>
|
||||
<ul>
|
||||
|
||||
@@ -101,9 +101,9 @@
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="microsoft"></a><a href="#microsoft" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Microsoft</h3>
|
||||
<ul>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the iOS and Android app stores.</li>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the Android and iOS app stores.</li>
|
||||
<li>While building the Skype app on React Native, we send pull requests to React Native in order to address bugs and missing features that we come across. So far, we've gotten about <a href="https://github.com/facebook/react-native/pulls?utf8=%E2%9C%93&q=is%3Apr%20author%3Arigdern%20">70 pull requests merged</a>.</li>
|
||||
<li>React Native enabled us to power both the iOS and Android Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="shoutem"></a><a href="#shoutem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Shoutem</h3>
|
||||
<ul>
|
||||
|
||||
@@ -131,7 +131,7 @@ export <span class="hljs-keyword">default</span> withAuthenticator(<span class="
|
||||
<p>AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an <a href="https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/">aws-exports file</a>. However, developers can also use the library independently with existing resources.</p>
|
||||
<p>For a deep dive into the philosophy and to see a full demo, check out the video from <a href="https://www.youtube.com/watch?v=vAjf3lyjf8c">AWS re:Invent</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="aws-appsync"></a><a href="#aws-appsync" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>AWS AppSync</h2>
|
||||
<p>Shortly after the launch of AWS Amplify, we also released <a href="https://aws.amazon.com/appsync/">AWS AppSync</a>. This is a fully managed GraphQL service that has both offline and real-time capabilities. Although you can use GraphQL in different client programming languages (including native iOS and Android), it's quite popular among React Native developers. This is because the data model fits nicely into a unidirectional data flow and component hierarchy.</p>
|
||||
<p>Shortly after the launch of AWS Amplify, we also released <a href="https://aws.amazon.com/appsync/">AWS AppSync</a>. This is a fully managed GraphQL service that has both offline and real-time capabilities. Although you can use GraphQL in different client programming languages (including native Android and iOS), it's quite popular among React Native developers. This is because the data model fits nicely into a unidirectional data flow and component hierarchy.</p>
|
||||
<p>AWS AppSync enables you to connect to resources in your own AWS account, meaning you own and control your data. This is done by using data sources, and the service supports <a href="https://aws.amazon.com/dynamodb/">Amazon DynamoDB</a>, <a href="https://aws.amazon.com/elasticsearch-service/">Amazon Elasticsearch</a>, and <a href="https://aws.amazon.com/lambda/">AWS Lambda</a>. This enables you to combine functionality (such as NoSQL and full-text search) in a single GraphQL API as a schema. This enables you to mix and match data sources. The AppSync service can also <a href="https://docs.aws.amazon.com/appsync/latest/devguide/provision-from-schema.html">provision from a schema</a>, so if you aren't familair with AWS services, you can write GraphQL SDL, click a button, and you're automatically up and running.</p>
|
||||
<p>The real-time functionality in AWS AppSync is controlled via <a href="http://graphql.org/blog/subscriptions-in-graphql-and-relay/">GraphQL subscriptions with a well-known, event-based pattern</a>. Because subscriptions in AWS AppSync are <a href="https://docs.aws.amazon.com/appsync/latest/devguide/real-time-data.html">controlled on the schema</a> with a GraphQL directive, and a schema can use any data source, this means you can trigger notifications from database operations with Amazon DynamoDB and Amazon Elasticsearch Service, or from other parts of your infrastructure with AWS Lambda.</p>
|
||||
<p>In a way similar to AWS Amplify, you can use <a href="https://docs.aws.amazon.com/appsync/latest/devguide/security.html">enterprise security features</a> on your GraphQL API with AWS AppSync. The service lets you get started quickly with API keys. However, as you roll to production it can transition to using AWS Identity and Access Management (IAM) or OIDC tokens from Amazon Cognito user pools. You can control access at the resolver level with policies on types. You can even use logical checks for <a href="https://docs.aws.amazon.com/appsync/latest/devguide/security.html#fine-grained-access-control">fine-grained access control</a> checks at run time, such as detecting if a user is the owner of a specific database resource. There are also capabilities around checking group membership for executing resolvers or individual database record access.</p>
|
||||
|
||||
@@ -131,7 +131,7 @@ export <span class="hljs-keyword">default</span> withAuthenticator(<span class="
|
||||
<p>AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an <a href="https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/">aws-exports file</a>. However, developers can also use the library independently with existing resources.</p>
|
||||
<p>For a deep dive into the philosophy and to see a full demo, check out the video from <a href="https://www.youtube.com/watch?v=vAjf3lyjf8c">AWS re:Invent</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="aws-appsync"></a><a href="#aws-appsync" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>AWS AppSync</h2>
|
||||
<p>Shortly after the launch of AWS Amplify, we also released <a href="https://aws.amazon.com/appsync/">AWS AppSync</a>. This is a fully managed GraphQL service that has both offline and real-time capabilities. Although you can use GraphQL in different client programming languages (including native iOS and Android), it's quite popular among React Native developers. This is because the data model fits nicely into a unidirectional data flow and component hierarchy.</p>
|
||||
<p>Shortly after the launch of AWS Amplify, we also released <a href="https://aws.amazon.com/appsync/">AWS AppSync</a>. This is a fully managed GraphQL service that has both offline and real-time capabilities. Although you can use GraphQL in different client programming languages (including native Android and iOS), it's quite popular among React Native developers. This is because the data model fits nicely into a unidirectional data flow and component hierarchy.</p>
|
||||
<p>AWS AppSync enables you to connect to resources in your own AWS account, meaning you own and control your data. This is done by using data sources, and the service supports <a href="https://aws.amazon.com/dynamodb/">Amazon DynamoDB</a>, <a href="https://aws.amazon.com/elasticsearch-service/">Amazon Elasticsearch</a>, and <a href="https://aws.amazon.com/lambda/">AWS Lambda</a>. This enables you to combine functionality (such as NoSQL and full-text search) in a single GraphQL API as a schema. This enables you to mix and match data sources. The AppSync service can also <a href="https://docs.aws.amazon.com/appsync/latest/devguide/provision-from-schema.html">provision from a schema</a>, so if you aren't familair with AWS services, you can write GraphQL SDL, click a button, and you're automatically up and running.</p>
|
||||
<p>The real-time functionality in AWS AppSync is controlled via <a href="http://graphql.org/blog/subscriptions-in-graphql-and-relay/">GraphQL subscriptions with a well-known, event-based pattern</a>. Because subscriptions in AWS AppSync are <a href="https://docs.aws.amazon.com/appsync/latest/devguide/real-time-data.html">controlled on the schema</a> with a GraphQL directive, and a schema can use any data source, this means you can trigger notifications from database operations with Amazon DynamoDB and Amazon Elasticsearch Service, or from other parts of your infrastructure with AWS Lambda.</p>
|
||||
<p>In a way similar to AWS Amplify, you can use <a href="https://docs.aws.amazon.com/appsync/latest/devguide/security.html">enterprise security features</a> on your GraphQL API with AWS AppSync. The service lets you get started quickly with API keys. However, as you roll to production it can transition to using AWS Identity and Access Management (IAM) or OIDC tokens from Amazon Cognito user pools. You can control access at the resolver level with policies on types. You can even use logical checks for <a href="https://docs.aws.amazon.com/appsync/latest/devguide/security.html#fine-grained-access-control">fine-grained access control</a> checks at run time, such as detecting if a user is the owner of a specific database resource. There are also capabilities around checking group membership for executing resolvers or individual database record access.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Built with React Native - The Build.com app · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Android apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Built with React Native - The Build.com app · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2018/04/09/build-com-app"/><meta property="og:description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Android apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Built with React Native - The Build.com app · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and iOS apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Built with React Native - The Build.com app · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2018/04/09/build-com-app"/><meta property="og:description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and iOS apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></h1><p class="post-meta">April 9, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener">Garrett McCullough</a>Senior Mobile Engineer</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/955503100785172486/UrMKkQXc_400x400.jpg" alt="Garrett McCullough"/></a></div></div></header><div><span><p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Android apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0.</p>
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></h1><p class="post-meta">April 9, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener">Garrett McCullough</a>Senior Mobile Engineer</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/955503100785172486/UrMKkQXc_400x400.jpg" alt="Garrett McCullough"/></a></div></div></header><div><span><p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and iOS apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0.</p>
|
||||
<p>You can check out the app at <a href="https://www.build.com/app">https://www.build.com/app</a>.</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/build-com-blog-image.jpg" />
|
||||
@@ -78,7 +78,7 @@
|
||||
<p>A few standout features you might not expect include:</p>
|
||||
<ol>
|
||||
<li>3D models available for around 40 products with 90 finishes</li>
|
||||
<li>Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App store for AR Shopping! AR is now available for iOS and Android!</li>
|
||||
<li>Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App store for AR Shopping! AR is now available for Android and iOS!</li>
|
||||
<li>Collaborative project management features that allow people to put together shopping lists for the different phases of their project and collaborate around selection</li>
|
||||
</ol>
|
||||
<p>We’re working on many new and exciting features that will continue to improve our app experience including the next phase of Immersive Shopping with AR.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Built with React Native - The Build.com app · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Android apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Built with React Native - The Build.com app · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2018/04/09/build-com-app"/><meta property="og:description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Android apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Built with React Native - The Build.com app · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and iOS apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Built with React Native - The Build.com app · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/blog/2018/04/09/build-com-app"/><meta property="og:description" content="[Build.com](https://www.build.com/), headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and iOS apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></h1><p class="post-meta">April 9, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener">Garrett McCullough</a>Senior Mobile Engineer</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/955503100785172486/UrMKkQXc_400x400.jpg" alt="Garrett McCullough"/></a></div></div></header><div><span><p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Android apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0.</p>
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></h1><p class="post-meta">April 9, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener">Garrett McCullough</a>Senior Mobile Engineer</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/955503100785172486/UrMKkQXc_400x400.jpg" alt="Garrett McCullough"/></a></div></div></header><div><span><p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and iOS apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0.</p>
|
||||
<p>You can check out the app at <a href="https://www.build.com/app">https://www.build.com/app</a>.</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/build-com-blog-image.jpg" />
|
||||
@@ -78,7 +78,7 @@
|
||||
<p>A few standout features you might not expect include:</p>
|
||||
<ol>
|
||||
<li>3D models available for around 40 products with 90 finishes</li>
|
||||
<li>Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App store for AR Shopping! AR is now available for iOS and Android!</li>
|
||||
<li>Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App store for AR Shopping! AR is now available for Android and iOS!</li>
|
||||
<li>Collaborative project management features that allow people to put together shopping lists for the different phases of their project and collaborate around selection</li>
|
||||
</ol>
|
||||
<p>We’re working on many new and exciting features that will continue to improve our app experience including the next phase of Immersive Shopping with AR.</p>
|
||||
|
||||
+2
-2
@@ -193,7 +193,7 @@
|
||||
<link href="https://facebook.github.io/react-native/blog/2018/04/09/build-com-app.html">
|
||||
</link>
|
||||
<updated>2018-04-09T06:00:00Z</updated>
|
||||
<summary type="html"><![CDATA[<p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Andro...</p>]]></summary>
|
||||
<summary type="html"><![CDATA[<p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and i...</p>]]></summary>
|
||||
<author>
|
||||
<name>Garrett McCullough</name>
|
||||
<uri>https://twitter.com/gwmccull</uri>
|
||||
@@ -481,7 +481,7 @@
|
||||
<link href="https://facebook.github.io/react-native/blog/2016/03/28/dive-into-react-native-performance.html">
|
||||
</link>
|
||||
<updated>2016-03-28T06:00:00Z</updated>
|
||||
<summary type="html"><![CDATA[<p>React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across ...</p>]]></summary>
|
||||
<summary type="html"><![CDATA[<p>React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across ...</p>]]></summary>
|
||||
<author>
|
||||
<name>Pieter De Baets</name>
|
||||
<uri>https://github.com/javache</uri>
|
||||
|
||||
+2
-2
@@ -122,7 +122,7 @@
|
||||
<link>https://facebook.github.io/react-native/blog/2018/04/09/build-com-app.html</link>
|
||||
<guid>https://facebook.github.io/react-native/blog/2018/04/09/build-com-app.html</guid>
|
||||
<pubDate>Mon, 09 Apr 2018 06:00:00 GMT</pubDate>
|
||||
<description><![CDATA[<p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Andro...</p>]]></description>
|
||||
<description><![CDATA[<p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and i...</p>]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[Building <InputAccessoryView> For React Native]]></title>
|
||||
@@ -290,7 +290,7 @@
|
||||
<link>https://facebook.github.io/react-native/blog/2016/03/28/dive-into-react-native-performance.html</link>
|
||||
<guid>https://facebook.github.io/react-native/blog/2016/03/28/dive-into-react-native-performance.html</guid>
|
||||
<pubDate>Mon, 28 Mar 2016 06:00:00 GMT</pubDate>
|
||||
<description><![CDATA[<p>React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across ...</p>]]></description>
|
||||
<description><![CDATA[<p>React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across ...</p>]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[Introducing Hot Reloading]]></title>
|
||||
|
||||
@@ -433,7 +433,7 @@ it(<span class="hljs-string">'renders correctly with defaults'</span>, <span cla
|
||||
<h2><a class="anchor" aria-hidden="true" id="next-steps"></a><a href="#next-steps" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Next Steps</h2>
|
||||
<p>Check out the official <a href="https://reactjs.org/tutorial/tutorial.html">React tutorial</a> and state-management library <a href="http://redux.js.org">Redux</a>. These resources can be helpful when writing React Native apps. Additionally, you may want to look at <a href="https://microsoft.github.io/reactxp/">ReactXP</a>, a component library written entirely in TypeScript that supports both React on the web as well as React Native.</p>
|
||||
<p>Have fun in a more type-safe React Native development environment!</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></h1><p class="post-meta">April 9, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener">Garrett McCullough</a>Senior Mobile Engineer</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/955503100785172486/UrMKkQXc_400x400.jpg" alt="Garrett McCullough"/></a></div></div></header><article class="post-content"><div><span><p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique iOS and Android apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></h1><p class="post-meta">April 9, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener">Garrett McCullough</a>Senior Mobile Engineer</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/gwmccull" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/955503100785172486/UrMKkQXc_400x400.jpg" alt="Garrett McCullough"/></a></div></div></header><article class="post-content"><div><span><p><a href="https://www.build.com/">Build.com</a>, headquartered in Chico, California, is one of the largest online retailers for home improvement items. The team has had a strong web-centric business for 18 years and began thinking about a mobile App in 2015. Building unique Android and iOS apps wasn’t practical due to our small team and limited native experience. Instead, we decided to take a risk on the very new React Native framework. Our initial commit was on August 12, 2015 using React Native v0.8.0! We were live in both App Stores on October 15, 2016. Over the last two years, we’ve continued to upgrade and expand the app. We are currently on React Native version 0.53.0.</p>
|
||||
<p>You can check out the app at <a href="https://www.build.com/app">https://www.build.com/app</a>.</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/build-com-blog-image.jpg" />
|
||||
@@ -443,7 +443,7 @@ it(<span class="hljs-string">'renders correctly with defaults'</span>, <span cla
|
||||
<p>A few standout features you might not expect include:</p>
|
||||
<ol>
|
||||
<li>3D models available for around 40 products with 90 finishes</li>
|
||||
<li>Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App store for AR Shopping! AR is now available for iOS and Android!</li>
|
||||
<li>Augmented Reality (AR) to allow the user to see how lights and faucets will look in their home at 98% size accuracy. The Build.com React Native App is featured in the Apple App store for AR Shopping! AR is now available for Android and iOS!</li>
|
||||
<li>Collaborative project management features that allow people to put together shopping lists for the different phases of their project and collaborate around selection</li>
|
||||
</ol>
|
||||
<p>We’re working on many new and exciting features that will continue to improve our app experience including the next phase of Immersive Shopping with AR.</p>
|
||||
@@ -623,7 +623,7 @@ export <span class="hljs-keyword">default</span> withAuthenticator(<span class="
|
||||
<p>AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an <a href="https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/">aws-exports file</a>. However, developers can also use the library independently with existing resources.</p>
|
||||
<p>For a deep dive into the philosophy and to see a full demo, check out the video from <a href="https://www.youtube.com/watch?v=vAjf3lyjf8c">AWS re:Invent</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="aws-appsync"></a><a href="#aws-appsync" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>AWS AppSync</h2>
|
||||
<p>Shortly after the launch of AWS Amplify, we also released <a href="https://aws.amazon.com/appsync/">AWS AppSync</a>. This is a fully managed GraphQL service that has both offline and real-time capabilities. Although you can use GraphQL in different client programming languages (including native iOS and Android), it's quite popular among React Native developers. This is because the data model fits nicely into a unidirectional data flow and component hierarchy.</p>
|
||||
<p>Shortly after the launch of AWS Amplify, we also released <a href="https://aws.amazon.com/appsync/">AWS AppSync</a>. This is a fully managed GraphQL service that has both offline and real-time capabilities. Although you can use GraphQL in different client programming languages (including native Android and iOS), it's quite popular among React Native developers. This is because the data model fits nicely into a unidirectional data flow and component hierarchy.</p>
|
||||
<p>AWS AppSync enables you to connect to resources in your own AWS account, meaning you own and control your data. This is done by using data sources, and the service supports <a href="https://aws.amazon.com/dynamodb/">Amazon DynamoDB</a>, <a href="https://aws.amazon.com/elasticsearch-service/">Amazon Elasticsearch</a>, and <a href="https://aws.amazon.com/lambda/">AWS Lambda</a>. This enables you to combine functionality (such as NoSQL and full-text search) in a single GraphQL API as a schema. This enables you to mix and match data sources. The AppSync service can also <a href="https://docs.aws.amazon.com/appsync/latest/devguide/provision-from-schema.html">provision from a schema</a>, so if you aren't familair with AWS services, you can write GraphQL SDL, click a button, and you're automatically up and running.</p>
|
||||
<p>The real-time functionality in AWS AppSync is controlled via <a href="http://graphql.org/blog/subscriptions-in-graphql-and-relay/">GraphQL subscriptions with a well-known, event-based pattern</a>. Because subscriptions in AWS AppSync are <a href="https://docs.aws.amazon.com/appsync/latest/devguide/real-time-data.html">controlled on the schema</a> with a GraphQL directive, and a schema can use any data source, this means you can trigger notifications from database operations with Amazon DynamoDB and Amazon Elasticsearch Service, or from other parts of your infrastructure with AWS Lambda.</p>
|
||||
<p>In a way similar to AWS Amplify, you can use <a href="https://docs.aws.amazon.com/appsync/latest/devguide/security.html">enterprise security features</a> on your GraphQL API with AWS AppSync. The service lets you get started quickly with API keys. However, as you roll to production it can transition to using AWS Identity and Access Management (IAM) or OIDC tokens from Amazon Cognito user pools. You can control access at the resolver level with policies on types. You can even use logical checks for <a href="https://docs.aws.amazon.com/appsync/latest/devguide/security.html#fine-grained-access-control">fine-grained access control</a> checks at run time, such as detecting if a user is the owner of a specific database resource. There are also capabilities around checking group membership for executing resolvers or individual database record access.</p>
|
||||
|
||||
@@ -197,9 +197,9 @@
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="microsoft"></a><a href="#microsoft" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Microsoft</h3>
|
||||
<ul>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the iOS and Android app stores.</li>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the Android and iOS app stores.</li>
|
||||
<li>While building the Skype app on React Native, we send pull requests to React Native in order to address bugs and missing features that we come across. So far, we've gotten about <a href="https://github.com/facebook/react-native/pulls?utf8=%E2%9C%93&q=is%3Apr%20author%3Arigdern%20">70 pull requests merged</a>.</li>
|
||||
<li>React Native enabled us to power both the iOS and Android Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="shoutem"></a><a href="#shoutem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Shoutem</h3>
|
||||
<ul>
|
||||
|
||||
+12
-12
@@ -106,7 +106,7 @@ react-<span class="hljs-keyword">native</span>-git-<span class="hljs-keyword">up
|
||||
<p>Example output:</p>
|
||||
<p><img src="/react-native/blog/assets/git-upgrade-output.png" alt=""></p>
|
||||
<p>You can also run <code>react-native-git-upgrade</code> with no arguments to upgrade to the latest version of React Native.</p>
|
||||
<p>We try to preserve your changes in iOS and Android build files, so you don't need to run <code>react-native link</code> after an upgrade.</p>
|
||||
<p>We try to preserve your changes in Android and iOS build files, so you don't need to run <code>react-native link</code> after an upgrade.</p>
|
||||
<p>We have designed the implementation to be as little intrusive as possible. It is entirely based on a local Git repository created on-the-fly in a temporary directory. It won't interfere with your project repository (no matter what VCS you use: Git, SVN, Mercurial, ... or none). Your sources are restored in case of unexpected errors.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="how-does-it-work"></a><a href="#how-does-it-work" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How does it work?</h2>
|
||||
<p>The key step is generating a Git patch. The patch contains all the changes made in the React Native templates between the version your app is using and the new version.</p>
|
||||
@@ -225,7 +225,7 @@ Animated.spring(a, {
|
||||
</code></pre>
|
||||
<p>In this example, the inner image won't get stretched at all because the parent's scaling gets cancelled out. If you'd like to learn more, check out the <a href="/react-native/animations.md">Animations guide</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="dark-status-bars"></a><a href="#dark-status-bars" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Status Bars</h2>
|
||||
<p>A new <code>barStyle</code> value has been added to <code>StatusBar</code>: <code>dark-content</code>. With this addition, you can now use <a href="/react-native/statusbar.md#barstyle"><code>barStyle</code></a> on both iOS and Android. The behavior will now be the following:</p>
|
||||
<p>A new <code>barStyle</code> value has been added to <code>StatusBar</code>: <code>dark-content</code>. With this addition, you can now use <a href="/react-native/statusbar.md#barstyle"><code>barStyle</code></a> on both Android and iOS. The behavior will now be the following:</p>
|
||||
<ul>
|
||||
<li><code>default</code>: Use the platform default (light on iOS, dark on Android).</li>
|
||||
<li><code>light-content</code>: Use a light status bar with black text and icons.</li>
|
||||
@@ -318,7 +318,7 @@ $ react-native upgrade
|
||||
</code></pre></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="gestures-and-animations"></a><a href="#gestures-and-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Gestures and Animations</h4>
|
||||
<p>In iOS and Android development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p>
|
||||
<p>In Android and iOS development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p>
|
||||
<p>A good example to illustrate gesture RTL support is <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a>.</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/rtl-demo-swipe-ltr.png" width="280" style="margin:10px">
|
||||
@@ -382,7 +382,7 @@ $ react-native upgrade
|
||||
<h2><a class="anchor" aria-hidden="true" id="limitations-and-future-plan"></a><a href="#limitations-and-future-plan" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limitations and Future Plan</h2>
|
||||
<p>The RTL support should cover most of the UX in your app; however, there are some limitations for now:</p>
|
||||
<ul>
|
||||
<li>Text alignment behaviors differ in iOS and Android
|
||||
<li>Text alignment behaviors differ in Android and iOS
|
||||
<ul>
|
||||
<li>In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned.</li>
|
||||
<li>In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment.</li>
|
||||
@@ -418,23 +418,23 @@ $ react-native upgrade
|
||||
<p>Up next, the first featured talk of the evening. <a href="https://twitter.com/clarler">Clarence Leung</a>, Senior Software Engineer at Netflix, presented his talk on Designing APIs for React Native. First he noted the two main types of libraries one may work on: components such as tab bars and date pickers, and libraries that provide access to native services such as the camera roll or in-app payments. There are two ways one may approach when building a library for use in React Native:</p>
|
||||
<ul>
|
||||
<li>Provide platform-specific components</li>
|
||||
<li>A cross-platform library with a similar API for both iOS and Android</li>
|
||||
<li>A cross-platform library with a similar API for both Android and iOS</li>
|
||||
</ul>
|
||||
<p>Each approach has its own considerations, and it’s up to you to determine what works best for your needs.</p>
|
||||
<p><strong>Approach #1</strong></p>
|
||||
<p>As an example of platform-specific components, Clarence talked about the DatePickerIOS and DatePickerAndroid from core React Native. On iOS, date pickers are rendered as part of the UI and can be easily embedded in an existing view, while date pickers on Android are presented modally. It makes sense to provide separate components in this case.</p>
|
||||
<p><strong>Approach #2</strong></p>
|
||||
<p>Photo pickers, on the other hand, are treated similarly on iOS and Android. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using <code>if</code> statements and the <code>Platform</code> component.</p>
|
||||
<p>Photo pickers, on the other hand, are treated similarly on Android and iOS. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using <code>if</code> statements and the <code>Platform</code> component.</p>
|
||||
<p>Regardless of which approach you settle on, it’s a good idea to minimize the API surface and build app-specific libraries. For example, iOS’s In-App Purchase framework supports one-time, consumable purchases, as well as renewable subscriptions. If your app will only need to support consumable purchases, you may get away with dropping support for subscriptions in your cross-platform library.</p>
|
||||
<p><img src="/react-native/blog/assets/rnmsf-august-2016-netflix.jpg" alt=""></p>
|
||||
<p>There was a brief Q&A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both iOS and Android.</p>
|
||||
<p>There was a brief Q&A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both Android and iOS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="bridging-the-gap-using-react-native-in-existing-codebases"></a><a href="#bridging-the-gap-using-react-native-in-existing-codebases" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bridging the Gap, Using React Native in Existing Codebases</h2>
|
||||
<p>The final talk of the night was by <a href="https://twitter.com/intelligibabble">Leland Richardson</a> from Airbnb. The talk was focused on the use of React Native in existing codebases. I already know how easy it is to write a new app from scratch using React Native, so I was very interested to hear about Airbnb’s experience adopting React Native in their existing native apps.</p>
|
||||
<p>Leland started off by talking about greenfield apps versus brownfield apps. Greenfield means to start a project without the need to consider any prior work. This is in contrast to brownfield projects where you need to take into account the existing project’s requirements, development processes, and all of the teams various needs.</p>
|
||||
<p>When you’re working on a greenfield app, the React Native CLI sets up a single repository for both iOS and Android and everything just works. The first challenge against using React Native at Airbnb was the fact that the iOS and Android app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.</p>
|
||||
<p>To get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the iOS and Android repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the iOS and Android repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across iOS and Android, as they work on the React Native repository directly.</p>
|
||||
<p>This does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the iOS and Android repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).</p>
|
||||
<p>Airbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the iOS and Android teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.</p>
|
||||
<p>When you’re working on a greenfield app, the React Native CLI sets up a single repository for both Android and iOS and everything just works. The first challenge against using React Native at Airbnb was the fact that the Android and iOS app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.</p>
|
||||
<p>To get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the Android and iOS repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the Android and iOS repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across Android and iOS, as they work on the React Native repository directly.</p>
|
||||
<p>This does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the Android and iOS repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).</p>
|
||||
<p>Airbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the Android and iOS teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.</p>
|
||||
<p>This has solved most of the issues they had with the split repo approach. Leland did note that this does cause a higher strain on the version control servers, which may be an issue for smaller companies.</p>
|
||||
<p><img src="/react-native/blog/assets/rnmsf-august-2016-airbnb.jpg" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="the-navigation-problem"></a><a href="#the-navigation-problem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Navigation Problem</h3>
|
||||
@@ -515,7 +515,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'ScratchPad'</span>, ()
|
||||
<blockquote>
|
||||
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/">Facebook Code</a>.</p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></h1><p class="post-meta">March 28, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener">Pieter De Baets</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/5676?v=3&s=460" alt="Pieter De Baets"/></a></div></div></header><article class="post-content"><div><span><p>React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></h1><p class="post-meta">March 28, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener">Pieter De Baets</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/5676?v=3&s=460" alt="Pieter De Baets"/></a></div></div></header><article class="post-content"><div><span><p>React Native allows you to build Android and iOS apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="why-the-hurry"></a><a href="#why-the-hurry" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why the hurry?</h2>
|
||||
<p>With an app that runs faster, content loads quickly, which means people get more time to interact with it, and smooth animations make the app enjoyable to use. In emerging markets, where <a href="https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/">2011 class phones</a> on <a href="https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/">2G networks</a> are the majority, a focus on performance can make the difference between an app that is usable and one that isn't.</p>
|
||||
<p>Since releasing React Native on <a href="https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html">iOS</a> and on <a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/">Android</a>, we have been improving list view scrolling performance, memory efficiency, UI responsiveness, and app startup time. Startup sets the first impression of an app and stresses all parts of the framework, so it is the most rewarding and challenging problem to tackle.</p>
|
||||
|
||||
@@ -208,7 +208,7 @@
|
||||
<p>If you are interested in helping making hot reloading better, I encourage you to read <a href="https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.jmivpvmz4">Dan Abramov's post around the future of hot reloading</a> and to contribute. For example, Johny Days is going to <a href="https://github.com/facebook/react-native/pull/6179">make it work with multiple connected clients</a>. We're relying on you all to maintain and improve this feature.</p>
|
||||
<p>With React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2015/11/23/making-react-native-apps-accessible">Making React Native apps accessible</a></h1><p class="post-meta">November 23, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener">Georgiy Kassabli</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener"><img src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A" alt="Georgiy Kassabli"/></a></div></div></header><article class="post-content"><div><span><p>With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.</p>
|
||||
<p>For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the iOS and Android APIs. If you've developed accessible applications for the web, iOS, or Android before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element <em>accessible</em> (therefore exposed to assistive technology) and use <em>accessibilityLabel</em> to provide a string description for the element:</p>
|
||||
<p>For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the Android and iOS APIs. If you've developed accessible applications for Android, iOS, or the web before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element <em>accessible</em> (therefore exposed to assistive technology) and use <em>accessibilityLabel</em> to provide a string description for the element:</p>
|
||||
<pre><code class="hljs"><View accessible={<span class="hljs-literal">true</span>} <span class="hljs-attribute">accessibilityLabel</span>=”This is<span class="hljs-built_in"> simple </span>view”>
|
||||
</code></pre>
|
||||
<p>Let's walk through a slightly more involved application of the React AX API by looking at one of Facebook's own React-powered products: the <strong>Ads Manager app</strong>.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.10/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.10/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.10/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.10/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.10/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.10/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.10/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.10/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on iOS and Android. Example:</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on Android and iOS. Example:</p>
|
||||
<pre><code class="hljs"><Picker
|
||||
selectedValue={this.state.language}
|
||||
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on iOS and Android. Example:</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.10/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.10/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on Android and iOS. Example:</p>
|
||||
<pre><code class="hljs"><Picker
|
||||
selectedValue={this.state.language}
|
||||
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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 iOS and Android.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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.</p>
|
||||
<p>React Native provides two ways to organize your code and separate it by platform:</p>
|
||||
<ul>
|
||||
<li>Using the <a href="/react-native/docs/0.10/platform-specific-code#platform-module"><code>Platform</code> module</a>.</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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 iOS and Android.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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.</p>
|
||||
<p>React Native provides two ways to organize your code and separate it by platform:</p>
|
||||
<ul>
|
||||
<li>Using the <a href="/react-native/docs/0.10/platform-specific-code#platform-module"><code>Platform</code> module</a>.</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.11/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.11/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.11/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.11/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.11/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.11/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.11/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.11/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.11/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.11/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.11/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.11/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.11/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.11/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on iOS and Android. Example:</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on Android and iOS. Example:</p>
|
||||
<pre><code class="hljs"><Picker
|
||||
selectedValue={this.state.language}
|
||||
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on iOS and Android. Example:</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.11/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.11/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on Android and iOS. Example:</p>
|
||||
<pre><code class="hljs"><Picker
|
||||
selectedValue={this.state.language}
|
||||
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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 iOS and Android.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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.</p>
|
||||
<p>React Native provides two ways to organize your code and separate it by platform:</p>
|
||||
<ul>
|
||||
<li>Using the <a href="/react-native/docs/0.11/platform-specific-code#platform-module"><code>Platform</code> module</a>.</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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 iOS and Android.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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.</p>
|
||||
<p>React Native provides two ways to organize your code and separate it by platform:</p>
|
||||
<ul>
|
||||
<li>Using the <a href="/react-native/docs/0.11/platform-specific-code#platform-module"><code>Platform</code> module</a>.</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.12/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.12/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.12/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.12/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.12/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.12/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.12/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.12/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.12/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.12/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.12/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.12/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.12/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.12/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on iOS and Android. Example:</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on Android and iOS. Example:</p>
|
||||
<pre><code class="hljs"><Picker
|
||||
selectedValue={this.state.language}
|
||||
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on iOS and Android. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Picker · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Picker · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Renders the native picker component on Android and iOS. Example:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on iOS and Android. Example:</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.12/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.12/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/picker.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Picker</h1></header><article><div><span><p>Renders the native picker component on Android and iOS. Example:</p>
|
||||
<pre><code class="hljs"><Picker
|
||||
selectedValue={this.state.language}
|
||||
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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 iOS and Android.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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.</p>
|
||||
<p>React Native provides two ways to organize your code and separate it by platform:</p>
|
||||
<ul>
|
||||
<li>Using the <a href="/react-native/docs/0.12/platform-specific-code#platform-module"><code>Platform</code> module</a>.</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 iOS and Android."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Platform Specific Code · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="When building a cross-platform app, you'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 name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Platform Specific Code · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="When building a cross-platform app, you'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 name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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 iOS and Android.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/platform-specific-code.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Platform Specific Code</h1></header><article><div><span><p>When building a cross-platform app, you'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.</p>
|
||||
<p>React Native provides two ways to organize your code and separate it by platform:</p>
|
||||
<ul>
|
||||
<li>Using the <a href="/react-native/docs/0.12/platform-specific-code#platform-module"><code>Platform</code> module</a>.</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.13/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.13/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (iOS and Android)"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (iOS and Android)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Accessibility · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Native App Accessibility (Android and iOS)"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Accessibility · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="## Native App Accessibility (Android and iOS)"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,8 +68,8 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-ios-and-android"></a><a href="#native-app-accessibility-ios-and-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (iOS and Android)</h2>
|
||||
<p>Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/accessibility.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Accessibility</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="native-app-accessibility-android-and-ios"></a><a href="#native-app-accessibility-android-and-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native App Accessibility (Android and iOS)</h2>
|
||||
<p>Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.</p>
|
||||
<p>In addition to this documentation, you might find <a href="https://engineering.fb.com/ios/making-react-native-apps-accessible/">this blog post</a> about React Native accessibility to be useful.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="making-apps-accessible"></a><a href="#making-apps-accessible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making Apps Accessible</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility properties</h3>
|
||||
@@ -307,7 +307,7 @@ adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessi
|
||||
<span class="hljs-comment"># enable</span>
|
||||
adb shell<span class="hljs-built_in"> settings </span>put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.13/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-ios-and-android">Native App Accessibility (iOS and Android)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/animations"><span class="arrow-prev">← </span><span>Animations</span></a><a class="docs-next button" href="/react-native/docs/0.13/improvingux"><span>Improving User Experience</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-app-accessibility-android-and-ios">Native App Accessibility (Android and iOS)</a></li><li><a href="#making-apps-accessible">Making Apps Accessible</a><ul class="toc-headings"><li><a href="#accessibility-properties">Accessibility properties</a></li><li><a href="#accessibility-actions">Accessibility Actions</a></li><li><a href="#checking-if-a-screen-reader-is-enabled">Checking if a Screen Reader is Enabled</a></li><li><a href="#sending-accessibility-events-android">Sending Accessibility Events (Android)</a></li></ul></li><li><a href="#testing-voiceover-support-ios">Testing VoiceOver Support (iOS)</a></li><li><a href="#testing-talkback-support-android">Testing TalkBack Support (Android)</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.13/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.13/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.13/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.13/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.13/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.13/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/alert.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Alert</h1></header><article><div><span><p>Use <code>Alert</code> to display an alert dialog.</p>
|
||||
<p>This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.13/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see <a href="/react-native/docs/0.13/alertios"><code>AlertIOS</code></a>, as entering text in an alert is common on iOS only.</p>
|
||||
<p>Optionally provide a list of buttons. Tapping any button will fire the respective <code>onPress</code> callback, and dismiss the alert. If no buttons are provided, a single 'OK' button will be displayed by default.</p>
|
||||
<p>On iOS, you can specify any number of buttons.</p>
|
||||
<p>On Android, at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:</p>
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional <code>options</code> parameter, with an <code>onDismiss</code> callback property <code>{ onDismiss: () => {} }</code>.</p>
|
||||
<p>Alternatively, the dismissing behavior can be disabled altogether by providing an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>, i.e. <code>{ cancelable: false }</code></p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both iOS <span class="hljs-keyword">and</span> Android
|
||||
<pre><code class="hljs"><span class="hljs-regexp">//</span> Works <span class="hljs-literal">on</span> both Android <span class="hljs-keyword">and</span> iOS
|
||||
Alert.alert(
|
||||
<span class="hljs-string">'Alert Title'</span>,
|
||||
<span class="hljs-string">'My Alert Msg'</span>,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.13/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.13/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.13/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.13/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.13/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Clipboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Clipboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Clipboard` gives you an interface for setting and getting content from Clipboard on both Android and iOS"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -12,7 +12,7 @@
|
||||
{"zIndex":100}
|
||||
)
|
||||
});
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.13/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.13/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.13/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.13/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both Android and iOS</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.13/clipboard#getstring"><code>getString</code></a></li>
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<div class="component">
|
||||
<a href="./picker">
|
||||
<h3>Picker</h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
<p>Renders the native picker component on Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="component">
|
||||
<a href="./clipboard">
|
||||
<h3>Clipboard</h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both Android and iOS.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="component">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -118,7 +118,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/images.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<p>React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
@@ -88,7 +88,7 @@
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Same system on Android and iOS.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.13/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.13/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -69,8 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.13/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use <a href="/react-native/docs/0.13/navigation#react-navigation">React Navigation</a>. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
|
||||
<p>The first step is to install in your project:</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Navigator · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Navigator · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`Navigator` handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using `NavigatorIOS` as it leverages native UIKit navigation."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user