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 a2c2216089627f330c9fe39d78e4cc768bb26e18
This commit is contained in:
Website Deployment Script
@@ -96,7 +96,7 @@
|
||||
</code></pre>
|
||||
<p>In the above example, the <code>accessibilityLabel</code> on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityhint-ios-android"></a><a href="#accessibilityhint-ios-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>accessibilityHint (iOS, Android)</h4>
|
||||
<p>An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.</p>
|
||||
<p>An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.</p>
|
||||
<p>To use, set the <code>accessibilityHint</code> property to a custom string on your View, Text or Touchable:</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">TouchableOpacity</span></span>
|
||||
<span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
@@ -199,7 +199,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-actions"></a><a href="#accessibility-actions" 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 Actions</h3>
|
||||
<p>Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:</p>
|
||||
<ul>
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
</code></pre>
|
||||
<p>In the above example, the <code>accessibilityLabel</code> on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityhint-ios-android"></a><a href="#accessibilityhint-ios-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>accessibilityHint (iOS, Android)</h4>
|
||||
<p>An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.</p>
|
||||
<p>An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.</p>
|
||||
<p>To use, set the <code>accessibilityHint</code> property to a custom string on your View, Text or Touchable:</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">TouchableOpacity</span></span>
|
||||
<span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
@@ -199,7 +199,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-actions"></a><a href="#accessibility-actions" 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 Actions</h3>
|
||||
<p>Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:</p>
|
||||
<ul>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><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>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><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,8 +12,8 @@
|
||||
{"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/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The simplest workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</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/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The most basic workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
|
||||
<span class="token comment">// Animate value over time</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// The value to drive</span>
|
||||
@@ -34,7 +34,7 @@
|
||||
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.10/easing">easing functions</a>.</li>
|
||||
</ul>
|
||||
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
|
||||
@@ -52,7 +52,7 @@
|
||||
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.10/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" 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>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<p>Only animatable components can be animated. These components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
|
||||
</ul>
|
||||
@@ -71,7 +71,7 @@
|
||||
<li><a href="/react-native/docs/0.10/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.10/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.10/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" 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>Combining animated values</h3>
|
||||
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
|
||||
@@ -208,14 +208,14 @@
|
||||
</table>
|
||||
<p><code>config</code> is an object that may have the following options.</p>
|
||||
<p>Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:</p>
|
||||
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop">Facebook Pop</a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
|
||||
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop"><code>Facebook Pop</code></a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
|
||||
<ul>
|
||||
<li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li>
|
||||
<li><code>tension</code>: Controls speed. Default 40.</li>
|
||||
<li><code>speed</code>: Controls speed of the animation. Default 12.</li>
|
||||
<li><code>bounciness</code>: Controls bounciness. Default 8.</li>
|
||||
</ul>
|
||||
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.</p>
|
||||
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.</p>
|
||||
<ul>
|
||||
<li><code>stiffness</code>: The spring stiffness coefficient. Default 100.</li>
|
||||
<li><code>damping</code>: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.</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>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><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>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><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,8 +12,8 @@
|
||||
{"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/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The simplest workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</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/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The most basic workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
|
||||
<span class="token comment">// Animate value over time</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// The value to drive</span>
|
||||
@@ -34,7 +34,7 @@
|
||||
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.10/easing">easing functions</a>.</li>
|
||||
</ul>
|
||||
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
|
||||
@@ -52,7 +52,7 @@
|
||||
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.10/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" 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>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<p>Only animatable components can be animated. These components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
|
||||
</ul>
|
||||
@@ -71,7 +71,7 @@
|
||||
<li><a href="/react-native/docs/0.10/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
|
||||
<li><a href="/react-native/docs/0.10/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.10/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.10/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" 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>Combining animated values</h3>
|
||||
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
|
||||
@@ -208,14 +208,14 @@
|
||||
</table>
|
||||
<p><code>config</code> is an object that may have the following options.</p>
|
||||
<p>Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:</p>
|
||||
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop">Facebook Pop</a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
|
||||
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop"><code>Facebook Pop</code></a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
|
||||
<ul>
|
||||
<li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li>
|
||||
<li><code>tension</code>: Controls speed. Default 40.</li>
|
||||
<li><code>speed</code>: Controls speed of the animation. Default 12.</li>
|
||||
<li><code>bounciness</code>: Controls bounciness. Default 8.</li>
|
||||
</ul>
|
||||
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.</p>
|
||||
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.</p>
|
||||
<ul>
|
||||
<li><code>stiffness</code>: The spring stiffness coefficient. Default 100.</li>
|
||||
<li><code>damping</code>: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.</li>
|
||||
|
||||
@@ -71,7 +71,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/animations.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animations</h1></header><article><div><span><p>Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.</p>
|
||||
<p>React Native provides two complementary animation systems: <a href="/react-native/docs/0.10/animations#animated-api"><code>Animated</code></a> for granular and interactive control of specific values, and <a href="/react-native/docs/0.10/animations#layoutanimation-api"><code>LayoutAnimation</code></a> for animated global layout transactions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="animated-api"></a><a href="#animated-api" 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><code>Animated</code> API</h2>
|
||||
<p>The <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p><code>Animated</code> exports six animatable component types: <code>View</code>, <code>Text</code>, <code>Image</code>, <code>ScrollView</code>, <code>FlatList</code> and <code>SectionList</code>, but you can also create your own using <code>Animated.createAnimatedComponent()</code>.</p>
|
||||
<p>For example, a container view that fades in when it is mounted may look like this:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState, useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
@@ -127,7 +127,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>Let's break down what's happening here. In the <code>FadeInView</code> constructor, a new <code>Animated.Value</code> called <code>fadeAnim</code> is initialized as part of <code>state</code>. The opacity property on the <code>View</code> is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.</p>
|
||||
<p>When the component mounts, the opacity is set to 0. Then, an easing animation is started on the <code>fadeAnim</code> animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.</p>
|
||||
<p>When the component mounts, the opacity is set to 0. Then, an easing animation is started on the <code>fadeAnim</code> animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.</p>
|
||||
<p>This is done in an optimized way that is faster than calling <code>setState</code> and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-animations"></a><a href="#configuring-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>Configuring animations</h3>
|
||||
<p>Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
@@ -142,7 +142,7 @@
|
||||
</code></pre>
|
||||
<p>Take a look at the <a href="/react-native/docs/0.10/animated#configuring-animations">Configuring animations</a> section of the <code>Animated</code> API reference to learn more about all the config parameters supported by the built-in animations.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="composing-animations"></a><a href="#composing-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>Composing animations</h3>
|
||||
<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which simply take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p>
|
||||
<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p>
|
||||
<p>For example, the following animation coasts to a stop, then it springs back while twirling in parallel:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">sequence</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||
<span class="token comment">// decay, then spring to start and twirl</span>
|
||||
@@ -177,13 +177,13 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="interpolation"></a><a href="#interpolation" 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>Interpolation</h3>
|
||||
<p>Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>A simple mapping to convert a 0-1 range to a 0-100 range would be:</p>
|
||||
<p>A mapping to convert a 0-1 range to a 0-100 range would be:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can easily be done by modifying <code>style</code> from the example above like so:</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying <code>style</code> from the example above like so:</p>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
@@ -222,7 +222,7 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/react-native/docs/0.10/easing"><code>Easing</code></a> module. <code>interpolate()</code> also has configurable behavior for extrapolating the <code>outputRange</code>. You can set the extrapolation by setting the <code>extrapolate</code>, <code>extrapolateLeft</code>, or <code>extrapolateRight</code> options. The default value is <code>extend</code> but you can use <code>clamp</code> to prevent the output value from exceeding <code>outputRange</code>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-dynamic-values"></a><a href="#tracking-dynamic-values" 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>Tracking dynamic values</h3>
|
||||
<p>Animated values can also track other values. Just set the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p>
|
||||
<p>Animated values can also track other values. Set the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span>toValue<span class="token punctuation">:</span> leader<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>opacity<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
@@ -231,7 +231,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a simple wrapper that basically contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p>
|
||||
<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-gestures"></a><a href="#tracking-gestures" 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>Tracking gestures</h3>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href="/react-native/docs/0.10/animated#event"><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
@@ -254,7 +254,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="responding-to-the-current-animation-value"></a><a href="#responding-to-the-current-animation-value" 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>Responding to the current animation value</h3>
|
||||
<p>You may notice that there is no obvious way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:</p>
|
||||
<p>You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:</p>
|
||||
<ul>
|
||||
<li><code>spring.stopAnimation(callback)</code> will stop the animation and invoke <code>callback</code> with the final value. This is useful when making gesture transitions.</li>
|
||||
<li><code>spring.addListener(callback)</code> will invoke <code>callback</code> asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.</li>
|
||||
@@ -262,7 +262,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p><code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-the-native-driver"></a><a href="#using-the-native-driver" 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>Using the native driver</h3>
|
||||
<p>The <code>Animated</code> API is designed to be serializable. By using the <a href="http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated">native driver</a>, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>Using the native driver for normal animations is quite simple. Just add <code>useNativeDriver: true</code> to the animation config when starting it.</p>
|
||||
<p>To use the native driver for normal animations add <code>useNativeDriver: true</code> to the animation config when starting it.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -71,7 +71,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/animations.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animations</h1></header><article><div><span><p>Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.</p>
|
||||
<p>React Native provides two complementary animation systems: <a href="/react-native/docs/0.10/animations#animated-api"><code>Animated</code></a> for granular and interactive control of specific values, and <a href="/react-native/docs/0.10/animations#layoutanimation-api"><code>LayoutAnimation</code></a> for animated global layout transactions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="animated-api"></a><a href="#animated-api" 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><code>Animated</code> API</h2>
|
||||
<p>The <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p><code>Animated</code> exports six animatable component types: <code>View</code>, <code>Text</code>, <code>Image</code>, <code>ScrollView</code>, <code>FlatList</code> and <code>SectionList</code>, but you can also create your own using <code>Animated.createAnimatedComponent()</code>.</p>
|
||||
<p>For example, a container view that fades in when it is mounted may look like this:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState, useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
@@ -127,7 +127,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>Let's break down what's happening here. In the <code>FadeInView</code> constructor, a new <code>Animated.Value</code> called <code>fadeAnim</code> is initialized as part of <code>state</code>. The opacity property on the <code>View</code> is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.</p>
|
||||
<p>When the component mounts, the opacity is set to 0. Then, an easing animation is started on the <code>fadeAnim</code> animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.</p>
|
||||
<p>When the component mounts, the opacity is set to 0. Then, an easing animation is started on the <code>fadeAnim</code> animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.</p>
|
||||
<p>This is done in an optimized way that is faster than calling <code>setState</code> and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-animations"></a><a href="#configuring-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>Configuring animations</h3>
|
||||
<p>Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
@@ -142,7 +142,7 @@
|
||||
</code></pre>
|
||||
<p>Take a look at the <a href="/react-native/docs/0.10/animated#configuring-animations">Configuring animations</a> section of the <code>Animated</code> API reference to learn more about all the config parameters supported by the built-in animations.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="composing-animations"></a><a href="#composing-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>Composing animations</h3>
|
||||
<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which simply take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p>
|
||||
<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p>
|
||||
<p>For example, the following animation coasts to a stop, then it springs back while twirling in parallel:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">sequence</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||
<span class="token comment">// decay, then spring to start and twirl</span>
|
||||
@@ -177,13 +177,13 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="interpolation"></a><a href="#interpolation" 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>Interpolation</h3>
|
||||
<p>Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>A simple mapping to convert a 0-1 range to a 0-100 range would be:</p>
|
||||
<p>A mapping to convert a 0-1 range to a 0-100 range would be:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can easily be done by modifying <code>style</code> from the example above like so:</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying <code>style</code> from the example above like so:</p>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
@@ -222,7 +222,7 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/react-native/docs/0.10/easing"><code>Easing</code></a> module. <code>interpolate()</code> also has configurable behavior for extrapolating the <code>outputRange</code>. You can set the extrapolation by setting the <code>extrapolate</code>, <code>extrapolateLeft</code>, or <code>extrapolateRight</code> options. The default value is <code>extend</code> but you can use <code>clamp</code> to prevent the output value from exceeding <code>outputRange</code>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-dynamic-values"></a><a href="#tracking-dynamic-values" 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>Tracking dynamic values</h3>
|
||||
<p>Animated values can also track other values. Just set the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p>
|
||||
<p>Animated values can also track other values. Set the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span>toValue<span class="token punctuation">:</span> leader<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>opacity<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
@@ -231,7 +231,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a simple wrapper that basically contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p>
|
||||
<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-gestures"></a><a href="#tracking-gestures" 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>Tracking gestures</h3>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href="/react-native/docs/0.10/animated#event"><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
@@ -254,7 +254,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="responding-to-the-current-animation-value"></a><a href="#responding-to-the-current-animation-value" 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>Responding to the current animation value</h3>
|
||||
<p>You may notice that there is no obvious way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:</p>
|
||||
<p>You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:</p>
|
||||
<ul>
|
||||
<li><code>spring.stopAnimation(callback)</code> will stop the animation and invoke <code>callback</code> with the final value. This is useful when making gesture transitions.</li>
|
||||
<li><code>spring.addListener(callback)</code> will invoke <code>callback</code> asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.</li>
|
||||
@@ -262,7 +262,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p><code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-the-native-driver"></a><a href="#using-the-native-driver" 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>Using the native driver</h3>
|
||||
<p>The <code>Animated</code> API is designed to be serializable. By using the <a href="http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated">native driver</a>, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>Using the native driver for normal animations is quite simple. Just add <code>useNativeDriver: true</code> to the animation config when starting it.</p>
|
||||
<p>To use the native driver for normal animations add <code>useNativeDriver: true</code> to the animation config when starting it.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -70,12 +70,12 @@
|
||||
});
|
||||
</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/app-extensions.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">App Extensions</h1></header><article><div><span><p>App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the <a href="https://developer.apple.com/library/content/documentation/General/Conceptual/ExtensibilityPG/index.html#//apple_ref/doc/uid/TP40014214-CH20-SW1">App Extension Programming Guide</a>. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="memory-use-in-extensions"></a><a href="#memory-use-in-extensions" 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>Memory use in extensions</h2>
|
||||
<p>As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works just fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.</p>
|
||||
<p>As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.</p>
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://www.youtube.com/watch?v=GqXMqn6MXrM">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="today-widget"></a><a href="#today-widget" 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.jpg" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, you can quickly go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="other-app-extensions"></a><a href="#other-app-extensions" 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>Other app extensions</h3>
|
||||
<p>Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is <a href="https://github.com/andrewsardone/react-native-ios-share-extension">react-native-ios-share-extension</a>.</p>
|
||||
|
||||
@@ -70,12 +70,12 @@
|
||||
});
|
||||
</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/app-extensions.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">App Extensions</h1></header><article><div><span><p>App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the <a href="https://developer.apple.com/library/content/documentation/General/Conceptual/ExtensibilityPG/index.html#//apple_ref/doc/uid/TP40014214-CH20-SW1">App Extension Programming Guide</a>. In this guide, we'll briefly cover how you may take advantage of app extensions on iOS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="memory-use-in-extensions"></a><a href="#memory-use-in-extensions" 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>Memory use in extensions</h2>
|
||||
<p>As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works just fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.</p>
|
||||
<p>As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.</p>
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://www.youtube.com/watch?v=GqXMqn6MXrM">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="today-widget"></a><a href="#today-widget" 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.jpg" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, you can quickly go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="other-app-extensions"></a><a href="#other-app-extensions" 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>Other app extensions</h3>
|
||||
<p>Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is <a href="https://github.com/andrewsardone/react-native-ios-share-extension">react-native-ios-share-extension</a>.</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>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><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>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`AsyncStorage` is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`AsyncStorage` is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><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,10 +12,10 @@
|
||||
{"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/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p><code>AsyncStorage</code> is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</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/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p><code>AsyncStorage</code> is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<p>It is recommended that you use an abstraction on top of <code>AsyncStorage</code> instead of <code>AsyncStorage</code> directly for anything more than light usage since it operates globally.</p>
|
||||
<p>On iOS, <code>AsyncStorage</code> is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, <code>AsyncStorage</code> will use either <a href="http://rocksdb.org/">RocksDB</a> or SQLite based on what is available.</p>
|
||||
<p>The <code>AsyncStorage</code> JavaScript code is a simple facade that provides a clear JavaScript API, real <code>Error</code> objects, and simple non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
|
||||
<p>The <code>AsyncStorage</code> JavaScript code is a facade that provides a clear JavaScript API, real <code>Error</code> objects, and non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
|
||||
<p>Persisting data:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span> <span class="token string">'I like to save it.'</span><span class="token punctuation">)</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>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><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>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`AsyncStorage` is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`AsyncStorage` is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><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,10 +12,10 @@
|
||||
{"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/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p><code>AsyncStorage</code> is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</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/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p><code>AsyncStorage</code> is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<p>It is recommended that you use an abstraction on top of <code>AsyncStorage</code> instead of <code>AsyncStorage</code> directly for anything more than light usage since it operates globally.</p>
|
||||
<p>On iOS, <code>AsyncStorage</code> is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, <code>AsyncStorage</code> will use either <a href="http://rocksdb.org/">RocksDB</a> or SQLite based on what is available.</p>
|
||||
<p>The <code>AsyncStorage</code> JavaScript code is a simple facade that provides a clear JavaScript API, real <code>Error</code> objects, and simple non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
|
||||
<p>The <code>AsyncStorage</code> JavaScript code is a facade that provides a clear JavaScript API, real <code>Error</code> objects, and non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
|
||||
<p>Persisting data:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span> <span class="token string">'I like to save it.'</span><span class="token punctuation">)</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>Building For TV Devices · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Building For TV Devices · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><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>Building For TV Devices · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Building For TV Devices · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><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/building-for-apple-tv.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Building For TV Devices</h1></header><article><div><span><p>TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.</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/building-for-apple-tv.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Building For TV Devices</h1></header><article><div><span><p>TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" id="toggle-platform">
|
||||
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
|
||||
@@ -125,7 +125,7 @@
|
||||
<ul>
|
||||
<li><p><em>General support for tvOS</em>: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.</p></li>
|
||||
<li><p><em>Common codebase</em>: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.</p></li>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Apple TV, the native view class is <code>RCTTVView</code>, which has additional methods to make use of the tvOS focus engine. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code> and <code>TouchableOpacity</code> will "just work". In particular:</p>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Apple TV, the native view class is <code>RCTTVView</code>, which has additional methods to make use of the tvOS focus engine. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code> and <code>TouchableOpacity</code> will work as expected. In particular:</p>
|
||||
<ul>
|
||||
<li><code>onFocus</code> will be executed when the touchable view goes into focus</li>
|
||||
<li><code>onBlur</code> will be executed when the touchable view goes out of focus</li>
|
||||
@@ -134,7 +134,7 @@
|
||||
</ul>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code>, <code>TouchableOpacity</code> and <code>TouchableNativeFeedback</code> will "just work". In particular:</p>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code>, <code>TouchableOpacity</code> and <code>TouchableNativeFeedback</code> will work as expected. In particular:</p>
|
||||
<ul>
|
||||
<li><code>onFocus</code> will be executed when the touchable view goes into focus</li>
|
||||
<li><code>onBlur</code> will be executed when the touchable view goes out of focus</li>
|
||||
@@ -189,20 +189,20 @@
|
||||
</code></pre>
|
||||
<p><block class="ios" /></p>
|
||||
<ul>
|
||||
<li><p><em>Dev Menu support</em>: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )</p></li>
|
||||
<li><p><em>Dev Menu support</em>: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )</p></li>
|
||||
<li><p><em>TV remote animations</em>: <code>RCTTVView</code> native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.</p></li>
|
||||
<li><p><em>Back navigation with the TV remote menu button</em>: The <code>BackHandler</code> component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.</p></li>
|
||||
<li><p><em>TabBarIOS behavior</em>: The <code>TabBarIOS</code> component wraps the native <code>UITabBar</code> API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see <a href="https://github.com/facebook/react-native/issues/15081">this issue</a>), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.</p></li>
|
||||
</ul>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>Dev Menu support</em>: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )</li>
|
||||
<li><em>Dev Menu support</em>: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )</li>
|
||||
</ul>
|
||||
<p><block class="ios" /></p>
|
||||
<ul>
|
||||
<li><p><em>Known issues</em>:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/issues/12793">ListView scrolling</a>. The issue can be easily worked around by setting <code>removeClippedSubviews</code> to false in ListView and similar components. For more discussion of this issue, see <a href="https://github.com/facebook/react-native/pull/12944">this PR</a>.</li>
|
||||
<li><a href="https://github.com/facebook/react-native/issues/12793">ListView scrolling</a>. The issue can be worked around by setting <code>removeClippedSubviews</code> to false in ListView and similar components. For more discussion of this issue, see <a href="https://github.com/facebook/react-native/pull/12944">this PR</a>.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<p><block class="android" /></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>Building For TV Devices · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Building For TV Devices · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><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>Building For TV Devices · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Building For TV Devices · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications."/><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/building-for-apple-tv.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Building For TV Devices</h1></header><article><div><span><p>TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.</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/building-for-apple-tv.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Building For TV Devices</h1></header><article><div><span><p>TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" id="toggle-platform">
|
||||
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
|
||||
@@ -125,7 +125,7 @@
|
||||
<ul>
|
||||
<li><p><em>General support for tvOS</em>: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.</p></li>
|
||||
<li><p><em>Common codebase</em>: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.</p></li>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Apple TV, the native view class is <code>RCTTVView</code>, which has additional methods to make use of the tvOS focus engine. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code> and <code>TouchableOpacity</code> will "just work". In particular:</p>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Apple TV, the native view class is <code>RCTTVView</code>, which has additional methods to make use of the tvOS focus engine. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code> and <code>TouchableOpacity</code> will work as expected. In particular:</p>
|
||||
<ul>
|
||||
<li><code>onFocus</code> will be executed when the touchable view goes into focus</li>
|
||||
<li><code>onBlur</code> will be executed when the touchable view goes out of focus</li>
|
||||
@@ -134,7 +134,7 @@
|
||||
</ul>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code>, <code>TouchableOpacity</code> and <code>TouchableNativeFeedback</code> will "just work". In particular:</p>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableWithoutFeedback</code>, <code>TouchableHighlight</code>, <code>TouchableOpacity</code> and <code>TouchableNativeFeedback</code> will work as expected. In particular:</p>
|
||||
<ul>
|
||||
<li><code>onFocus</code> will be executed when the touchable view goes into focus</li>
|
||||
<li><code>onBlur</code> will be executed when the touchable view goes out of focus</li>
|
||||
@@ -189,20 +189,20 @@
|
||||
</code></pre>
|
||||
<p><block class="ios" /></p>
|
||||
<ul>
|
||||
<li><p><em>Dev Menu support</em>: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )</p></li>
|
||||
<li><p><em>Dev Menu support</em>: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )</p></li>
|
||||
<li><p><em>TV remote animations</em>: <code>RCTTVView</code> native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.</p></li>
|
||||
<li><p><em>Back navigation with the TV remote menu button</em>: The <code>BackHandler</code> component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.</p></li>
|
||||
<li><p><em>TabBarIOS behavior</em>: The <code>TabBarIOS</code> component wraps the native <code>UITabBar</code> API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see <a href="https://github.com/facebook/react-native/issues/15081">this issue</a>), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.</p></li>
|
||||
</ul>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>Dev Menu support</em>: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )</li>
|
||||
<li><em>Dev Menu support</em>: On the simulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )</li>
|
||||
</ul>
|
||||
<p><block class="ios" /></p>
|
||||
<ul>
|
||||
<li><p><em>Known issues</em>:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/issues/12793">ListView scrolling</a>. The issue can be easily worked around by setting <code>removeClippedSubviews</code> to false in ListView and similar components. For more discussion of this issue, see <a href="https://github.com/facebook/react-native/pull/12944">this PR</a>.</li>
|
||||
<li><a href="https://github.com/facebook/react-native/issues/12793">ListView scrolling</a>. The issue can be worked around by setting <code>removeClippedSubviews</code> to false in ListView and similar components. For more discussion of this issue, see <a href="https://github.com/facebook/react-native/pull/12944">this PR</a>.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<p><block class="android" /></p>
|
||||
|
||||
@@ -92,6 +92,7 @@
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="named-colors"></a><a href="#named-colors" 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>Named colors</h3>
|
||||
<p>You can also use color names as values. React Native follows the <a href="http://www.w3.org/TR/css3-color/#svg-color">CSS3 specification</a>:</p>
|
||||
<!-- alex ignore white -->
|
||||
<ul>
|
||||
<li><img src="https://placehold.it/15/f0f8ff/000000?text=+" alt="#f0f8ff"> <color aliceblue /> aliceblue (#f0f8ff)</li>
|
||||
<li><img src="https://placehold.it/15/faebd7/000000?text=+" alt="#faebd7"> <color antiquewhite /> antiquewhite (#faebd7)</li>
|
||||
|
||||
@@ -92,6 +92,7 @@
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="named-colors"></a><a href="#named-colors" 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>Named colors</h3>
|
||||
<p>You can also use color names as values. React Native follows the <a href="http://www.w3.org/TR/css3-color/#svg-color">CSS3 specification</a>:</p>
|
||||
<!-- alex ignore white -->
|
||||
<ul>
|
||||
<li><img src="https://placehold.it/15/f0f8ff/000000?text=+" alt="#f0f8ff"> <color aliceblue /> aliceblue (#f0f8ff)</li>
|
||||
<li><img src="https://placehold.it/15/faebd7/000000?text=+" alt="#faebd7"> <color antiquewhite /> antiquewhite (#faebd7)</li>
|
||||
|
||||
@@ -15,7 +15,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/communication-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.10/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.10/native-components-android">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" 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>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#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>Properties</h2>
|
||||
<p>Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-native-to-react-native"></a><a href="#passing-properties-from-native-to-react-native" 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>Passing properties from native to React Native</h3>
|
||||
@@ -78,7 +78,7 @@ mReactRootView.setAppProperties(updatedProps)<span class="hljs-comment">;</span>
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-native" 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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-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>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.10/native-modules-android#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
|
||||
@@ -15,7 +15,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/communication-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.10/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.10/native-components-android">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" 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>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#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>Properties</h2>
|
||||
<p>Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-native-to-react-native"></a><a href="#passing-properties-from-native-to-react-native" 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>Passing properties from native to React Native</h3>
|
||||
@@ -78,7 +78,7 @@ mReactRootView.setAppProperties(updatedProps)<span class="hljs-comment">;</span>
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-native" 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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-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>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.10/native-modules-android#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
|
||||
@@ -71,7 +71,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/communication-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.10/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.10/native-components-ios">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" 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>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#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>Properties</h2>
|
||||
<p>Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-native-to-react-native"></a><a href="#passing-properties-from-native-to-react-native" 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>Passing properties from native to React Native</h3>
|
||||
@@ -113,7 +113,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
<p><strong><em>Note:</em></strong> Currently, JS function <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentDidMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-native" 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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-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>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.10/native-modules-ios#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
@@ -140,7 +140,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
<h2><a class="anchor" aria-hidden="true" id="layout-computation-flow"></a><a href="#layout-computation-flow" 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>Layout computation flow</h2>
|
||||
<p>When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-native-component-embedded-in-react-native"></a><a href="#layout-of-a-native-component-embedded-in-react-native" 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>Layout of a native component embedded in React Native</h3>
|
||||
<p>This case is covered in <a href="/react-native/docs/0.10/native-components-ios#styles">this article</a>. Basically, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<p>This case is covered in <a href="/react-native/docs/0.10/native-components-ios#styles">this article</a>. To summarize, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-react-native-component-embedded-in-native"></a><a href="#layout-of-a-react-native-component-embedded-in-native" 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>Layout of a React Native component embedded in native</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="react-native-content-with-fixed-size"></a><a href="#react-native-content-with-fixed-size" 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 Native content with fixed size</h4>
|
||||
<p>The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.</p>
|
||||
@@ -208,7 +208,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
<p>You can checkout full source code of the example <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m">here</a>.</p>
|
||||
<p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p>
|
||||
<p><strong><em>Note:</em></strong> React Native layout calculation is performed on a separate thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p>
|
||||
|
||||
@@ -71,7 +71,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/communication-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.10/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.10/native-components-ios">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" 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>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#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>Properties</h2>
|
||||
<p>Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-native-to-react-native"></a><a href="#passing-properties-from-native-to-react-native" 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>Passing properties from native to React Native</h3>
|
||||
@@ -113,7 +113,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
<p><strong><em>Note:</em></strong> Currently, JS function <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentDidMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-native" 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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-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>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.10/native-modules-ios#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
@@ -140,7 +140,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
<h2><a class="anchor" aria-hidden="true" id="layout-computation-flow"></a><a href="#layout-computation-flow" 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>Layout computation flow</h2>
|
||||
<p>When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-native-component-embedded-in-react-native"></a><a href="#layout-of-a-native-component-embedded-in-react-native" 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>Layout of a native component embedded in React Native</h3>
|
||||
<p>This case is covered in <a href="/react-native/docs/0.10/native-components-ios#styles">this article</a>. Basically, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<p>This case is covered in <a href="/react-native/docs/0.10/native-components-ios#styles">this article</a>. To summarize, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-react-native-component-embedded-in-native"></a><a href="#layout-of-a-react-native-component-embedded-in-native" 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>Layout of a React Native component embedded in native</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="react-native-content-with-fixed-size"></a><a href="#react-native-content-with-fixed-size" 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 Native content with fixed size</h4>
|
||||
<p>The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.</p>
|
||||
@@ -208,7 +208,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
<p>You can checkout full source code of the example <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m">here</a>.</p>
|
||||
<p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p>
|
||||
<p><strong><em>Note:</em></strong> React Native layout calculation is performed on a separate thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p>
|
||||
|
||||
@@ -218,7 +218,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>For example, if you wanted to add an internal event handler called <code>onScrollToBottom</code>, you would use,</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -218,7 +218,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>For example, if you wanted to add an internal event handler called <code>onScrollToBottom</code>, you would use,</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -189,7 +189,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>For example, if you wanted to add an internal event handler called <code>onScrollToBottom</code>, you would use,</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -189,7 +189,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Just like for regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>Similar to regular native components, you must provide all your prop types in the component to have them forwarded on to the native component. However, if you have some prop types that are only used internally in component, you can add them to the <code>nativeOnly</code> property of the third argument previously mentioned. For event handlers, you have to use the value <code>true</code> instead of a regular prop type.</p>
|
||||
<p>For example, if you wanted to add an internal event handler called <code>onScrollToBottom</code>, you would use,</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -143,7 +143,7 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
|
||||
<h3><a class="anchor" aria-hidden="true" id="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.gif" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.gif" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Toggle Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="inspecting-component-instances"></a><a href="#inspecting-component-instances" 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>Inspecting Component Instances</h3>
|
||||
@@ -178,6 +178,7 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
|
||||
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p>
|
||||
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
|
||||
<p><code>adb reverse tcp:8081 tcp:8081</code></p>
|
||||
<!-- alex ignore host -->
|
||||
<p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p>
|
||||
|
||||
@@ -143,7 +143,7 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
|
||||
<h3><a class="anchor" aria-hidden="true" id="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.gif" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.gif" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Toggle Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="inspecting-component-instances"></a><a href="#inspecting-component-instances" 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>Inspecting Component Instances</h3>
|
||||
@@ -178,6 +178,7 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
|
||||
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p>
|
||||
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
|
||||
<p><code>adb reverse tcp:8081 tcp:8081</code></p>
|
||||
<!-- alex ignore host -->
|
||||
<p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -170,7 +170,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="drawerbackgroundcolor"></a><a href="#drawerbackgroundcolor" 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><code>drawerBackgroundColor</code></h3>
|
||||
<p>Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:</p>
|
||||
<p>Specifies the background color of the drawer. The default value is <code>white</code>. If you want to set the opacity of the drawer, use rgba. Example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">DrawerLayoutAndroid</span> <span class="hljs-attr">drawerBackgroundColor</span>=<span class="hljs-string">"rgba(0,0,0,0.5)"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">DrawerLayoutAndroid</span>></span></span>
|
||||
|
||||
@@ -170,7 +170,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="drawerbackgroundcolor"></a><a href="#drawerbackgroundcolor" 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><code>drawerBackgroundColor</code></h3>
|
||||
<p>Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:</p>
|
||||
<p>Specifies the background color of the drawer. The default value is <code>white</code>. If you want to set the opacity of the drawer, use rgba. Example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">DrawerLayoutAndroid</span> <span class="hljs-attr">drawerBackgroundColor</span>=<span class="hljs-string">"rgba(0,0,0,0.5)"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">DrawerLayoutAndroid</span>></span></span>
|
||||
|
||||
@@ -17,10 +17,10 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-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>Predefined animations</h3>
|
||||
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" 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>Standard functions</h3>
|
||||
<p>Three standard easing functions are provided:</p>
|
||||
@@ -86,7 +86,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" 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><code>ease()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
|
||||
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
|
||||
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" 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><code>quad()</code></h3>
|
||||
@@ -128,14 +128,14 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" 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><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
|
||||
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
|
||||
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" 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><code>back()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
|
||||
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
|
||||
<p>Wolfram Plot:</p>
|
||||
<ul>
|
||||
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
|
||||
@@ -144,7 +144,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" 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><code>bounce()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Provides a simple bouncing effect.</p>
|
||||
<p>Provides a basic bouncing effect.</p>
|
||||
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" 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><code>bezier()</code></h3>
|
||||
|
||||
@@ -17,10 +17,10 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-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>Predefined animations</h3>
|
||||
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" 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>Standard functions</h3>
|
||||
<p>Three standard easing functions are provided:</p>
|
||||
@@ -86,7 +86,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" 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><code>ease()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
|
||||
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
|
||||
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" 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><code>quad()</code></h3>
|
||||
@@ -128,14 +128,14 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" 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><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
|
||||
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
|
||||
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" 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><code>back()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
|
||||
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
|
||||
<p>Wolfram Plot:</p>
|
||||
<ul>
|
||||
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
|
||||
@@ -144,7 +144,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" 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><code>bounce()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Provides a simple bouncing effect.</p>
|
||||
<p>Provides a basic bouncing effect.</p>
|
||||
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" 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><code>bezier()</code></h3>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><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>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><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/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</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/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
|
||||
<ul>
|
||||
<li>Fully cross-platform.</li>
|
||||
<li>Optional horizontal mode.</li>
|
||||
@@ -178,7 +178,7 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" 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><code>data</code></h3>
|
||||
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/0.10/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<p>For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/0.10/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -257,7 +257,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" 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><code>getItemLayout</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>length<span class="token punctuation">:</span> number<span class="token punctuation">,</span> offset<span class="token punctuation">:</span> number<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p><code>getItemLayout</code> is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to use if you have fixed height items, for example:</p>
|
||||
<p><code>getItemLayout</code> is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient if you have fixed height items, for example:</p>
|
||||
<pre><code class="hljs css language-jsx"> getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token punctuation">{</span>length<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span> <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</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>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><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>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><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/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</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/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
|
||||
<ul>
|
||||
<li>Fully cross-platform.</li>
|
||||
<li>Optional horizontal mode.</li>
|
||||
@@ -178,7 +178,7 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" 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><code>data</code></h3>
|
||||
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/0.10/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<p>For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/0.10/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -257,7 +257,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" 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><code>getItemLayout</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>length<span class="token punctuation">:</span> number<span class="token punctuation">,</span> offset<span class="token punctuation">:</span> number<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p><code>getItemLayout</code> is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to use if you have fixed height items, for example:</p>
|
||||
<p><code>getItemLayout</code> is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient if you have fixed height items, for example:</p>
|
||||
<pre><code class="hljs css language-jsx"> getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token punctuation">{</span>length<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span> <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
</ul>
|
||||
<p>These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="touchablehighlight-and-touchable"></a><a href="#touchablehighlight-and-touchable" 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>TouchableHighlight and Touchable*</h3>
|
||||
<p>The responder system can be complicated to use. So we have provided an abstract <code>Touchable</code> implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use <code>TouchableHighlight</code> anywhere where you would use a button or link on web.</p>
|
||||
<p>The responder system can be complicated to use. So we have provided an abstract <code>Touchable</code> implementation for things that should be "tappable". This uses the responder system and allows you to configure tap interactions declaratively. Use <code>TouchableHighlight</code> anywhere where you would use a button or link on web.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="responder-lifecycle"></a><a href="#responder-lifecycle" 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>Responder Lifecycle</h2>
|
||||
<p>A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:</p>
|
||||
<ul>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
</ul>
|
||||
<p>These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="touchablehighlight-and-touchable"></a><a href="#touchablehighlight-and-touchable" 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>TouchableHighlight and Touchable*</h3>
|
||||
<p>The responder system can be complicated to use. So we have provided an abstract <code>Touchable</code> implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use <code>TouchableHighlight</code> anywhere where you would use a button or link on web.</p>
|
||||
<p>The responder system can be complicated to use. So we have provided an abstract <code>Touchable</code> implementation for things that should be "tappable". This uses the responder system and allows you to configure tap interactions declaratively. Use <code>TouchableHighlight</code> anywhere where you would use a button or link on web.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="responder-lifecycle"></a><a href="#responder-lifecycle" 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>Responder Lifecycle</h2>
|
||||
<p>A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:</p>
|
||||
<ul>
|
||||
|
||||
@@ -109,16 +109,16 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.10/tutorial">Tutorial</a>.</p>
|
||||
<p><h3>Running your app on a simulator or virtual device</h3></p>
|
||||
<p>Expo CLI makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.</p>
|
||||
<p>Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.</p>
|
||||
<p>Once you've set these up, you can launch your app on an Android Virtual Device by running <code>npm run android</code>, or on the iOS Simulator by running <code>npm run ios</code> (macOS only).</p>
|
||||
<p><h3>Caveats</h3></p>
|
||||
<p>Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.</p>
|
||||
<p>If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll just need to "<a href="https://docs.expo.io/versions/latest/workflow/customizing/">eject</a>" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.</p>
|
||||
<p>If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "<a href="https://docs.expo.io/versions/latest/workflow/customizing/">eject</a>" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.</p>
|
||||
<p>Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check <a href="https://docs.expo.io/versions/latest/sdk/overview/#sdk-version">this document</a> to find out what versions are supported.</p>
|
||||
<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 just have to 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 iOS and Android, 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">
|
||||
@@ -327,7 +327,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p><h3>Using a virtual device</h3></p>
|
||||
<p>If you use Android Studio to open <code>./AwesomeProject/android</code>, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Pie</strong> API Level 28 image.</p>
|
||||
<p>If you have recently installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Pie</strong> API Level 28 image.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<blockquote>
|
||||
<p>We recommend configuring <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a> on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.</p>
|
||||
@@ -350,7 +350,7 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</span>
|
||||
</code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it directly from within Xcode.</p>
|
||||
<p><code>react-native run-ios</code> is one way to run your app. You can also run it directly from within Xcode.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.10/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
@@ -368,7 +368,7 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android</s
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio.</p>
|
||||
<p><code>react-native run-android</code> is one way to run your app - you can also run it directly from within Android Studio.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.10/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -109,16 +109,16 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.10/tutorial">Tutorial</a>.</p>
|
||||
<p><h3>Running your app on a simulator or virtual device</h3></p>
|
||||
<p>Expo CLI makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.</p>
|
||||
<p>Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.</p>
|
||||
<p>Once you've set these up, you can launch your app on an Android Virtual Device by running <code>npm run android</code>, or on the iOS Simulator by running <code>npm run ios</code> (macOS only).</p>
|
||||
<p><h3>Caveats</h3></p>
|
||||
<p>Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.</p>
|
||||
<p>If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll just need to "<a href="https://docs.expo.io/versions/latest/workflow/customizing/">eject</a>" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.</p>
|
||||
<p>If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "<a href="https://docs.expo.io/versions/latest/workflow/customizing/">eject</a>" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.</p>
|
||||
<p>Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check <a href="https://docs.expo.io/versions/latest/sdk/overview/#sdk-version">this document</a> to find out what versions are supported.</p>
|
||||
<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 just have to 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 iOS and Android, 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">
|
||||
@@ -327,7 +327,7 @@ npm start <span class="hljs-comment"># you can also use: expo start</span>
|
||||
<p><h3>Using a virtual device</h3></p>
|
||||
<p>If you use Android Studio to open <code>./AwesomeProject/android</code>, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Pie</strong> API Level 28 image.</p>
|
||||
<p>If you have recently installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the <strong>Pie</strong> API Level 28 image.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<blockquote>
|
||||
<p>We recommend configuring <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a> on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.</p>
|
||||
@@ -350,7 +350,7 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</span>
|
||||
</code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it directly from within Xcode.</p>
|
||||
<p><code>react-native run-ios</code> is one way to run your app. You can also run it directly from within Xcode.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.10/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
@@ -368,7 +368,7 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android</s
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio.</p>
|
||||
<p><code>react-native run-android</code> is one way to run your app - you can also run it directly from within Android Studio.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.10/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Press Me<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>This will render a blue label on iOS, and a blue rounded rectangle with white text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.</p>
|
||||
<p>This will render a blue label on iOS, and a blue rounded rectangle with light text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.</p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Press Me<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>This will render a blue label on iOS, and a blue rounded rectangle with white text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.</p>
|
||||
<p>This will render a blue label on iOS, and a blue rounded rectangle with light text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.</p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
|
||||
@@ -70,7 +70,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/headless-js-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Headless JS</h1></header><article><div><span><p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-js-api"></a><a href="#the-js-api" 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 JS API</h2>
|
||||
<p>A task is a simple async function that you register on <code>AppRegistry</code>, similar to registering React applications:</p>
|
||||
<p>A task is an async function that you register on <code>AppRegistry</code>, similar to registering React applications:</p>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Then, in <code>SomeTaskName.js</code>:</p>
|
||||
@@ -113,7 +113,7 @@ service<span class="token punctuation">.</span><span class="token function">putE
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="retries"></a><a href="#retries" 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>Retries</h2>
|
||||
<p>By default, the headless JS task will not perform any retries. In order to do so, you need to create a <code>HeadlessJsRetryPolicy</code> and throw a specfic <code>Error</code>.</p>
|
||||
<p><code>LinearCountingRetryPolicy</code> is an implementation of <code>HeadlessJsRetryPolicy</code> that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can easily implement your own <code>HeadlessJsRetryPolicy</code>. These policies can simply be passed as an extra argument to the <code>HeadlessJsTaskConfig</code> constructor, e.g.</p>
|
||||
<p><code>LinearCountingRetryPolicy</code> is an implementation of <code>HeadlessJsRetryPolicy</code> that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can implement your own <code>HeadlessJsRetryPolicy</code>. These policies can be passed as an extra argument to the <code>HeadlessJsTaskConfig</code> constructor, e.g.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token class-name">HeadlessJsRetryPolicy</span> retryPolicy <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LinearCountingRetryPolicy</span><span class="token punctuation">(</span>
|
||||
<span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// Max number of retry attempts</span>
|
||||
<span class="token number">1000</span> <span class="token comment">// Delay between each retry attempt</span>
|
||||
@@ -141,12 +141,12 @@ module<span class="token punctuation">.</span><span class="token function-variab
|
||||
<p>If you wish all errors to cause a retry attempt, you will need to catch them and throw the above error.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="caveats"></a><a href="#caveats" 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>Caveats</h2>
|
||||
<ul>
|
||||
<li>The function passed to <code>setTimeout</code> does not always behave as expected. Instead the function is called only when the application is launched again. If you just need to wait, use the retry functionality.</li>
|
||||
<li>The function passed to <code>setTimeout</code> does not always behave as expected. Instead the function is called only when the application is launched again. If you only need to wait, use the retry functionality.</li>
|
||||
<li>By default, your app will crash if you try to run a task while the app is in the foreground. This is to prevent developers from shooting themselves in the foot by doing a lot of work in a task and slowing the UI. You can pass a fourth <code>boolean</code> argument to control this behaviour.</li>
|
||||
<li>If you start your service from a <code>BroadcastReceiver</code>, make sure to call <code>HeadlessJsTaskService.acquireWakeLockNow()</code> before returning from <code>onReceive()</code>.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example-usage"></a><a href="#example-usage" 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>Example Usage</h2>
|
||||
<p>Service can be started from Java API. First you need to decide when the service should be started and implement your solution accordingly. Here is a simple example that reacts to network connection change.</p>
|
||||
<p>Service can be started from Java API. First you need to decide when the service should be started and implement your solution accordingly. Here is an example that reacts to network connection change.</p>
|
||||
<p>Following lines shows part of Android manifest file for registering broadcast receiver.</p>
|
||||
<pre><code class="hljs css language-xml"><span class="hljs-tag"><<span class="hljs-name">receiver</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">".NetworkChangeReceiver"</span> ></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">intent-filter</span>></span>
|
||||
|
||||
@@ -70,7 +70,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/headless-js-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Headless JS</h1></header><article><div><span><p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-js-api"></a><a href="#the-js-api" 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 JS API</h2>
|
||||
<p>A task is a simple async function that you register on <code>AppRegistry</code>, similar to registering React applications:</p>
|
||||
<p>A task is an async function that you register on <code>AppRegistry</code>, similar to registering React applications:</p>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Then, in <code>SomeTaskName.js</code>:</p>
|
||||
@@ -113,7 +113,7 @@ service<span class="token punctuation">.</span><span class="token function">putE
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="retries"></a><a href="#retries" 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>Retries</h2>
|
||||
<p>By default, the headless JS task will not perform any retries. In order to do so, you need to create a <code>HeadlessJsRetryPolicy</code> and throw a specfic <code>Error</code>.</p>
|
||||
<p><code>LinearCountingRetryPolicy</code> is an implementation of <code>HeadlessJsRetryPolicy</code> that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can easily implement your own <code>HeadlessJsRetryPolicy</code>. These policies can simply be passed as an extra argument to the <code>HeadlessJsTaskConfig</code> constructor, e.g.</p>
|
||||
<p><code>LinearCountingRetryPolicy</code> is an implementation of <code>HeadlessJsRetryPolicy</code> that allows you to specify a maximum number of retries with a fixed delay between each attempt. If that does not suit your needs then you can implement your own <code>HeadlessJsRetryPolicy</code>. These policies can be passed as an extra argument to the <code>HeadlessJsTaskConfig</code> constructor, e.g.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token class-name">HeadlessJsRetryPolicy</span> retryPolicy <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LinearCountingRetryPolicy</span><span class="token punctuation">(</span>
|
||||
<span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// Max number of retry attempts</span>
|
||||
<span class="token number">1000</span> <span class="token comment">// Delay between each retry attempt</span>
|
||||
@@ -141,12 +141,12 @@ module<span class="token punctuation">.</span><span class="token function-variab
|
||||
<p>If you wish all errors to cause a retry attempt, you will need to catch them and throw the above error.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="caveats"></a><a href="#caveats" 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>Caveats</h2>
|
||||
<ul>
|
||||
<li>The function passed to <code>setTimeout</code> does not always behave as expected. Instead the function is called only when the application is launched again. If you just need to wait, use the retry functionality.</li>
|
||||
<li>The function passed to <code>setTimeout</code> does not always behave as expected. Instead the function is called only when the application is launched again. If you only need to wait, use the retry functionality.</li>
|
||||
<li>By default, your app will crash if you try to run a task while the app is in the foreground. This is to prevent developers from shooting themselves in the foot by doing a lot of work in a task and slowing the UI. You can pass a fourth <code>boolean</code> argument to control this behaviour.</li>
|
||||
<li>If you start your service from a <code>BroadcastReceiver</code>, make sure to call <code>HeadlessJsTaskService.acquireWakeLockNow()</code> before returning from <code>onReceive()</code>.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example-usage"></a><a href="#example-usage" 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>Example Usage</h2>
|
||||
<p>Service can be started from Java API. First you need to decide when the service should be started and implement your solution accordingly. Here is a simple example that reacts to network connection change.</p>
|
||||
<p>Service can be started from Java API. First you need to decide when the service should be started and implement your solution accordingly. Here is an example that reacts to network connection change.</p>
|
||||
<p>Following lines shows part of Android manifest file for registering broadcast receiver.</p>
|
||||
<pre><code class="hljs css language-xml"><span class="hljs-tag"><<span class="hljs-name">receiver</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">".NetworkChangeReceiver"</span> ></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">intent-filter</span>></span>
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
<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>
|
||||
<li>Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.</li>
|
||||
<li>Adding and changing images doesn't require app recompilation, you can refresh the simulator as you normally do.</li>
|
||||
<li>The packager knows the image dimensions, no need to duplicate it in the code.</li>
|
||||
<li>Images can be distributed via <a href="https://www.npmjs.com/">npm</a> packages.</li>
|
||||
</ol>
|
||||
@@ -199,7 +199,7 @@
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="background-image-via-nesting"></a><a href="#background-image-via-nesting" 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>Background Image via Nesting</h2>
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is basic. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ImageBackground</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 operator">...</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token string">'100%'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>Inside<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
<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>
|
||||
<li>Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.</li>
|
||||
<li>Adding and changing images doesn't require app recompilation, you can refresh the simulator as you normally do.</li>
|
||||
<li>The packager knows the image dimensions, no need to duplicate it in the code.</li>
|
||||
<li>Images can be distributed via <a href="https://www.npmjs.com/">npm</a> packages.</li>
|
||||
</ol>
|
||||
@@ -199,7 +199,7 @@
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="background-image-via-nesting"></a><a href="#background-image-via-nesting" 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>Background Image via Nesting</h2>
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is basic. Refer to <code><ImageBackground></code>'s <a href="/react-native/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ImageBackground</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 operator">...</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token string">'100%'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>Inside<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeimagefortag"></a><a href="#removeimagefortag" 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><code>removeImageForTag()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImageStore<span class="token punctuation">.</span><span class="token function">removeImageForTag</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call <code>removeImageForTag()</code> without first calling <code>hasImageForTag()</code>, it will simply fail silently. @platform ios</p>
|
||||
<p>Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call <code>removeImageForTag()</code> without first calling <code>hasImageForTag()</code>, it will fail silently. @platform ios</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addimagefrombase64"></a><a href="#addimagefrombase64" 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><code>addImageFromBase64()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImageStore<span class="token punctuation">.</span><span class="token function">addImageFromBase64</span><span class="token punctuation">(</span>base64ImageData<span class="token punctuation">,</span> success<span class="token punctuation">,</span> failure<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -42,7 +42,7 @@
|
||||
<pre><code class="hljs css language-jsx">ImageStore<span class="token punctuation">.</span><span class="token function">getBase64ForTag</span><span class="token punctuation">(</span>uri<span class="token punctuation">,</span> success<span class="token punctuation">,</span> failure<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Retrieves the base64-encoded data for an image in the ImageStore. If the specified URI does not match an image in the store, the failure callback will be called.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can just pass the URI to an <code><Image/></code> component; there is no need to retrieve the base64 data.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can pass the URI to an <code><Image/></code> component; there is no need to retrieve the base64 data.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#hasimagefortag"><code>hasImageForTag()</code></a></li><li><a href="#removeimagefortag"><code>removeImageForTag()</code></a></li><li><a href="#addimagefrombase64"><code>addImageFromBase64()</code></a></li><li><a href="#getbase64fortag"><code>getBase64ForTag()</code></a></li></ul></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) {
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeimagefortag"></a><a href="#removeimagefortag" 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><code>removeImageForTag()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImageStore<span class="token punctuation">.</span><span class="token function">removeImageForTag</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call <code>removeImageForTag()</code> without first calling <code>hasImageForTag()</code>, it will simply fail silently. @platform ios</p>
|
||||
<p>Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call <code>removeImageForTag()</code> without first calling <code>hasImageForTag()</code>, it will fail silently. @platform ios</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addimagefrombase64"></a><a href="#addimagefrombase64" 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><code>addImageFromBase64()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImageStore<span class="token punctuation">.</span><span class="token function">addImageFromBase64</span><span class="token punctuation">(</span>base64ImageData<span class="token punctuation">,</span> success<span class="token punctuation">,</span> failure<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -42,7 +42,7 @@
|
||||
<pre><code class="hljs css language-jsx">ImageStore<span class="token punctuation">.</span><span class="token function">getBase64ForTag</span><span class="token punctuation">(</span>uri<span class="token punctuation">,</span> success<span class="token punctuation">,</span> failure<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Retrieves the base64-encoded data for an image in the ImageStore. If the specified URI does not match an image in the store, the failure callback will be called.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can just pass the URI to an <code><Image/></code> component; there is no need to retrieve the base64 data.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can pass the URI to an <code><Image/></code> component; there is no need to retrieve the base64 data.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#hasimagefortag"><code>hasImageForTag()</code></a></li><li><a href="#removeimagefortag"><code>removeImageForTag()</code></a></li><li><a href="#addimagefrombase64"><code>addImageFromBase64()</code></a></li><li><a href="#getbase64fortag"><code>getBase64ForTag()</code></a></li></ul></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) {
|
||||
|
||||
@@ -258,9 +258,9 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-create-a-indexjs-file"></a><a href="#1-create-a-indexjs-file" 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>1. Create a <code>index.js</code> file</h5>
|
||||
<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in <code>index.js</code>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code"></a><a href="#2-add-your-react-native-code" 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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code></p>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <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>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -308,7 +308,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
</blockquote>
|
||||
<h4><a class="anchor" aria-hidden="true" id="the-magic-rctrootview"></a><a href="#the-magic-rctrootview" 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 Magic: <code>RCTRootView</code></h4>
|
||||
<p>Now that your React Native component is created via <code>index.js</code>, you need to add that component to a new or existing <code>ViewController</code>. The easiest path to take is to optionally create an event path to your component and then add that component to an existing <code>ViewController</code>.</p>
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually contain it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-create-an-event-path"></a><a href="#1-create-an-event-path" 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>1. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
@@ -418,7 +418,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<p>App Transport Security is good for your users. Make sure to re-enable it prior to releasing your app for production.</p>
|
||||
</blockquote>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-run-the-packager"></a><a href="#2-run-the-packager" 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>2. Run the packager</h5>
|
||||
<p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p>
|
||||
<p>To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:</p>
|
||||
<pre><code class="hljs">$ <span class="hljs-built_in">npm</span> start
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="3-run-the-app"></a><a href="#3-run-the-app" 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>3. Run the app</h5>
|
||||
@@ -495,9 +495,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-create-a-indexjs-file-1"></a><a href="#1-create-a-indexjs-file-1" 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>1. Create a <code>index.js</code> file</h5>
|
||||
<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in <code>index.js</code>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code-1"></a><a href="#2-add-your-react-native-code-1" 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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <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>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -642,7 +642,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your <code>invokeDefaultOnBackPressed</code> method will be called. By default this simply finishes your <code>Activity</code>.</p>
|
||||
<p>This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your <code>invokeDefaultOnBackPressed</code> method will be called. By default this finishes your <code>Activity</code>.</p>
|
||||
<p>Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use <code>Ctrl + M</code> if you're using Android Studio emulator):</p>
|
||||
<pre><code class="hljs css language-java"><span class="token annotation punctuation">@Override</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onKeyUp</span><span class="token punctuation">(</span><span class="token keyword">int</span> keyCode<span class="token punctuation">,</span> <span class="token class-name">KeyEvent</span> event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -657,7 +657,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<h3><a class="anchor" aria-hidden="true" id="test-your-integration-1"></a><a href="#test-your-integration-1" 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>Test your integration</h3>
|
||||
<p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.bundle</code> package and the server running on localhost to serve it.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-run-the-packager"></a><a href="#1-run-the-packager" 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>1. Run the packager</h5>
|
||||
<p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p>
|
||||
<p>To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:</p>
|
||||
<pre><code class="hljs">$ yarn <span class="hljs-literal">start</span>
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-run-the-app"></a><a href="#2-run-the-app" 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>2. Run the app</h5>
|
||||
@@ -665,13 +665,13 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app. There’s one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.</p>
|
||||
</blockquote>
|
||||
<p>Now just create a release build of your native app from within Android Studio as usual and you should be good to go!</p>
|
||||
<p>Now, create a release build of your native app from within Android Studio as usual and you should be good to go!</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="now-what"></a><a href="#now-what" 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>Now what?</h3>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our <a href="/react-native/docs/0.10/debugging">debugging</a> and <a href="/react-native/docs/0.10/running-on-device">deployment</a> docs to learn more about working with React Native.</p>
|
||||
|
||||
@@ -258,9 +258,9 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-create-a-indexjs-file"></a><a href="#1-create-a-indexjs-file" 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>1. Create a <code>index.js</code> file</h5>
|
||||
<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in <code>index.js</code>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code"></a><a href="#2-add-your-react-native-code" 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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code></p>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <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>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -308,7 +308,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
</blockquote>
|
||||
<h4><a class="anchor" aria-hidden="true" id="the-magic-rctrootview"></a><a href="#the-magic-rctrootview" 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 Magic: <code>RCTRootView</code></h4>
|
||||
<p>Now that your React Native component is created via <code>index.js</code>, you need to add that component to a new or existing <code>ViewController</code>. The easiest path to take is to optionally create an event path to your component and then add that component to an existing <code>ViewController</code>.</p>
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually contain it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-create-an-event-path"></a><a href="#1-create-an-event-path" 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>1. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
@@ -418,7 +418,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<p>App Transport Security is good for your users. Make sure to re-enable it prior to releasing your app for production.</p>
|
||||
</blockquote>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-run-the-packager"></a><a href="#2-run-the-packager" 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>2. Run the packager</h5>
|
||||
<p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p>
|
||||
<p>To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:</p>
|
||||
<pre><code class="hljs">$ <span class="hljs-built_in">npm</span> start
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="3-run-the-app"></a><a href="#3-run-the-app" 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>3. Run the app</h5>
|
||||
@@ -495,9 +495,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-create-a-indexjs-file-1"></a><a href="#1-create-a-indexjs-file-1" 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>1. Create a <code>index.js</code> file</h5>
|
||||
<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will put everything in <code>index.js</code>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code-1"></a><a href="#2-add-your-react-native-code-1" 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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <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>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -642,7 +642,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your <code>invokeDefaultOnBackPressed</code> method will be called. By default this simply finishes your <code>Activity</code>.</p>
|
||||
<p>This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your <code>invokeDefaultOnBackPressed</code> method will be called. By default this finishes your <code>Activity</code>.</p>
|
||||
<p>Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use <code>Ctrl + M</code> if you're using Android Studio emulator):</p>
|
||||
<pre><code class="hljs css language-java"><span class="token annotation punctuation">@Override</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onKeyUp</span><span class="token punctuation">(</span><span class="token keyword">int</span> keyCode<span class="token punctuation">,</span> <span class="token class-name">KeyEvent</span> event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -657,7 +657,7 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<h3><a class="anchor" aria-hidden="true" id="test-your-integration-1"></a><a href="#test-your-integration-1" 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>Test your integration</h3>
|
||||
<p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.bundle</code> package and the server running on localhost to serve it.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="1-run-the-packager"></a><a href="#1-run-the-packager" 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>1. Run the packager</h5>
|
||||
<p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p>
|
||||
<p>To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project:</p>
|
||||
<pre><code class="hljs">$ yarn <span class="hljs-literal">start</span>
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-run-the-app"></a><a href="#2-run-the-app" 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>2. Run the app</h5>
|
||||
@@ -665,13 +665,13 @@ AppRegistry<span class="token punctuation">.</span><span class="token function">
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app. There’s one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.</p>
|
||||
</blockquote>
|
||||
<p>Now just create a release build of your native app from within Android Studio as usual and you should be good to go!</p>
|
||||
<p>Now, create a release build of your native app from within Android Studio as usual and you should be good to go!</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="now-what"></a><a href="#now-what" 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>Now what?</h3>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our <a href="/react-native/docs/0.10/debugging">debugging</a> and <a href="/react-native/docs/0.10/running-on-device">deployment</a> docs to learn more about working with React Native.</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>Linking Libraries · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Linking Libraries · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them."/><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>Linking Libraries · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Linking Libraries · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them."/><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,9 +68,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/linking-libraries-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Linking Libraries</h1></header><article><div><span><p>Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them.</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/linking-libraries-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Linking Libraries</h1></header><article><div><span><p>Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them.</p>
|
||||
<p>With that in mind we exposed many of these features as independent static libraries.</p>
|
||||
<p>For most of the libs it will be as simple as dragging two files, sometimes a third step will be necessary, but no more than that.</p>
|
||||
<p>For most of the libs it will be as quick as dragging two files, sometimes a third step will be necessary, but no more than that.</p>
|
||||
<p><em>All the libraries we ship with React Native live on the <code>Libraries</code> folder in the root of the repository. Some of them are pure JavaScript, and you only need to <code>require</code> it. Other libraries also rely on some native code, in that case you'll have to add these files to your app, otherwise the app will throw an error as soon as you try to use the library.</em></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="here-are-the-few-steps-to-link-your-libraries-that-contain-native-code"></a><a href="#here-are-the-few-steps-to-link-your-libraries-that-contain-native-code" 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>Here are the few steps to link your libraries that contain native code</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="automatic-linking"></a><a href="#automatic-linking" 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>Automatic linking</h3>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Linking Libraries · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Linking Libraries · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them."/><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>Linking Libraries · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Linking Libraries · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them."/><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,9 +68,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/linking-libraries-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Linking Libraries</h1></header><article><div><span><p>Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them.</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/linking-libraries-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Linking Libraries</h1></header><article><div><span><p>Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to support these features whenever you need them.</p>
|
||||
<p>With that in mind we exposed many of these features as independent static libraries.</p>
|
||||
<p>For most of the libs it will be as simple as dragging two files, sometimes a third step will be necessary, but no more than that.</p>
|
||||
<p>For most of the libs it will be as quick as dragging two files, sometimes a third step will be necessary, but no more than that.</p>
|
||||
<p><em>All the libraries we ship with React Native live on the <code>Libraries</code> folder in the root of the repository. Some of them are pure JavaScript, and you only need to <code>require</code> it. Other libraries also rely on some native code, in that case you'll have to add these files to your app, otherwise the app will throw an error as soon as you try to use the library.</em></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="here-are-the-few-steps-to-link-your-libraries-that-contain-native-code"></a><a href="#here-are-the-few-steps-to-link-your-libraries-that-contain-native-code" 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>Here are the few steps to link your libraries that contain native code</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="automatic-linking"></a><a href="#automatic-linking" 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>Automatic linking</h3>
|
||||
|
||||
@@ -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/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>DEPRECATED - use one of the new list components, such as <a href="/react-native/docs/0.10/flatlist"><code>FlatList</code></a> or <a href="/react-native/docs/0.10/sectionlist"><code>SectionList</code></a> for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this <a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html">blog post</a> for more details.</p>
|
||||
<p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with a simple array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
|
||||
<p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with an array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
|
||||
<p>Minimal example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</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/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>DEPRECATED - use one of the new list components, such as <a href="/react-native/docs/0.10/flatlist"><code>FlatList</code></a> or <a href="/react-native/docs/0.10/sectionlist"><code>SectionList</code></a> for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this <a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html">blog post</a> for more details.</p>
|
||||
<p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with a simple array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
|
||||
<p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with an array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
|
||||
<p>Minimal example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</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>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><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>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><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,8 +12,8 @@
|
||||
{"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/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
|
||||
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</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/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
|
||||
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods take in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
|
||||
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
|
||||
<pre><code class="hljs">getInitialState: function() {
|
||||
<span class="hljs-keyword">var</span> ds = new ListView.DataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
|
||||
@@ -68,9 +68,9 @@ _onDataArrived(newData) {
|
||||
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" 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><code>cloneWithRows()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
|
||||
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
|
||||
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
|
||||
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
|
||||
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" 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><code>cloneWithRowsAndSections()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</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>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><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>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><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,8 +12,8 @@
|
||||
{"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/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
|
||||
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</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/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
|
||||
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods take in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
|
||||
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
|
||||
<pre><code class="hljs">getInitialState: function() {
|
||||
<span class="hljs-keyword">var</span> ds = new ListView.DataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
|
||||
@@ -68,9 +68,9 @@ _onDataArrived(newData) {
|
||||
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" 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><code>cloneWithRows()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
|
||||
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
|
||||
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
|
||||
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
|
||||
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" 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><code>cloneWithRowsAndSections()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</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>More Resources · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="More Resources · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><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>More Resources · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="If you only read through this website, you should be able to build a pretty cool React Native app. But React Native isn't a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="More Resources · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="If you only read through this website, you should be able to build a pretty cool React Native app. But React Native isn't a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><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,17 +68,17 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/more-resources.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">More Resources</h1></header><article><div><span><p>If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out.</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/more-resources.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">More Resources</h1></header><article><div><span><p>If you only read through this website, you should be able to build a pretty cool React Native app. But React Native isn't a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="popular-libraries"></a><a href="#popular-libraries" 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>Popular Libraries</h2>
|
||||
<p>If you're using React Native, you probably already know about <a href="https://facebook.github.io/react/">React</a>. So I feel a bit silly mentioning this. But if you haven't, check out React - it's the best way to build a modern website.</p>
|
||||
<p>One common question is how to handle the "state" of your React Native application. The most popular library for this is <a href="http://redux.js.org/">Redux</a>. Don't be afraid of how often Redux uses the word "reducer" - it's a pretty simple library, and there's also a nice <a href="https://egghead.io/courses/getting-started-with-redux">series of videos</a> explaining it.</p>
|
||||
<p>One common question is how to handle the "state" of your React Native application. The most popular library for this is <a href="http://redux.js.org/">Redux</a>. Don't be afraid of how often Redux uses the word "reducer" - it's a pretty basic library, and there's also a nice <a href="https://egghead.io/courses/getting-started-with-redux">series of videos</a> explaining it.</p>
|
||||
<p>If you're looking for a library that does a specific thing, check out <a href="http://www.awesome-react-native.com/">Awesome React Native</a>, a curated list of components that also has demos, articles, and other stuff.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="examples"></a><a href="#examples" 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>Examples</h2>
|
||||
<p>Try out apps from the <a href="/react-native/showcase/">Showcase</a> to see what React Native is capable of! There are also some <a href="https://github.com/ReactNativeNews/React-Native-Apps">example apps on GitHub</a>. You can run the apps on a simulator or device, and you can see the source code for these apps, which is neat.</p>
|
||||
<p>The folks who built the app for Facebook's F8 conference also <a href="https://github.com/fbsamples/f8app">open-sourced the code</a> and wrote up a <a href="http://makeitopen.com/">detailed series of tutorials</a>. This is useful if you want a more in-depth example that's more realistic than most sample apps out there.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="extending-react-native"></a><a href="#extending-react-native" 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>Extending React Native</h2>
|
||||
<ul>
|
||||
<li>Fellow developers write and publish React Native modules to npm and open source them on GitHub.</li>
|
||||
<li>Developers write and publish React Native modules to npm and open source them on GitHub.</li>
|
||||
<li>Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm.</li>
|
||||
<li>Read the guides on Native Modules (<a href="/react-native/docs/0.10/native-modules-ios">iOS</a>, <a href="/react-native/docs/0.10/native-modules-android">Android</a>) and Native UI Components (<a href="/react-native/docs/0.10/native-components-ios">iOS</a>, <a href="/react-native/docs/0.10/native-components-android">Android</a>) if you are interested in extending native functionality.</li>
|
||||
<li>Looking for a pre-built component? Check <a href="https://js.coach/react-native">JS.coach</a> or <a href="https://www.native.directory">Native Directory</a> to find what the community has been creating.</li>
|
||||
@@ -86,7 +86,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="development-tools"></a><a href="#development-tools" 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>Development Tools</h2>
|
||||
<p><a href="https://nuclide.io/">Nuclide</a> is the IDE that Facebook uses internally for JavaScript development. The killer feature of Nuclide is its debugging ability. It also has great inline Flow support. <a href="https://code.visualstudio.com/">VS Code</a> is another IDE that is popular with JavaScript developers.</p>
|
||||
<p><a href="https://github.com/infinitered/ignite">Ignite</a> is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you.</p>
|
||||
<p><a href="https://appcenter.ms/">App Center</a> is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try.</p>
|
||||
<p><a href="https://appcenter.ms/">App Center</a> is a service from Microsoft that allows you to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try.</p>
|
||||
<p><a href="https://docs.expo.io">Expo</a> is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.</p>
|
||||
<p><a href="https://yogalayout.com/">Yoga</a> is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.</p>
|
||||
<p><a href="https://www.bugsnag.com/">Bugsnag</a>, <a href="https://appcenter.ms/">Microsoft App Center</a>, and <a href="https://sentry.io/welcome/">Sentry</a> all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occurring on your apps in real time so you can fix them quickly and improve user experience.</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>More Resources · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="More Resources · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><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>More Resources · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="If you only read through this website, you should be able to build a pretty cool React Native app. But React Native isn't a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="More Resources · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="If you only read through this website, you should be able to build a pretty cool React Native app. But React Native isn't a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out."/><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,17 +68,17 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/more-resources.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">More Resources</h1></header><article><div><span><p>If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out.</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/more-resources.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">More Resources</h1></header><article><div><span><p>If you only read through this website, you should be able to build a pretty cool React Native app. But React Native isn't a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="popular-libraries"></a><a href="#popular-libraries" 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>Popular Libraries</h2>
|
||||
<p>If you're using React Native, you probably already know about <a href="https://facebook.github.io/react/">React</a>. So I feel a bit silly mentioning this. But if you haven't, check out React - it's the best way to build a modern website.</p>
|
||||
<p>One common question is how to handle the "state" of your React Native application. The most popular library for this is <a href="http://redux.js.org/">Redux</a>. Don't be afraid of how often Redux uses the word "reducer" - it's a pretty simple library, and there's also a nice <a href="https://egghead.io/courses/getting-started-with-redux">series of videos</a> explaining it.</p>
|
||||
<p>One common question is how to handle the "state" of your React Native application. The most popular library for this is <a href="http://redux.js.org/">Redux</a>. Don't be afraid of how often Redux uses the word "reducer" - it's a pretty basic library, and there's also a nice <a href="https://egghead.io/courses/getting-started-with-redux">series of videos</a> explaining it.</p>
|
||||
<p>If you're looking for a library that does a specific thing, check out <a href="http://www.awesome-react-native.com/">Awesome React Native</a>, a curated list of components that also has demos, articles, and other stuff.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="examples"></a><a href="#examples" 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>Examples</h2>
|
||||
<p>Try out apps from the <a href="/react-native/showcase/">Showcase</a> to see what React Native is capable of! There are also some <a href="https://github.com/ReactNativeNews/React-Native-Apps">example apps on GitHub</a>. You can run the apps on a simulator or device, and you can see the source code for these apps, which is neat.</p>
|
||||
<p>The folks who built the app for Facebook's F8 conference also <a href="https://github.com/fbsamples/f8app">open-sourced the code</a> and wrote up a <a href="http://makeitopen.com/">detailed series of tutorials</a>. This is useful if you want a more in-depth example that's more realistic than most sample apps out there.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="extending-react-native"></a><a href="#extending-react-native" 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>Extending React Native</h2>
|
||||
<ul>
|
||||
<li>Fellow developers write and publish React Native modules to npm and open source them on GitHub.</li>
|
||||
<li>Developers write and publish React Native modules to npm and open source them on GitHub.</li>
|
||||
<li>Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm.</li>
|
||||
<li>Read the guides on Native Modules (<a href="/react-native/docs/0.10/native-modules-ios">iOS</a>, <a href="/react-native/docs/0.10/native-modules-android">Android</a>) and Native UI Components (<a href="/react-native/docs/0.10/native-components-ios">iOS</a>, <a href="/react-native/docs/0.10/native-components-android">Android</a>) if you are interested in extending native functionality.</li>
|
||||
<li>Looking for a pre-built component? Check <a href="https://js.coach/react-native">JS.coach</a> or <a href="https://www.native.directory">Native Directory</a> to find what the community has been creating.</li>
|
||||
@@ -86,7 +86,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="development-tools"></a><a href="#development-tools" 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>Development Tools</h2>
|
||||
<p><a href="https://nuclide.io/">Nuclide</a> is the IDE that Facebook uses internally for JavaScript development. The killer feature of Nuclide is its debugging ability. It also has great inline Flow support. <a href="https://code.visualstudio.com/">VS Code</a> is another IDE that is popular with JavaScript developers.</p>
|
||||
<p><a href="https://github.com/infinitered/ignite">Ignite</a> is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you.</p>
|
||||
<p><a href="https://appcenter.ms/">App Center</a> is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try.</p>
|
||||
<p><a href="https://appcenter.ms/">App Center</a> is a service from Microsoft that allows you to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try.</p>
|
||||
<p><a href="https://docs.expo.io">Expo</a> is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.</p>
|
||||
<p><a href="https://yogalayout.com/">Yoga</a> is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.</p>
|
||||
<p><a href="https://www.bugsnag.com/">Bugsnag</a>, <a href="https://appcenter.ms/">Microsoft App Center</a>, and <a href="https://sentry.io/welcome/">Sentry</a> all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occurring on your apps in real time so you can fix them quickly and improve user experience.</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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><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,13 +68,13 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/native-components-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.</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/native-components-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.</p>
|
||||
<p>Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing <code>ImageView</code> component available in the core React Native library.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="imageview-example"></a><a href="#imageview-example" 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>ImageView example</h2>
|
||||
<p>For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.</p>
|
||||
<p>Native views are created and manipulated by extending <code>ViewManager</code> or more commonly <code>SimpleViewManager</code> . A <code>SimpleViewManager</code> is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.</p>
|
||||
<p>These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the <code>NativeViewHierarchyManager</code>, which delegates back to them to set and update the properties of the views as necessary. The <code>ViewManagers</code> are also typically the delegates for the views, sending events back to JavaScript via the bridge.</p>
|
||||
<p>Vending a view is simple:</p>
|
||||
<p>To vend a view:</p>
|
||||
<ol>
|
||||
<li>Create the ViewManager subclass.</li>
|
||||
<li>Implement the <code>createViewInstance</code> method</li>
|
||||
@@ -105,8 +105,10 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation"></a><a href="#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation" 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>3. Expose view property setters using <code>@ReactProp</code> (or <code>@ReactPropGroup</code>) annotation</h2>
|
||||
<p>Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code> (or <code>@ReactPropGroup</code>). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a <code>void</code> method and should be <code>public</code>. Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: <code>boolean</code>, <code>int</code>, <code>float</code>, <code>double</code>, <code>String</code>, <code>Boolean</code>, <code>Integer</code>, <code>ReadableArray</code>, <code>ReadableMap</code>.</p>
|
||||
<p>Annotation <code>@ReactProp</code> has one obligatory argument <code>name</code> of type <code>String</code>. Name assigned to the <code>@ReactProp</code> annotation linked to the setter method is used to reference the property on JS side.</p>
|
||||
<p>Except from <code>name</code>, <code>@ReactProp</code> annotation may take following optional arguments: <code>defaultBoolean</code>, <code>defaultInt</code>, <code>defaultFloat</code>. Those arguments should be of the corresponding primitive type (accordingly <code>boolean</code>, <code>int</code>, <code>float</code>) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, <code>null</code> will be provided as a default value in case when corresponding property gets removed.</p>
|
||||
<!-- alex ignore primitive -->
|
||||
<p>Except from <code>name</code>, <code>@ReactProp</code> annotation may take following optional arguments: <code>defaultBoolean</code>, <code>defaultInt</code>, <code>defaultFloat</code>. Those arguments should be of the corresponding type (accordingly <code>boolean</code>, <code>int</code>, <code>float</code>) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, <code>null</code> will be provided as a default value in case when corresponding property gets removed.</p>
|
||||
<p>Setter declaration requirements for methods annotated with <code>@ReactPropGroup</code> are different than for <code>@ReactProp</code>, please refer to the <code>@ReactPropGroup</code> annotation class docs for more information about it.</p>
|
||||
<!-- alex ignore primitive -->
|
||||
<p><strong>IMPORTANT!</strong> in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using <code>defaultBoolean</code>, <code>defaultFloat</code>, etc. arguments of <code>@ReactProp</code> annotation, for complex types setter will be called with value set to <code>null</code>).</p>
|
||||
<pre><code class="hljs css language-java"> <span class="token annotation punctuation">@ReactProp</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"src"</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setSrc</span><span class="token punctuation">(</span><span class="token class-name">ReactImageView</span> view<span class="token punctuation">,</span> <span class="token annotation punctuation">@Nullable</span> <span class="token class-name">ReadableArray</span> sources<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -150,7 +152,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
</code></pre>
|
||||
<p>The <code>requireNativeComponent</code> function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the <code>MyCustomView</code> example below.</p>
|
||||
<h1><a class="anchor" aria-hidden="true" id="events"></a><a href="#events" 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>Events</h1>
|
||||
<p>So now we know how to expose native view components that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the <code>getId()</code> method.</p>
|
||||
<p>So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the <code>getId()</code> method.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">class</span> <span class="token class-name">MyCustomView</span> <span class="token keyword">extends</span> <span class="token class-name">View</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onReceiveNativeEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><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,13 +68,13 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/native-components-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.</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/native-components-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.</p>
|
||||
<p>Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing <code>ImageView</code> component available in the core React Native library.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="imageview-example"></a><a href="#imageview-example" 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>ImageView example</h2>
|
||||
<p>For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.</p>
|
||||
<p>Native views are created and manipulated by extending <code>ViewManager</code> or more commonly <code>SimpleViewManager</code> . A <code>SimpleViewManager</code> is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.</p>
|
||||
<p>These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the <code>NativeViewHierarchyManager</code>, which delegates back to them to set and update the properties of the views as necessary. The <code>ViewManagers</code> are also typically the delegates for the views, sending events back to JavaScript via the bridge.</p>
|
||||
<p>Vending a view is simple:</p>
|
||||
<p>To vend a view:</p>
|
||||
<ol>
|
||||
<li>Create the ViewManager subclass.</li>
|
||||
<li>Implement the <code>createViewInstance</code> method</li>
|
||||
@@ -105,8 +105,10 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation"></a><a href="#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation" 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>3. Expose view property setters using <code>@ReactProp</code> (or <code>@ReactPropGroup</code>) annotation</h2>
|
||||
<p>Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code> (or <code>@ReactPropGroup</code>). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a <code>void</code> method and should be <code>public</code>. Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: <code>boolean</code>, <code>int</code>, <code>float</code>, <code>double</code>, <code>String</code>, <code>Boolean</code>, <code>Integer</code>, <code>ReadableArray</code>, <code>ReadableMap</code>.</p>
|
||||
<p>Annotation <code>@ReactProp</code> has one obligatory argument <code>name</code> of type <code>String</code>. Name assigned to the <code>@ReactProp</code> annotation linked to the setter method is used to reference the property on JS side.</p>
|
||||
<p>Except from <code>name</code>, <code>@ReactProp</code> annotation may take following optional arguments: <code>defaultBoolean</code>, <code>defaultInt</code>, <code>defaultFloat</code>. Those arguments should be of the corresponding primitive type (accordingly <code>boolean</code>, <code>int</code>, <code>float</code>) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, <code>null</code> will be provided as a default value in case when corresponding property gets removed.</p>
|
||||
<!-- alex ignore primitive -->
|
||||
<p>Except from <code>name</code>, <code>@ReactProp</code> annotation may take following optional arguments: <code>defaultBoolean</code>, <code>defaultInt</code>, <code>defaultFloat</code>. Those arguments should be of the corresponding type (accordingly <code>boolean</code>, <code>int</code>, <code>float</code>) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, <code>null</code> will be provided as a default value in case when corresponding property gets removed.</p>
|
||||
<p>Setter declaration requirements for methods annotated with <code>@ReactPropGroup</code> are different than for <code>@ReactProp</code>, please refer to the <code>@ReactPropGroup</code> annotation class docs for more information about it.</p>
|
||||
<!-- alex ignore primitive -->
|
||||
<p><strong>IMPORTANT!</strong> in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using <code>defaultBoolean</code>, <code>defaultFloat</code>, etc. arguments of <code>@ReactProp</code> annotation, for complex types setter will be called with value set to <code>null</code>).</p>
|
||||
<pre><code class="hljs css language-java"> <span class="token annotation punctuation">@ReactProp</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"src"</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setSrc</span><span class="token punctuation">(</span><span class="token class-name">ReactImageView</span> view<span class="token punctuation">,</span> <span class="token annotation punctuation">@Nullable</span> <span class="token class-name">ReadableArray</span> sources<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -150,7 +152,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
</code></pre>
|
||||
<p>The <code>requireNativeComponent</code> function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the <code>MyCustomView</code> example below.</p>
|
||||
<h1><a class="anchor" aria-hidden="true" id="events"></a><a href="#events" 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>Events</h1>
|
||||
<p>So now we know how to expose native view components that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the <code>getId()</code> method.</p>
|
||||
<p>So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the <code>getId()</code> method.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">class</span> <span class="token class-name">MyCustomView</span> <span class="token keyword">extends</span> <span class="token class-name">View</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onReceiveNativeEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><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,12 +68,12 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/native-components-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.</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/native-components-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.</p>
|
||||
<p>Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing <code>MapView</code> component available in the core React Native library.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="ios-mapview-example"></a><a href="#ios-mapview-example" 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>iOS MapView example</h2>
|
||||
<p>Let's say we want to add an interactive Map to our app - might as well use <a href="https://developer.apple.com/library/prerelease/mac/documentation/MapKit/Reference/MKMapView_Class/index.html"><code>MKMapView</code></a>, we just need to make it usable from JavaScript.</p>
|
||||
<p>Let's say we want to add an interactive Map to our app - might as well use <a href="https://developer.apple.com/library/prerelease/mac/documentation/MapKit/Reference/MKMapView_Class/index.html"><code>MKMapView</code></a>, we only need to make it usable from JavaScript.</p>
|
||||
<p>Native views are created and manipulated by subclasses of <code>RCTViewManager</code>. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They expose native views to the <code>RCTUIManager</code>, which delegates back to them to set and update the properties of the views as necessary. The <code>RCTViewManager</code>s are also typically the delegates for the views, sending events back to JavaScript via the bridge.</p>
|
||||
<p>Exposing a view is simple:</p>
|
||||
<p>To expose a view you can:</p>
|
||||
<ul>
|
||||
<li>Subclass <code>RCTViewManager</code> to create a manager for your component.</li>
|
||||
<li>Add the <code>RCT_EXPORT_MODULE()</code> marker macro.</li>
|
||||
@@ -102,7 +102,7 @@ RCT_EXPORT_MODULE(RNTMap)
|
||||
<blockquote>
|
||||
<p>In the example above, we prefixed our class name with <code>RNT</code>. Prefixes are used to avoid name collisions with other frameworks. Apple frameworks use two-letter prefixes, and React Native uses <code>RCT</code> as a prefix. In order to avoid name collisions, we recommend using a three-letter prefix other than <code>RCT</code> in your own classes.</p>
|
||||
</blockquote>
|
||||
<p>Then you just need a little bit of JavaScript to make this a usable React component:</p>
|
||||
<p>Then you need a little bit of JavaScript to make this a usable React component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
@@ -128,7 +128,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
</code></pre>
|
||||
<p>This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#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>Properties</h2>
|
||||
<p>The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable zooming and specify the visible region. Disabling zoom is a simple boolean, so we add this one line:</p>
|
||||
<p>The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable zooming and specify the visible region. Disabling zoom is a boolean, so we add this one line:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, <span class="hljs-built_in">BOOL</span>)
|
||||
</code></pre>
|
||||
@@ -161,7 +161,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> MapView<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Now we have a nicely documented wrapper component to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Next, let's add the more complex <code>region</code> prop. We start by adding the native code:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
|
||||
@@ -169,7 +169,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion<
|
||||
[view setRegion:json ? [RCTConvert <span class="hljs-built_in">MKCoordinateRegion</span>:json] : defaultView.region animated:<span class="hljs-literal">YES</span>];
|
||||
}
|
||||
</code></pre>
|
||||
<p>Ok, this is more complicated than the simple <code>BOOL</code> case we had before. Now we have a <code>MKCoordinateRegion</code> type that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. Within the function body that we provide, <code>json</code> refers to the raw value that has been passed from JS. There is also a <code>view</code> variable which gives us access to the manager's view instance, and a <code>defaultView</code> that we use to reset the property back to the default value if JS sends us a null sentinel.</p>
|
||||
<p>Ok, this is more complicated than the <code>BOOL</code> case we had before. Now we have a <code>MKCoordinateRegion</code> type that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. Within the function body that we provide, <code>json</code> refers to the raw value that has been passed from JS. There is also a <code>view</code> variable which gives us access to the manager's view instance, and a <code>defaultView</code> that we use to reset the property back to the default value if JS sends us a null sentinel.</p>
|
||||
<p>You could write any conversion function you want for your view - here is the implementation for <code>MKCoordinateRegion</code> via a category on <code>RCTConvert</code>. It uses an already existing category of ReactNative <code>RCTConvert+CoreLocation</code>:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
|
||||
@@ -211,7 +211,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion<
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>These conversion functions are designed to safely process any JSON that the JS might throw at them by displaying "RedBox" errors and returning standard initialization values when missing keys or other developer errors are encountered.</p>
|
||||
<p>To finish up support for the <code>region</code> prop, we need to document it in <code>propTypes</code> (or we'll get an error that the native prop is undocumented), then we can set it just like any other prop:</p>
|
||||
<p>To finish up support for the <code>region</code> prop, we need to document it in <code>propTypes</code> (or we'll get an error that the native prop is undocumented), then we can set it like any other prop:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
|
||||
MapView<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
@@ -262,14 +262,14 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet.</p>
|
||||
<p>Sometimes your native component will have some special properties that you don't want to be part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to add them to the <code>nativeOnly</code> option, e.g.</p>
|
||||
<p>Sometimes your native component will have some reserved properties that you don't want to be part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is to add them to the <code>nativeOnly</code> option, e.g.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> RCTSwitch <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RCTSwitch'</span><span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>onChange<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="events"></a><a href="#events" 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>Events</h2>
|
||||
<p>So now we have a native map component that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region?</p>
|
||||
<p>Until now we've just returned a <code>MKMapView</code> instance from our manager's <code>-(UIView *)view</code> method. We can't add new properties to <code>MKMapView</code> so we have to create a new subclass from <code>MKMapView</code> which we use for our View. We can then add a <code>onRegionChange</code> callback on this subclass:</p>
|
||||
<p>So now we have a native map component that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region?</p>
|
||||
<p>Until now we've only returned a <code>MKMapView</code> instance from our manager's <code>-(UIView *)view</code> method. We can't add new properties to <code>MKMapView</code> so we have to create a new subclass from <code>MKMapView</code> which we use for our View. We can then add a <code>onRegionChange</code> callback on this subclass:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapView.h</span>
|
||||
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
|
||||
@@ -341,7 +341,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion<
|
||||
}
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>In the delegate method <code>-mapView:regionDidChangeAnimated:</code> the event handler block is called on the corresponding view with the region data. Calling the <code>onRegionChange</code> event handler block results in calling the same callback prop in JavaScript. This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:</p>
|
||||
<p>In the delegate method <code>-mapView:regionDidChangeAnimated:</code> the event handler block is called on the corresponding view with the region data. Calling the <code>onRegionChange</code> event handler block results in calling the same callback prop in JavaScript. This callback is invoked with the raw event, which we typically process in the wrapper component to simplify API:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">MapView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application."/><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>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><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,12 +68,12 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/native-components-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.</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/native-components-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.</p>
|
||||
<p>Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing <code>MapView</code> component available in the core React Native library.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="ios-mapview-example"></a><a href="#ios-mapview-example" 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>iOS MapView example</h2>
|
||||
<p>Let's say we want to add an interactive Map to our app - might as well use <a href="https://developer.apple.com/library/prerelease/mac/documentation/MapKit/Reference/MKMapView_Class/index.html"><code>MKMapView</code></a>, we just need to make it usable from JavaScript.</p>
|
||||
<p>Let's say we want to add an interactive Map to our app - might as well use <a href="https://developer.apple.com/library/prerelease/mac/documentation/MapKit/Reference/MKMapView_Class/index.html"><code>MKMapView</code></a>, we only need to make it usable from JavaScript.</p>
|
||||
<p>Native views are created and manipulated by subclasses of <code>RCTViewManager</code>. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They expose native views to the <code>RCTUIManager</code>, which delegates back to them to set and update the properties of the views as necessary. The <code>RCTViewManager</code>s are also typically the delegates for the views, sending events back to JavaScript via the bridge.</p>
|
||||
<p>Exposing a view is simple:</p>
|
||||
<p>To expose a view you can:</p>
|
||||
<ul>
|
||||
<li>Subclass <code>RCTViewManager</code> to create a manager for your component.</li>
|
||||
<li>Add the <code>RCT_EXPORT_MODULE()</code> marker macro.</li>
|
||||
@@ -102,7 +102,7 @@ RCT_EXPORT_MODULE(RNTMap)
|
||||
<blockquote>
|
||||
<p>In the example above, we prefixed our class name with <code>RNT</code>. Prefixes are used to avoid name collisions with other frameworks. Apple frameworks use two-letter prefixes, and React Native uses <code>RCT</code> as a prefix. In order to avoid name collisions, we recommend using a three-letter prefix other than <code>RCT</code> in your own classes.</p>
|
||||
</blockquote>
|
||||
<p>Then you just need a little bit of JavaScript to make this a usable React component:</p>
|
||||
<p>Then you need a little bit of JavaScript to make this a usable React component:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
@@ -128,7 +128,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
</code></pre>
|
||||
<p>This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#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>Properties</h2>
|
||||
<p>The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable zooming and specify the visible region. Disabling zoom is a simple boolean, so we add this one line:</p>
|
||||
<p>The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable zooming and specify the visible region. Disabling zoom is a boolean, so we add this one line:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, <span class="hljs-built_in">BOOL</span>)
|
||||
</code></pre>
|
||||
@@ -161,7 +161,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> MapView<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Now we have a nicely documented wrapper component that is easy to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Now we have a nicely documented wrapper component to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
|
||||
<p>Next, let's add the more complex <code>region</code> prop. We start by adding the native code:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
|
||||
@@ -169,7 +169,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion<
|
||||
[view setRegion:json ? [RCTConvert <span class="hljs-built_in">MKCoordinateRegion</span>:json] : defaultView.region animated:<span class="hljs-literal">YES</span>];
|
||||
}
|
||||
</code></pre>
|
||||
<p>Ok, this is more complicated than the simple <code>BOOL</code> case we had before. Now we have a <code>MKCoordinateRegion</code> type that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. Within the function body that we provide, <code>json</code> refers to the raw value that has been passed from JS. There is also a <code>view</code> variable which gives us access to the manager's view instance, and a <code>defaultView</code> that we use to reset the property back to the default value if JS sends us a null sentinel.</p>
|
||||
<p>Ok, this is more complicated than the <code>BOOL</code> case we had before. Now we have a <code>MKCoordinateRegion</code> type that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. Within the function body that we provide, <code>json</code> refers to the raw value that has been passed from JS. There is also a <code>view</code> variable which gives us access to the manager's view instance, and a <code>defaultView</code> that we use to reset the property back to the default value if JS sends us a null sentinel.</p>
|
||||
<p>You could write any conversion function you want for your view - here is the implementation for <code>MKCoordinateRegion</code> via a category on <code>RCTConvert</code>. It uses an already existing category of ReactNative <code>RCTConvert+CoreLocation</code>:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
|
||||
|
||||
@@ -211,7 +211,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion<
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>These conversion functions are designed to safely process any JSON that the JS might throw at them by displaying "RedBox" errors and returning standard initialization values when missing keys or other developer errors are encountered.</p>
|
||||
<p>To finish up support for the <code>region</code> prop, we need to document it in <code>propTypes</code> (or we'll get an error that the native prop is undocumented), then we can set it just like any other prop:</p>
|
||||
<p>To finish up support for the <code>region</code> prop, we need to document it in <code>propTypes</code> (or we'll get an error that the native prop is undocumented), then we can set it like any other prop:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
|
||||
MapView<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
@@ -262,14 +262,14 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet.</p>
|
||||
<p>Sometimes your native component will have some special properties that you don't want to be part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to add them to the <code>nativeOnly</code> option, e.g.</p>
|
||||
<p>Sometimes your native component will have some reserved properties that you don't want to be part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is to add them to the <code>nativeOnly</code> option, e.g.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> RCTSwitch <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RCTSwitch'</span><span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>onChange<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="events"></a><a href="#events" 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>Events</h2>
|
||||
<p>So now we have a native map component that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region?</p>
|
||||
<p>Until now we've just returned a <code>MKMapView</code> instance from our manager's <code>-(UIView *)view</code> method. We can't add new properties to <code>MKMapView</code> so we have to create a new subclass from <code>MKMapView</code> which we use for our View. We can then add a <code>onRegionChange</code> callback on this subclass:</p>
|
||||
<p>So now we have a native map component that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region?</p>
|
||||
<p>Until now we've only returned a <code>MKMapView</code> instance from our manager's <code>-(UIView *)view</code> method. We can't add new properties to <code>MKMapView</code> so we have to create a new subclass from <code>MKMapView</code> which we use for our View. We can then add a <code>onRegionChange</code> callback on this subclass:</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapView.h</span>
|
||||
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
|
||||
@@ -341,7 +341,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion<
|
||||
}
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>In the delegate method <code>-mapView:regionDidChangeAnimated:</code> the event handler block is called on the corresponding view with the region data. Calling the <code>onRegionChange</code> event handler block results in calling the same callback prop in JavaScript. This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:</p>
|
||||
<p>In the delegate method <code>-mapView:regionDidChangeAnimated:</code> the event handler block is called on the corresponding view with the region data. Calling the <code>onRegionChange</code> event handler block results in calling the same callback prop in JavaScript. This callback is invoked with the raw event, which we typically process in the wrapper component to simplify API:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">MapView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -71,7 +71,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/native-modules-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
<p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-module-setup"></a><a href="#native-module-setup" 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 Module Setup</h2>
|
||||
<p>Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is, from NPM's perspective just like any other media asset, meaning there isn't anything special about it from this point of view. To get the basic scaffolding make sure to read <a href="native-modules-setup">Native Modules Setup</a> guide first.</p>
|
||||
<p>Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is, from NPM's perspective similar to any other media asset, meaning there isn't anything unique about it from this point of view. To get the basic scaffolding make sure to read <a href="native-modules-setup">Native Modules Setup</a> guide first.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="enable-gradle"></a><a href="#enable-gradle" 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>Enable Gradle</h3>
|
||||
<p>If you plan to make changes in Java code, we recommend enabling <a href="https://docs.gradle.org/2.9/userguide/gradle_daemon.html">Gradle Daemon</a> to speed up builds.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-toast-module"></a><a href="#the-toast-module" 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 Toast Module</h2>
|
||||
@@ -189,7 +189,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -><
|
||||
<span class="token keyword">return</span> packages<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>To make it simpler to access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p>
|
||||
<p>To access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p>
|
||||
<p>Create a new JavaScript file named <code>ToastExample.js</code> with the content below:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">/**
|
||||
* This exposes the native ToastExample module as a JS module. This has a
|
||||
@@ -210,7 +210,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<p>Please make sure this JavaScript is in the same hierarchy as <code>ToastExample.js</code>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="beyond-toasts"></a><a href="#beyond-toasts" 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>Beyond Toasts</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="callbacks"></a><a href="#callbacks" 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>Callbacks</h3>
|
||||
<p>Native modules also support a special kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<p>Native modules also support a unique kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Callback</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
@@ -348,7 +348,7 @@ params<span class="token punctuation">.</span><span class="token function">putSt
|
||||
<span class="token comment">// Your logic here</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>We will implement a simple image picker to demonstrate this. The image picker will expose the method <code>pickImage</code> to JavaScript, which will return the path of the image when called.</p>
|
||||
<p>We will implement a basic image picker to demonstrate this. The image picker will expose the method <code>pickImage</code> to JavaScript, which will return the path of the image when called.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ImagePickerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
|
||||
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token keyword">int</span> IMAGE_PICKER_REQUEST <span class="token operator">=</span> <span class="token number">467081</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -71,7 +71,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/native-modules-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
|
||||
<p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-module-setup"></a><a href="#native-module-setup" 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 Module Setup</h2>
|
||||
<p>Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is, from NPM's perspective just like any other media asset, meaning there isn't anything special about it from this point of view. To get the basic scaffolding make sure to read <a href="native-modules-setup">Native Modules Setup</a> guide first.</p>
|
||||
<p>Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is, from NPM's perspective similar to any other media asset, meaning there isn't anything unique about it from this point of view. To get the basic scaffolding make sure to read <a href="native-modules-setup">Native Modules Setup</a> guide first.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="enable-gradle"></a><a href="#enable-gradle" 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>Enable Gradle</h3>
|
||||
<p>If you plan to make changes in Java code, we recommend enabling <a href="https://docs.gradle.org/2.9/userguide/gradle_daemon.html">Gradle Daemon</a> to speed up builds.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-toast-module"></a><a href="#the-toast-module" 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 Toast Module</h2>
|
||||
@@ -189,7 +189,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -><
|
||||
<span class="token keyword">return</span> packages<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>To make it simpler to access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p>
|
||||
<p>To access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p>
|
||||
<p>Create a new JavaScript file named <code>ToastExample.js</code> with the content below:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">/**
|
||||
* This exposes the native ToastExample module as a JS module. This has a
|
||||
@@ -210,7 +210,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<p>Please make sure this JavaScript is in the same hierarchy as <code>ToastExample.js</code>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="beyond-toasts"></a><a href="#beyond-toasts" 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>Beyond Toasts</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="callbacks"></a><a href="#callbacks" 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>Callbacks</h3>
|
||||
<p>Native modules also support a special kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<p>Native modules also support a unique kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Callback</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
@@ -348,7 +348,7 @@ params<span class="token punctuation">.</span><span class="token function">putSt
|
||||
<span class="token comment">// Your logic here</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>We will implement a simple image picker to demonstrate this. The image picker will expose the method <code>pickImage</code> to JavaScript, which will return the path of the image when called.</p>
|
||||
<p>We will implement a basic image picker to demonstrate this. The image picker will expose the method <code>pickImage</code> to JavaScript, which will return the path of the image when called.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ImagePickerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
|
||||
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token keyword">int</span> IMAGE_PICKER_REQUEST <span class="token operator">=</span> <span class="token number">467081</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
<p>Native modules are usually distributed as npm packages, except that for them to be native modules they will contain an Xcode library project. To get the basic scaffolding make sure to read <a href="native-modules-setup">Native Modules Setup</a> guide first.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="ios-calendar-module-example"></a><a href="#ios-calendar-module-example" 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>iOS Calendar Module Example</h2>
|
||||
<p>This guide will use the <a href="https://developer.apple.com/library/mac/documentation/DataManagement/Conceptual/EventKitProgGuide/Introduction/Introduction.html">iOS Calendar API</a> example. Let's say we would like to be able to access the iOS calendar from JavaScript.</p>
|
||||
<p>A native module is just an Objective-C class that implements the <code>RCTBridgeModule</code> protocol. If you are wondering, RCT is an abbreviation of ReaCT.</p>
|
||||
<p>A native module is an Objective-C class that implements the <code>RCTBridgeModule</code> protocol. If you are wondering, RCT is an abbreviation of ReaCT.</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// CalendarManager.h</span>
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTBridgeModule.h></span></span>
|
||||
|
||||
@@ -144,7 +144,7 @@ CalendarManager<span class="token punctuation">.</span><span class="token functi
|
||||
<span class="hljs-built_in">NSDate</span> *date = [RCTConvert <span class="hljs-built_in">NSDate</span>:ISO8601DateString];
|
||||
}
|
||||
</code></pre>
|
||||
<p>But by using the automatic type conversion feature, we can skip the manual conversion step completely, and just write:</p>
|
||||
<p>But by using the automatic type conversion feature, we can skip the manual conversion step completely, and write:</p>
|
||||
<pre><code class="hljs css language-objectivec">RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name location:(<span class="hljs-built_in">NSString</span> *)location date:(<span class="hljs-built_in">NSDate</span> *)date)
|
||||
{
|
||||
<span class="hljs-comment">// Date is ready to use!</span>
|
||||
@@ -191,7 +191,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<p><strong>WARNING</strong></p>
|
||||
<p>This section is more experimental than others because we don't have a solid set of best practices around callbacks yet.</p>
|
||||
</blockquote>
|
||||
<p>Native modules also supports a special kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<p>Native modules also supports a unique kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<pre><code class="hljs css language-objectivec">RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback)
|
||||
{
|
||||
<span class="hljs-built_in">NSArray</span> *events = ...
|
||||
@@ -208,7 +208,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>A native module should invoke its callback exactly once. It's okay to store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates - see <a href="https://github.com/facebook/react-native/blob/master/React/Modules/RCTAlertManager.m"><code>RCTAlertManager</code></a> for an example. If the callback is never invoked, some memory is leaked. If both <code>onSuccess</code> and <code>onFail</code> callbacks are passed, you should only invoke one of them.</p>
|
||||
<p>If you want to pass error-like objects to JavaScript, use <code>RCTMakeError</code> from <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h"><code>RCTUtils.h</code></a>. Right now this just passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript <code>Error</code> objects in the future.</p>
|
||||
<p>If you want to pass error-like objects to JavaScript, use <code>RCTMakeError</code> from <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h"><code>RCTUtils.h</code></a>. Right now this only passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript <code>Error</code> objects in the future.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="promises"></a><a href="#promises" 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>Promises</h2>
|
||||
<p>Native modules can also fulfill a promise, which can simplify your code, especially when using ES2016's <code>async/await</code> syntax. When the last parameters of a bridged native method are an <code>RCTPromiseResolveBlock</code> and <code>RCTPromiseRejectBlock</code>, its corresponding JS method will return a JS Promise object.</p>
|
||||
<p>Refactoring the above code to use a promise instead of callbacks looks like this:</p>
|
||||
@@ -251,7 +251,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="hljs-keyword">return</span> dispatch_queue_create(<span class="hljs-string">"com.facebook.React.AsyncLocalStorageQueue"</span>, DISPATCH_QUEUE_SERIAL);
|
||||
}
|
||||
</code></pre>
|
||||
<p>The specified <code>methodQueue</code> will be shared by all of the methods in your module. If <em>just one</em> of your methods is long-running (or needs to be run on a different queue than the others for some reason), you can use <code>dispatch_async</code> inside the method to perform that particular method's code on another queue, without affecting the others:</p>
|
||||
<p>The specified <code>methodQueue</code> will be shared by all of the methods in your module. If <em>only one</em> of your methods is long-running (or needs to be run on a different queue than the others for some reason), you can use <code>dispatch_async</code> inside the method to perform that particular method's code on another queue, without affecting the others:</p>
|
||||
<pre><code class="hljs css language-objectivec">RCT_EXPORT_METHOD(doSomethingExpensive:(<span class="hljs-built_in">NSString</span> *)param callback:(RCTResponseSenderBlock)callback)
|
||||
{
|
||||
<span class="hljs-built_in">dispatch_async</span>(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, <span class="hljs-number">0</span>), ^{
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
<p>Native modules are usually distributed as npm packages, except that for them to be native modules they will contain an Xcode library project. To get the basic scaffolding make sure to read <a href="native-modules-setup">Native Modules Setup</a> guide first.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="ios-calendar-module-example"></a><a href="#ios-calendar-module-example" 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>iOS Calendar Module Example</h2>
|
||||
<p>This guide will use the <a href="https://developer.apple.com/library/mac/documentation/DataManagement/Conceptual/EventKitProgGuide/Introduction/Introduction.html">iOS Calendar API</a> example. Let's say we would like to be able to access the iOS calendar from JavaScript.</p>
|
||||
<p>A native module is just an Objective-C class that implements the <code>RCTBridgeModule</code> protocol. If you are wondering, RCT is an abbreviation of ReaCT.</p>
|
||||
<p>A native module is an Objective-C class that implements the <code>RCTBridgeModule</code> protocol. If you are wondering, RCT is an abbreviation of ReaCT.</p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// CalendarManager.h</span>
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTBridgeModule.h></span></span>
|
||||
|
||||
@@ -144,7 +144,7 @@ CalendarManager<span class="token punctuation">.</span><span class="token functi
|
||||
<span class="hljs-built_in">NSDate</span> *date = [RCTConvert <span class="hljs-built_in">NSDate</span>:ISO8601DateString];
|
||||
}
|
||||
</code></pre>
|
||||
<p>But by using the automatic type conversion feature, we can skip the manual conversion step completely, and just write:</p>
|
||||
<p>But by using the automatic type conversion feature, we can skip the manual conversion step completely, and write:</p>
|
||||
<pre><code class="hljs css language-objectivec">RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name location:(<span class="hljs-built_in">NSString</span> *)location date:(<span class="hljs-built_in">NSDate</span> *)date)
|
||||
{
|
||||
<span class="hljs-comment">// Date is ready to use!</span>
|
||||
@@ -191,7 +191,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<p><strong>WARNING</strong></p>
|
||||
<p>This section is more experimental than others because we don't have a solid set of best practices around callbacks yet.</p>
|
||||
</blockquote>
|
||||
<p>Native modules also supports a special kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<p>Native modules also supports a unique kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<pre><code class="hljs css language-objectivec">RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback)
|
||||
{
|
||||
<span class="hljs-built_in">NSArray</span> *events = ...
|
||||
@@ -208,7 +208,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>A native module should invoke its callback exactly once. It's okay to store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates - see <a href="https://github.com/facebook/react-native/blob/master/React/Modules/RCTAlertManager.m"><code>RCTAlertManager</code></a> for an example. If the callback is never invoked, some memory is leaked. If both <code>onSuccess</code> and <code>onFail</code> callbacks are passed, you should only invoke one of them.</p>
|
||||
<p>If you want to pass error-like objects to JavaScript, use <code>RCTMakeError</code> from <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h"><code>RCTUtils.h</code></a>. Right now this just passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript <code>Error</code> objects in the future.</p>
|
||||
<p>If you want to pass error-like objects to JavaScript, use <code>RCTMakeError</code> from <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h"><code>RCTUtils.h</code></a>. Right now this only passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript <code>Error</code> objects in the future.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="promises"></a><a href="#promises" 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>Promises</h2>
|
||||
<p>Native modules can also fulfill a promise, which can simplify your code, especially when using ES2016's <code>async/await</code> syntax. When the last parameters of a bridged native method are an <code>RCTPromiseResolveBlock</code> and <code>RCTPromiseRejectBlock</code>, its corresponding JS method will return a JS Promise object.</p>
|
||||
<p>Refactoring the above code to use a promise instead of callbacks looks like this:</p>
|
||||
@@ -251,7 +251,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="hljs-keyword">return</span> dispatch_queue_create(<span class="hljs-string">"com.facebook.React.AsyncLocalStorageQueue"</span>, DISPATCH_QUEUE_SERIAL);
|
||||
}
|
||||
</code></pre>
|
||||
<p>The specified <code>methodQueue</code> will be shared by all of the methods in your module. If <em>just one</em> of your methods is long-running (or needs to be run on a different queue than the others for some reason), you can use <code>dispatch_async</code> inside the method to perform that particular method's code on another queue, without affecting the others:</p>
|
||||
<p>The specified <code>methodQueue</code> will be shared by all of the methods in your module. If <em>only one</em> of your methods is long-running (or needs to be run on a different queue than the others for some reason), you can use <code>dispatch_async</code> inside the method to perform that particular method's code on another queue, without affecting the others:</p>
|
||||
<pre><code class="hljs css language-objectivec">RCT_EXPORT_METHOD(doSomethingExpensive:(<span class="hljs-built_in">NSString</span> *)param callback:(RCTResponseSenderBlock)callback)
|
||||
{
|
||||
<span class="hljs-built_in">dispatch_async</span>(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, <span class="hljs-number">0</span>), ^{
|
||||
|
||||
@@ -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/native-modules-setup.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules Setup</h1></header><article><div><span><p>Native modules are usually distributed as npm packages, except that on top of the usual Javascript they will include some native code per platform. To understand more about npm packages you may find <a href="https://docs.npmjs.com/getting-started/publishing-npm-packages">this guide</a> useful.</p>
|
||||
<p>To get set up with the basic project structure for a native module we will use a third party tool <a href="https://github.com/brodybits/create-react-native-module">create-react-native-module</a>. You can go ahead further and dive deep into how that library works, for our needs we will just need:</p>
|
||||
<p>To get set up with the basic project structure for a native module we will use a third party tool <a href="https://github.com/brodybits/create-react-native-module">create-react-native-module</a>. You can go ahead further and dive deep into how that library works, for our needs we will only need:</p>
|
||||
<pre><code class="hljs">$ <span class="hljs-string">yarn </span><span class="hljs-string">global </span><span class="hljs-string">add </span><span class="hljs-built_in">create-react-native-module</span>
|
||||
$ <span class="hljs-built_in">create-react-native-module</span> <span class="hljs-string">MyLibrary
|
||||
</span></code></pre>
|
||||
|
||||
@@ -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/native-modules-setup.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Native Modules Setup</h1></header><article><div><span><p>Native modules are usually distributed as npm packages, except that on top of the usual Javascript they will include some native code per platform. To understand more about npm packages you may find <a href="https://docs.npmjs.com/getting-started/publishing-npm-packages">this guide</a> useful.</p>
|
||||
<p>To get set up with the basic project structure for a native module we will use a third party tool <a href="https://github.com/brodybits/create-react-native-module">create-react-native-module</a>. You can go ahead further and dive deep into how that library works, for our needs we will just need:</p>
|
||||
<p>To get set up with the basic project structure for a native module we will use a third party tool <a href="https://github.com/brodybits/create-react-native-module">create-react-native-module</a>. You can go ahead further and dive deep into how that library works, for our needs we will only need:</p>
|
||||
<pre><code class="hljs">$ <span class="hljs-string">yarn </span><span class="hljs-string">global </span><span class="hljs-string">add </span><span class="hljs-built_in">create-react-native-module</span>
|
||||
$ <span class="hljs-built_in">create-react-native-module</span> <span class="hljs-string">MyLibrary
|
||||
</span></code></pre>
|
||||
|
||||
@@ -69,10 +69,10 @@
|
||||
}
|
||||
});
|
||||
</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 just 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 an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</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>
|
||||
<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 just a few lines of code.</p>
|
||||
<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>
|
||||
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save react-navigation</span>
|
||||
</code></pre>
|
||||
@@ -115,8 +115,8 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>React Navigation routers make it easy to override navigation logic. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.</p>
|
||||
<p>The views in React Navigation use native components and the <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.</p>
|
||||
<p>React Navigation routers make it quick to override navigation logic. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.</p>
|
||||
<p>The views in React Navigation use native components and the <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be customized.</p>
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/getting-started.html">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://expo.io/@react-navigation/NavigationPlayground">Intro to Navigators</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/platform-specific-code"><span class="arrow-prev">← </span><span>Platform Specific Code</span></a><a class="docs-next button" href="/react-native/docs/0.10/images"><span>Images</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#react-navigation">React Navigation</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>
|
||||
|
||||
@@ -69,10 +69,10 @@
|
||||
}
|
||||
});
|
||||
</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 just 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 an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</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>
|
||||
<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 just a few lines of code.</p>
|
||||
<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>
|
||||
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save react-navigation</span>
|
||||
</code></pre>
|
||||
@@ -115,8 +115,8 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>React Navigation routers make it easy to override navigation logic. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.</p>
|
||||
<p>The views in React Navigation use native components and the <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.</p>
|
||||
<p>React Navigation routers make it quick to override navigation logic. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.</p>
|
||||
<p>The views in React Navigation use native components and the <a href="/react-native/docs/0.10/animated"><code>Animated</code></a> library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be customized.</p>
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/getting-started.html">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://expo.io/@react-navigation/NavigationPlayground">Intro to Navigators</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/platform-specific-code"><span class="arrow-prev">← </span><span>Platform Specific Code</span></a><a class="docs-next button" href="/react-native/docs/0.10/images"><span>Images</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#react-navigation">React Navigation</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>
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The <code>renderScene</code> method is changed to either push or pop the navigator depending on the current route's index. Finally, the <code>Text</code> component in the scene is now wrapped in a <code>TouchableHighlight</code> component to help trigger the navigator transitions.</p>
|
||||
<p>In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The <code>renderScene</code> method is changed to either <code>push</code> or <code>pop</code> the navigator depending on the current route's index. Finally, the <code>Text</code> component in the scene is now wrapped in a <code>TouchableHighlight</code> component to help trigger the navigator transitions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="navigation-bar"></a><a href="#navigation-bar" 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>Navigation Bar</h2>
|
||||
<p>You can optionally pass in your own navigation bar by returning a <code>Navigator.NavigationBar</code> component to the <code>navigationBar</code> prop in <code>Navigator</code>. You can configure the navigation bar properties, through the <code>routeMapper</code> prop. There you set up the left, right, and title properties of the navigation bar:</p>
|
||||
<pre><code class="hljs"><Navigator
|
||||
@@ -375,7 +375,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="pop"></a><a href="#pop" 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><code>pop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Go back N scenes at once. When N=1, behavior matches pop(). When N is invalid (negative or bigger than current routes count), do nothing.</p>
|
||||
<p>Go back N scenes at once. When N=1, behavior matches <code>pop()</code>. When N is invalid (negative or bigger than current routes count), do nothing.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -438,12 +438,12 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptotop"></a><a href="#poptotop" 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><code>popToTop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Pop to the first scene in the stack, unmounting every other scene.</p>
|
||||
<p>Get the first scene in the stack, unmounting every other scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptoroute"></a><a href="#poptoroute" 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><code>popToRoute()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Pop to a particular scene, as specified by its route. All scenes after it will be unmounted.</p>
|
||||
<p>Get a particular scene, as specified by its route. All scenes after it will be unmounted.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -457,7 +457,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="replacepreviousandpopxxxx"></a><a href="#replacepreviousandpopxxxx" 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><code>replacePreviousAndPopXXXX()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the previous scene and pop to it.</p>
|
||||
<p>Replace the previous scene and get to it.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The <code>renderScene</code> method is changed to either push or pop the navigator depending on the current route's index. Finally, the <code>Text</code> component in the scene is now wrapped in a <code>TouchableHighlight</code> component to help trigger the navigator transitions.</p>
|
||||
<p>In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The <code>renderScene</code> method is changed to either <code>push</code> or <code>pop</code> the navigator depending on the current route's index. Finally, the <code>Text</code> component in the scene is now wrapped in a <code>TouchableHighlight</code> component to help trigger the navigator transitions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="navigation-bar"></a><a href="#navigation-bar" 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>Navigation Bar</h2>
|
||||
<p>You can optionally pass in your own navigation bar by returning a <code>Navigator.NavigationBar</code> component to the <code>navigationBar</code> prop in <code>Navigator</code>. You can configure the navigation bar properties, through the <code>routeMapper</code> prop. There you set up the left, right, and title properties of the navigation bar:</p>
|
||||
<pre><code class="hljs"><Navigator
|
||||
@@ -375,7 +375,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="pop"></a><a href="#pop" 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><code>pop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Go back N scenes at once. When N=1, behavior matches pop(). When N is invalid (negative or bigger than current routes count), do nothing.</p>
|
||||
<p>Go back N scenes at once. When N=1, behavior matches <code>pop()</code>. When N is invalid (negative or bigger than current routes count), do nothing.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -438,12 +438,12 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptotop"></a><a href="#poptotop" 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><code>popToTop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Pop to the first scene in the stack, unmounting every other scene.</p>
|
||||
<p>Get the first scene in the stack, unmounting every other scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptoroute"></a><a href="#poptoroute" 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><code>popToRoute()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Pop to a particular scene, as specified by its route. All scenes after it will be unmounted.</p>
|
||||
<p>Get a particular scene, as specified by its route. All scenes after it will be unmounted.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -457,7 +457,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="replacepreviousandpopxxxx"></a><a href="#replacepreviousandpopxxxx" 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><code>replacePreviousAndPopXXXX()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the previous scene and pop to it.</p>
|
||||
<p>Replace the previous scene and get to it.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Networking · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Networking · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server."/><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>Networking · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Networking · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server."/><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,11 +68,11 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/network.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Networking</h1></header><article><div><span><p>Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server.</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/network.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Networking</h1></header><article><div><span><p>Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="using-fetch"></a><a href="#using-fetch" 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>Using Fetch</h2>
|
||||
<p>React Native provides the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> for your networking needs. Fetch will seem familiar if you have used <code>XMLHttpRequest</code> or other networking APIs before. You may refer to MDN's guide on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> for additional information.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="making-requests"></a><a href="#making-requests" 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 requests</h4>
|
||||
<p>In order to fetch content from an arbitrary URL, just pass the URL to fetch:</p>
|
||||
<p>In order to fetch content from an arbitrary URL, you can pass the URL to fetch:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://mywebsite.com/mydata.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:</p>
|
||||
@@ -183,7 +183,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><blockquote>
|
||||
<p>By default, iOS will block any request that's not encrypted using <a href="https://hosting.review/web-hosting-glossary/#12">SSL</a>. If you need to fetch from a cleartext URL (one that begins with <code>http</code>) you will first need to <a href="/react-native/docs/0.10/integration-with-existing-apps#test-your-integration">add an App Transport Security exception</a>. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can <a href="/react-native/docs/0.10/integration-with-existing-apps#app-transport-security">disable ATS completely</a>. Note however that from January 2017, <a href="https://forums.developer.apple.com/thread/48979">Apple's App Store review will require reasonable justification for disabling ATS</a>. See <a href="https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33">Apple's documentation</a> for more information.</p>
|
||||
<p>By default, iOS will block any request that's not encrypted using <a href="https://hosting.review/web-hosting-glossary/#12">SSL</a>. If you need to fetch from a cleartext URL (one that begins with <code>http</code>) you will first need to <a href="/react-native/docs/0.10/integration-with-existing-apps#test-your-integration">add an App Transport Security exception</a>. If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can <a href="/react-native/docs/0.10/integration-with-existing-apps#app-transport-security">disable ATS completely</a>. Note however that from January 2017, <a href="https://forums.developer.apple.com/thread/48979">Apple's App Store review will require reasonable justification for disabling ATS</a>. See <a href="https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33">Apple's documentation</a> for more information.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-other-networking-libraries"></a><a href="#using-other-networking-libraries" 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>Using Other Networking Libraries</h3>
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest API</a> is built into React Native. This means that you can use third party libraries such as <a href="https://github.com/niftylettuce/frisbee">frisbee</a> or <a href="https://github.com/mzabriskie/axios">axios</a> that depend on it, or you can use the XMLHttpRequest API directly if you prefer.</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>Networking · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Networking · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server."/><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>Networking · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Networking · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server."/><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,11 +68,11 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</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/network.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Networking</h1></header><article><div><span><p>Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server.</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/network.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Networking</h1></header><article><div><span><p>Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="using-fetch"></a><a href="#using-fetch" 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>Using Fetch</h2>
|
||||
<p>React Native provides the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> for your networking needs. Fetch will seem familiar if you have used <code>XMLHttpRequest</code> or other networking APIs before. You may refer to MDN's guide on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> for additional information.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="making-requests"></a><a href="#making-requests" 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 requests</h4>
|
||||
<p>In order to fetch content from an arbitrary URL, just pass the URL to fetch:</p>
|
||||
<p>In order to fetch content from an arbitrary URL, you can pass the URL to fetch:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://mywebsite.com/mydata.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:</p>
|
||||
@@ -183,7 +183,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><blockquote>
|
||||
<p>By default, iOS will block any request that's not encrypted using <a href="https://hosting.review/web-hosting-glossary/#12">SSL</a>. If you need to fetch from a cleartext URL (one that begins with <code>http</code>) you will first need to <a href="/react-native/docs/0.10/integration-with-existing-apps#test-your-integration">add an App Transport Security exception</a>. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can <a href="/react-native/docs/0.10/integration-with-existing-apps#app-transport-security">disable ATS completely</a>. Note however that from January 2017, <a href="https://forums.developer.apple.com/thread/48979">Apple's App Store review will require reasonable justification for disabling ATS</a>. See <a href="https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33">Apple's documentation</a> for more information.</p>
|
||||
<p>By default, iOS will block any request that's not encrypted using <a href="https://hosting.review/web-hosting-glossary/#12">SSL</a>. If you need to fetch from a cleartext URL (one that begins with <code>http</code>) you will first need to <a href="/react-native/docs/0.10/integration-with-existing-apps#test-your-integration">add an App Transport Security exception</a>. If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can <a href="/react-native/docs/0.10/integration-with-existing-apps#app-transport-security">disable ATS completely</a>. Note however that from January 2017, <a href="https://forums.developer.apple.com/thread/48979">Apple's App Store review will require reasonable justification for disabling ATS</a>. See <a href="https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33">Apple's documentation</a> for more information.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-other-networking-libraries"></a><a href="#using-other-networking-libraries" 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>Using Other Networking Libraries</h3>
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest API</a> is built into React Native. This means that you can use third party libraries such as <a href="https://github.com/niftylettuce/frisbee">frisbee</a> or <a href="https://github.com/mzabriskie/axios">axios</a> that depend on it, or you can use the XMLHttpRequest API directly if you prefer.</p>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<li><p><strong>VirtualizedList:</strong> The component behind <code>FlatList</code> (React Native's implementation of the <a href="https://bvaughn.github.io/react-virtualized/#/components/List"><code>Virtual List</code></a> concept.)</p></li>
|
||||
<li><p><strong>Memory consumption:</strong> How much information about your list is being stored in memory, which could lead to an app crash.</p></li>
|
||||
<li><p><strong>Responsiveness:</strong> Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.</p></li>
|
||||
<li><p><strong>Blank areas:</strong> When <code>VirtualizedList</code> can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank white space.</p></li>
|
||||
<li><p><strong>Blank areas:</strong> When <code>VirtualizedList</code> can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.</p></li>
|
||||
<li><p><strong>Viewport:</strong> The visible area of content that is rendered to pixels.</p></li>
|
||||
<li><p><strong>Window:</strong> The area in which items should be mounted, which is generally much larger than the viewport.</p></li>
|
||||
</ul>
|
||||
@@ -34,7 +34,7 @@
|
||||
</table>
|
||||
<p>If <code>true</code>, views that are outside of the viewport are detached from the native view hierarchy.</p>
|
||||
<p><strong>Pros:</strong> This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.</p>
|
||||
<p><strong>Cons:</strong> Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, just detached.</p>
|
||||
<p><strong>Cons:</strong> Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="maxtorenderperbatch"></a><a href="#maxtorenderperbatch" 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>maxToRenderPerBatch</h3>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -97,12 +97,12 @@
|
||||
<p><strong>Cons:</strong> Extra memory consumption and more app crash risk in large lists (100+) with complex items. It also warns that the above tweaks will not work because now it is using <code>ListView</code>. Many other features are not supported. There may be other bugs since <code>ListView</code> is deprecated.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="list-items"></a><a href="#list-items" 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>List items</h2>
|
||||
<p>Below are some tips about list item components. They are the core of your list, so they need to be fast.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-simple-components"></a><a href="#use-simple-components" 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>Use simple components</h3>
|
||||
<p>The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component just for your big lists and make them with as little logic and nesting as possible.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-basic-components"></a><a href="#use-basic-components" 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>Use basic components</h3>
|
||||
<p>The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-light-components"></a><a href="#use-light-components" 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>Use light components</h3>
|
||||
<p>The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-shouldcomponentupdate"></a><a href="#use-shouldcomponentupdate" 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>Use shouldComponentUpdate</h3>
|
||||
<p>Implement update verification to your components. React's <code>PureComponent</code> implement a <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate"><code>shouldComponentUpdate</code></a> with shallow comparison. This is expensive here because it need to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is simple enough, you could even use</p>
|
||||
<p>Implement update verification to your components. React's <code>PureComponent</code> implement a <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate"><code>shouldComponentUpdate</code></a> with shallow comparison. This is expensive here because it need to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token boolean">false</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -130,7 +130,7 @@
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#terms">Terms</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#removeclippedsubviews">removeClippedSubviews</a></li><li><a href="#maxtorenderperbatch">maxToRenderPerBatch</a></li><li><a href="#updatecellsbatchingperiod">updateCellsBatchingPeriod</a></li><li><a href="#initialnumtorender">initialNumToRender</a></li><li><a href="#windowsize">windowSize</a></li><li><a href="#legacyimplementation">legacyImplementation</a></li></ul></li><li><a href="#list-items">List items</a><ul class="toc-headings"><li><a href="#use-simple-components">Use simple components</a></li><li><a href="#use-light-components">Use light components</a></li><li><a href="#use-shouldcomponentupdate">Use shouldComponentUpdate</a></li><li><a href="#use-cached-optimized-images">Use cached optimized images</a></li><li><a href="#use-getitemlayout">Use getItemLayout</a></li><li><a href="#use-keyextractor-or-key">Use keyExtractor or key</a></li><li><a href="#avoid-anonymous-function-on-renderitem">Avoid anonymous function on renderItem</a></li></ul></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"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#terms">Terms</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#removeclippedsubviews">removeClippedSubviews</a></li><li><a href="#maxtorenderperbatch">maxToRenderPerBatch</a></li><li><a href="#updatecellsbatchingperiod">updateCellsBatchingPeriod</a></li><li><a href="#initialnumtorender">initialNumToRender</a></li><li><a href="#windowsize">windowSize</a></li><li><a href="#legacyimplementation">legacyImplementation</a></li></ul></li><li><a href="#list-items">List items</a><ul class="toc-headings"><li><a href="#use-basic-components">Use basic components</a></li><li><a href="#use-light-components">Use light components</a></li><li><a href="#use-shouldcomponentupdate">Use shouldComponentUpdate</a></li><li><a href="#use-cached-optimized-images">Use cached optimized images</a></li><li><a href="#use-getitemlayout">Use getItemLayout</a></li><li><a href="#use-keyextractor-or-key">Use keyExtractor or key</a></li><li><a href="#avoid-anonymous-function-on-renderitem">Avoid anonymous function on renderItem</a></li></ul></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) {
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<li><p><strong>VirtualizedList:</strong> The component behind <code>FlatList</code> (React Native's implementation of the <a href="https://bvaughn.github.io/react-virtualized/#/components/List"><code>Virtual List</code></a> concept.)</p></li>
|
||||
<li><p><strong>Memory consumption:</strong> How much information about your list is being stored in memory, which could lead to an app crash.</p></li>
|
||||
<li><p><strong>Responsiveness:</strong> Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.</p></li>
|
||||
<li><p><strong>Blank areas:</strong> When <code>VirtualizedList</code> can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank white space.</p></li>
|
||||
<li><p><strong>Blank areas:</strong> When <code>VirtualizedList</code> can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.</p></li>
|
||||
<li><p><strong>Viewport:</strong> The visible area of content that is rendered to pixels.</p></li>
|
||||
<li><p><strong>Window:</strong> The area in which items should be mounted, which is generally much larger than the viewport.</p></li>
|
||||
</ul>
|
||||
@@ -34,7 +34,7 @@
|
||||
</table>
|
||||
<p>If <code>true</code>, views that are outside of the viewport are detached from the native view hierarchy.</p>
|
||||
<p><strong>Pros:</strong> This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.</p>
|
||||
<p><strong>Cons:</strong> Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, just detached.</p>
|
||||
<p><strong>Cons:</strong> Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="maxtorenderperbatch"></a><a href="#maxtorenderperbatch" 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>maxToRenderPerBatch</h3>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -97,12 +97,12 @@
|
||||
<p><strong>Cons:</strong> Extra memory consumption and more app crash risk in large lists (100+) with complex items. It also warns that the above tweaks will not work because now it is using <code>ListView</code>. Many other features are not supported. There may be other bugs since <code>ListView</code> is deprecated.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="list-items"></a><a href="#list-items" 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>List items</h2>
|
||||
<p>Below are some tips about list item components. They are the core of your list, so they need to be fast.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-simple-components"></a><a href="#use-simple-components" 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>Use simple components</h3>
|
||||
<p>The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component just for your big lists and make them with as little logic and nesting as possible.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-basic-components"></a><a href="#use-basic-components" 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>Use basic components</h3>
|
||||
<p>The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-light-components"></a><a href="#use-light-components" 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>Use light components</h3>
|
||||
<p>The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="use-shouldcomponentupdate"></a><a href="#use-shouldcomponentupdate" 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>Use shouldComponentUpdate</h3>
|
||||
<p>Implement update verification to your components. React's <code>PureComponent</code> implement a <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate"><code>shouldComponentUpdate</code></a> with shallow comparison. This is expensive here because it need to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is simple enough, you could even use</p>
|
||||
<p>Implement update verification to your components. React's <code>PureComponent</code> implement a <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate"><code>shouldComponentUpdate</code></a> with shallow comparison. This is expensive here because it need to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token boolean">false</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -130,7 +130,7 @@
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#terms">Terms</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#removeclippedsubviews">removeClippedSubviews</a></li><li><a href="#maxtorenderperbatch">maxToRenderPerBatch</a></li><li><a href="#updatecellsbatchingperiod">updateCellsBatchingPeriod</a></li><li><a href="#initialnumtorender">initialNumToRender</a></li><li><a href="#windowsize">windowSize</a></li><li><a href="#legacyimplementation">legacyImplementation</a></li></ul></li><li><a href="#list-items">List items</a><ul class="toc-headings"><li><a href="#use-simple-components">Use simple components</a></li><li><a href="#use-light-components">Use light components</a></li><li><a href="#use-shouldcomponentupdate">Use shouldComponentUpdate</a></li><li><a href="#use-cached-optimized-images">Use cached optimized images</a></li><li><a href="#use-getitemlayout">Use getItemLayout</a></li><li><a href="#use-keyextractor-or-key">Use keyExtractor or key</a></li><li><a href="#avoid-anonymous-function-on-renderitem">Avoid anonymous function on renderItem</a></li></ul></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"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#terms">Terms</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#removeclippedsubviews">removeClippedSubviews</a></li><li><a href="#maxtorenderperbatch">maxToRenderPerBatch</a></li><li><a href="#updatecellsbatchingperiod">updateCellsBatchingPeriod</a></li><li><a href="#initialnumtorender">initialNumToRender</a></li><li><a href="#windowsize">windowSize</a></li><li><a href="#legacyimplementation">legacyImplementation</a></li></ul></li><li><a href="#list-items">List items</a><ul class="toc-headings"><li><a href="#use-basic-components">Use basic components</a></li><li><a href="#use-light-components">Use light components</a></li><li><a href="#use-shouldcomponentupdate">Use shouldComponentUpdate</a></li><li><a href="#use-cached-optimized-images">Use cached optimized images</a></li><li><a href="#use-getitemlayout">Use getItemLayout</a></li><li><a href="#use-keyextractor-or-key">Use keyExtractor or key</a></li><li><a href="#avoid-anonymous-function-on-renderitem">Avoid anonymous function on renderItem</a></li></ul></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>PanResponder · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="PanResponder · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures."/><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>PanResponder · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="PanResponder · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures."/><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/panresponder.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">PanResponder</h1></header><article><div><span><p><code>PanResponder</code> reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.</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/panresponder.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">PanResponder</h1></header><article><div><span><p><code>PanResponder</code> reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.</p>
|
||||
<p>By default, <code>PanResponder</code> holds an <code>InteractionManager</code> handle to block long-running JS events from interrupting active gestures.</p>
|
||||
<p>It provides a predictable wrapper of the responder handlers provided by the <a href="/react-native/docs/0.10/gesture-responder-system">gesture responder system</a>. For each handler, it provides a new <code>gestureState</code> object alongside the native event object:</p>
|
||||
<pre><code class="hljs">onPanResponderMove: <span class="hljs-function"><span class="hljs-params">(event, gestureState)</span> =></span> {}
|
||||
@@ -101,7 +101,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="create"></a><a href="#create" 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><code>create()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">PanResponder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Enhanced versions of all of the responder callbacks that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the <code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with <code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks.</p>
|
||||
<p>Enhanced versions of all of the responder callbacks that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the <code>PanResponder</code> gesture state by replacing the word <code>Responder</code> with <code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks.</p>
|
||||
<p>For example, the <code>config</code> object would look like:</p>
|
||||
<ul>
|
||||
<li><code>onMoveShouldSetPanResponder: (e, gestureState) => {...}</code></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>PanResponder · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="PanResponder · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures."/><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>PanResponder · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="PanResponder · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures."/><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/panresponder.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">PanResponder</h1></header><article><div><span><p><code>PanResponder</code> reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.</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/panresponder.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">PanResponder</h1></header><article><div><span><p><code>PanResponder</code> reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.</p>
|
||||
<p>By default, <code>PanResponder</code> holds an <code>InteractionManager</code> handle to block long-running JS events from interrupting active gestures.</p>
|
||||
<p>It provides a predictable wrapper of the responder handlers provided by the <a href="/react-native/docs/0.10/gesture-responder-system">gesture responder system</a>. For each handler, it provides a new <code>gestureState</code> object alongside the native event object:</p>
|
||||
<pre><code class="hljs">onPanResponderMove: <span class="hljs-function"><span class="hljs-params">(event, gestureState)</span> =></span> {}
|
||||
@@ -101,7 +101,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="create"></a><a href="#create" 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><code>create()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">PanResponder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Enhanced versions of all of the responder callbacks that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the <code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with <code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks.</p>
|
||||
<p>Enhanced versions of all of the responder callbacks that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the <code>PanResponder</code> gesture state by replacing the word <code>Responder</code> with <code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks.</p>
|
||||
<p>For example, the <code>config</code> object would look like:</p>
|
||||
<ul>
|
||||
<li><code>onMoveShouldSetPanResponder: (e, gestureState) => {...}</code></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>Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible."/><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>Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible."/><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/performance.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Performance</h1></header><article><div><span><p>A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible.</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/performance.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Performance</h1></header><article><div><span><p>A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible.</p>
|
||||
<p>This guide is intended to teach you some basics to help you to <a href="/react-native/docs/0.10/performance#profiling">troubleshoot performance issues</a>, as well as discuss <a href="/react-native/docs/0.10/performance#common-sources-of-performance-problems">common sources of problems and their suggested solutions</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="what-you-need-to-know-about-frames"></a><a href="#what-you-need-to-know-about-frames" 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>What you need to know about frames</h2>
|
||||
<p>Your grandparents' generation called movies <a href="https://www.youtube.com/watch?v=F1i40rnpOsA">"moving pictures"</a> for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
@@ -99,7 +99,7 @@
|
||||
<p>Use the new <a href="/react-native/docs/0.10/flatlist"><code>FlatList</code></a> or <a href="/react-native/docs/0.10/sectionlist"><code>SectionList</code></a> component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.</p>
|
||||
<p>If your <a href="/react-native/docs/0.10/flatlist"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="https://facebook.github.io/react-native/docs/flatlist.html#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes" 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>JS FPS plunges when re-rendering a view that hardly changes</h3>
|
||||
<p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.</p>
|
||||
<p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would only need to be a reference equality check.</p>
|
||||
<p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time"></a><a href="#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time" 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>Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time</h3>
|
||||
<p>"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.</p>
|
||||
@@ -188,7 +188,7 @@
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>Notice that the JS thread is executing almost all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -217,7 +217,7 @@
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<p>There isn't a quick way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="ram-bundles-inline-requires"></a><a href="#ram-bundles-inline-requires" 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>RAM bundles + inline requires</h2>
|
||||
<p>If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the RAM format and requiring those features and screens inline (when they are actually used).</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="loading-javascript"></a><a href="#loading-javascript" 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>Loading JavaScript</h3>
|
||||
@@ -353,7 +353,7 @@ export <span class="hljs-keyword">default</span> <span class="hljs-class"><span
|
||||
|
||||
<span class="hljs-built_in">module</span>.exports = config;
|
||||
</code></pre>
|
||||
<p>The <code>preloadedModules</code> entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The blacklist entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced.</p>
|
||||
<p>The <code>preloadedModules</code> entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The <code>blacklist</code> entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="test-and-measure-improvements"></a><a href="#test-and-measure-improvements" 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>Test and Measure Improvements</h3>
|
||||
<p>You should now be ready to build your app using the RAM format and inline requires. Make sure you measure the before and after startup times.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/debugging"><span class="arrow-prev">← </span><span>Debugging</span></a><a class="docs-next button" href="/react-native/docs/0.10/gesture-responder-system"><span>Gesture Responder System</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#what-you-need-to-know-about-frames">What you need to know about frames</a><ul class="toc-headings"><li><a href="#js-frame-rate-javascript-thread">JS frame rate (JavaScript thread)</a></li><li><a href="#ui-frame-rate-main-thread">UI frame rate (main thread)</a></li></ul></li><li><a href="#common-sources-of-performance-problems">Common sources of performance problems</a><ul class="toc-headings"><li><a href="#running-in-development-mode-dev-true">Running in development mode (<code>dev=true</code>)</a></li><li><a href="#using-consolelog-statements">Using <code>console.log</code> statements</a></li><li><a href="#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"><code>ListView</code> initial rendering is too slow or scroll performance is bad for large lists</a></li><li><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes">JS FPS plunges when re-rendering a view that hardly changes</a></li><li><a href="#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time">Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time</a></li><li><a href="#moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps">Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS</a></li><li><a href="#animating-the-size-of-an-image-drops-ui-thread-fps">Animating the size of an image drops UI thread FPS</a></li><li><a href="#my-touchablex-view-isnt-very-responsive">My TouchableX view isn't very responsive</a></li><li><a href="#slow-navigator-transitions">Slow navigator transitions</a></li></ul></li><li><a href="#profiling">Profiling</a><ul class="toc-headings"><li><a href="#profiling-android-ui-performance-with-systrace">Profiling Android UI Performance with <code>systrace</code></a></li></ul></li><li><a href="#ram-bundles-inline-requires">RAM bundles + inline requires</a><ul class="toc-headings"><li><a href="#loading-javascript">Loading JavaScript</a></li><li><a href="#inline-requires">Inline Requires</a></li><li><a href="#enable-the-ram-format">Enable the RAM format</a></li><li><a href="#configure-preloading-and-inline-requires">Configure Preloading and Inline Requires</a></li><li><a href="#investigating-the-loaded-modules">Investigating the Loaded Modules</a></li><li><a href="#updating-the-metroconfigjs">Updating the metro.config.js</a></li><li><a href="#test-and-measure-improvements">Test and Measure Improvements</a></li></ul></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'));
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible."/><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>Performance · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Performance · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible."/><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/performance.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Performance</h1></header><article><div><span><p>A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible.</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/performance.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Performance</h1></header><article><div><span><p>A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible.</p>
|
||||
<p>This guide is intended to teach you some basics to help you to <a href="/react-native/docs/0.10/performance#profiling">troubleshoot performance issues</a>, as well as discuss <a href="/react-native/docs/0.10/performance#common-sources-of-performance-problems">common sources of problems and their suggested solutions</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="what-you-need-to-know-about-frames"></a><a href="#what-you-need-to-know-about-frames" 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>What you need to know about frames</h2>
|
||||
<p>Your grandparents' generation called movies <a href="https://www.youtube.com/watch?v=F1i40rnpOsA">"moving pictures"</a> for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
@@ -99,7 +99,7 @@
|
||||
<p>Use the new <a href="/react-native/docs/0.10/flatlist"><code>FlatList</code></a> or <a href="/react-native/docs/0.10/sectionlist"><code>SectionList</code></a> component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.</p>
|
||||
<p>If your <a href="/react-native/docs/0.10/flatlist"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="https://facebook.github.io/react-native/docs/flatlist.html#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes" 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>JS FPS plunges when re-rendering a view that hardly changes</h3>
|
||||
<p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.</p>
|
||||
<p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would only need to be a reference equality check.</p>
|
||||
<p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time"></a><a href="#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time" 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>Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time</h3>
|
||||
<p>"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.</p>
|
||||
@@ -188,7 +188,7 @@
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>Notice that the JS thread is executing almost all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -217,7 +217,7 @@
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<p>There isn't a quick way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="ram-bundles-inline-requires"></a><a href="#ram-bundles-inline-requires" 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>RAM bundles + inline requires</h2>
|
||||
<p>If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the RAM format and requiring those features and screens inline (when they are actually used).</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="loading-javascript"></a><a href="#loading-javascript" 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>Loading JavaScript</h3>
|
||||
@@ -353,7 +353,7 @@ export <span class="hljs-keyword">default</span> <span class="hljs-class"><span
|
||||
|
||||
<span class="hljs-built_in">module</span>.exports = config;
|
||||
</code></pre>
|
||||
<p>The <code>preloadedModules</code> entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The blacklist entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced.</p>
|
||||
<p>The <code>preloadedModules</code> entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The <code>blacklist</code> entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="test-and-measure-improvements"></a><a href="#test-and-measure-improvements" 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>Test and Measure Improvements</h3>
|
||||
<p>You should now be ready to build your app using the RAM format and inline requires. Make sure you measure the before and after startup times.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/debugging"><span class="arrow-prev">← </span><span>Debugging</span></a><a class="docs-next button" href="/react-native/docs/0.10/gesture-responder-system"><span>Gesture Responder System</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#what-you-need-to-know-about-frames">What you need to know about frames</a><ul class="toc-headings"><li><a href="#js-frame-rate-javascript-thread">JS frame rate (JavaScript thread)</a></li><li><a href="#ui-frame-rate-main-thread">UI frame rate (main thread)</a></li></ul></li><li><a href="#common-sources-of-performance-problems">Common sources of performance problems</a><ul class="toc-headings"><li><a href="#running-in-development-mode-dev-true">Running in development mode (<code>dev=true</code>)</a></li><li><a href="#using-consolelog-statements">Using <code>console.log</code> statements</a></li><li><a href="#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"><code>ListView</code> initial rendering is too slow or scroll performance is bad for large lists</a></li><li><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes">JS FPS plunges when re-rendering a view that hardly changes</a></li><li><a href="#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time">Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time</a></li><li><a href="#moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps">Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS</a></li><li><a href="#animating-the-size-of-an-image-drops-ui-thread-fps">Animating the size of an image drops UI thread FPS</a></li><li><a href="#my-touchablex-view-isnt-very-responsive">My TouchableX view isn't very responsive</a></li><li><a href="#slow-navigator-transitions">Slow navigator transitions</a></li></ul></li><li><a href="#profiling">Profiling</a><ul class="toc-headings"><li><a href="#profiling-android-ui-performance-with-systrace">Profiling Android UI Performance with <code>systrace</code></a></li></ul></li><li><a href="#ram-bundles-inline-requires">RAM bundles + inline requires</a><ul class="toc-headings"><li><a href="#loading-javascript">Loading JavaScript</a></li><li><a href="#inline-requires">Inline Requires</a></li><li><a href="#enable-the-ram-format">Enable the RAM format</a></li><li><a href="#configure-preloading-and-inline-requires">Configure Preloading and Inline Requires</a></li><li><a href="#investigating-the-loaded-modules">Investigating the Loaded Modules</a></li><li><a href="#updating-the-metroconfigjs">Updating the metro.config.js</a></li><li><a href="#test-and-measure-improvements">Test and Measure Improvements</a></li></ul></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'));
|
||||
|
||||
@@ -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/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>
|
||||
<p>React Native provides two ways to easily organize your code and separate it by platform:</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>
|
||||
<li>Using <a href="/react-native/docs/0.10/platform-specific-code#platform-specific-extensions">platform-specific file extensions</a>.</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/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>
|
||||
<p>React Native provides two ways to easily organize your code and separate it by platform:</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>
|
||||
<li>Using <a href="/react-native/docs/0.10/platform-specific-code#platform-specific-extensions">platform-specific file extensions</a>.</li>
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>Notice the braces surrounding <code>{pic}</code> - these embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p>
|
||||
></div></div></div><p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, similar to the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you can invent new ones.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.10/view"><code>View</code></a> component. A <a href="/react-native/docs/0.10/view"><code>View</code></a> is useful as a container for other components, to help control style and layout.</p>
|
||||
<p>With <code>props</code> and the basic <a href="/react-native/docs/0.10/text"><code>Text</code></a>, <a href="/react-native/docs/0.10/image"><code>Image</code></a>, and <a href="/react-native/docs/0.10/view"><code>View</code></a> components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to <a href="/react-native/docs/0.10/state">learn about State</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/tutorial"><span class="arrow-prev">← </span><span>Learn the Basics</span></a><a class="docs-next button" href="/react-native/docs/0.10/state"><span>State</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></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'));
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>Notice the braces surrounding <code>{pic}</code> - these embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p>
|
||||
></div></div></div><p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, similar to the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you can invent new ones.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.10/view"><code>View</code></a> component. A <a href="/react-native/docs/0.10/view"><code>View</code></a> is useful as a container for other components, to help control style and layout.</p>
|
||||
<p>With <code>props</code> and the basic <a href="/react-native/docs/0.10/text"><code>Text</code></a>, <a href="/react-native/docs/0.10/image"><code>Image</code></a>, and <a href="/react-native/docs/0.10/view"><code>View</code></a> components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to <a href="/react-native/docs/0.10/state">learn about State</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/tutorial"><span class="arrow-prev">← </span><span>Learn the Basics</span></a><a class="docs-next button" href="/react-native/docs/0.10/state"><span>State</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></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'));
|
||||
|
||||
@@ -223,10 +223,12 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<li>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</li>
|
||||
<li>Open your React Native app on your device.</li>
|
||||
<li>You'll see a <a href="/react-native/docs/0.10/debugging#in-app-errors-and-warnings">red screen with an error</a>. This is OK. The following steps will fix that.</li>
|
||||
<li>Open the in-app <a href="/react-native/docs/0.10/debugging#accessing-the-in-app-developer-menu">Developer menu</a>.</li>
|
||||
<li>Go to <strong>Dev Settings</strong> → <strong>Debug server host & port for device</strong>.</li>
|
||||
<li>Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).</li>
|
||||
<li>Go back to the <strong>Developer menu</strong> and select <strong>Reload JS</strong>.</li>
|
||||
<li>Open the in-app <a href="/react-native/docs/0.10/debugging#accessing-the-in-app-developer-menu">Developer menu</a>.
|
||||
<!-- alex ignore host -->
|
||||
5. Go to **Dev Settings** → **Debug server host & port for device**.
|
||||
6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
|
||||
7. Go back to the **Developer menu** and select **Reload JS**.
|
||||
</li>
|
||||
</ol>
|
||||
<p>You can now enable Live reloading from the <a href="/react-native/docs/0.10/debugging#accessing-the-in-app-developer-menu">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><block class="mac ios" /></p>
|
||||
@@ -246,7 +248,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="pro-tips"></a><a href="#pro-tips" 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>Pro Tips</h4>
|
||||
<p>As your App Bundle grows in size, you may start to see a white screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to <code>AppDelegate.m</code> in order to keep your splash screen displayed during the transition.</p>
|
||||
<p>As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to <code>AppDelegate.m</code> in order to keep your splash screen displayed during the transition.</p>
|
||||
<pre><code class="hljs css language-objc"> <span class="hljs-comment">// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"</span>
|
||||
<span class="hljs-built_in">UIView</span>* launchScreenView = [[[<span class="hljs-built_in">NSBundle</span> mainBundle] loadNibNamed:<span class="hljs-string">@"LaunchScreen"</span> owner:<span class="hljs-keyword">self</span> options:<span class="hljs-literal">nil</span>] objectAtIndex:<span class="hljs-number">0</span>];
|
||||
launchScreenView.frame = <span class="hljs-keyword">self</span>.window.bounds;
|
||||
|
||||
@@ -223,10 +223,12 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<li>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</li>
|
||||
<li>Open your React Native app on your device.</li>
|
||||
<li>You'll see a <a href="/react-native/docs/0.10/debugging#in-app-errors-and-warnings">red screen with an error</a>. This is OK. The following steps will fix that.</li>
|
||||
<li>Open the in-app <a href="/react-native/docs/0.10/debugging#accessing-the-in-app-developer-menu">Developer menu</a>.</li>
|
||||
<li>Go to <strong>Dev Settings</strong> → <strong>Debug server host & port for device</strong>.</li>
|
||||
<li>Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).</li>
|
||||
<li>Go back to the <strong>Developer menu</strong> and select <strong>Reload JS</strong>.</li>
|
||||
<li>Open the in-app <a href="/react-native/docs/0.10/debugging#accessing-the-in-app-developer-menu">Developer menu</a>.
|
||||
<!-- alex ignore host -->
|
||||
5. Go to **Dev Settings** → **Debug server host & port for device**.
|
||||
6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
|
||||
7. Go back to the **Developer menu** and select **Reload JS**.
|
||||
</li>
|
||||
</ol>
|
||||
<p>You can now enable Live reloading from the <a href="/react-native/docs/0.10/debugging#accessing-the-in-app-developer-menu">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><block class="mac ios" /></p>
|
||||
@@ -246,7 +248,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="pro-tips"></a><a href="#pro-tips" 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>Pro Tips</h4>
|
||||
<p>As your App Bundle grows in size, you may start to see a white screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to <code>AppDelegate.m</code> in order to keep your splash screen displayed during the transition.</p>
|
||||
<p>As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to <code>AppDelegate.m</code> in order to keep your splash screen displayed during the transition.</p>
|
||||
<pre><code class="hljs css language-objc"> <span class="hljs-comment">// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"</span>
|
||||
<span class="hljs-built_in">UIView</span>* launchScreenView = [[[<span class="hljs-built_in">NSBundle</span> mainBundle] loadNibNamed:<span class="hljs-string">@"LaunchScreen"</span> owner:<span class="hljs-keyword">self</span> options:<span class="hljs-literal">nil</span>] objectAtIndex:<span class="hljs-number">0</span>];
|
||||
launchScreenView.frame = <span class="hljs-keyword">self</span>.window.bounds;
|
||||
|
||||
@@ -71,7 +71,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/running-on-simulator-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Running On Simulator</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="starting-the-simulator"></a><a href="#starting-the-simulator" 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>Starting the simulator</h2>
|
||||
<p>Once you have your React Native project initialized, you can run <code>react-native run-ios</code> inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="specifying-a-device"></a><a href="#specifying-a-device" 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>Specifying a device</h2>
|
||||
<p>You can specify the device the simulator should run with the <code>--simulator</code> flag, followed by the device name as a string. The default is <code>"iPhone X"</code>. If you wish to run your app on an iPhone 5s, just run <code>react-native run-ios --simulator="iPhone 5s"</code>.</p>
|
||||
<p>You can specify the device the simulator should run with the <code>--simulator</code> flag, followed by the device name as a string. The default is <code>"iPhone X"</code>. If you wish to run your app on an iPhone 5s, run <code>react-native run-ios --simulator="iPhone 5s"</code>.</p>
|
||||
<p>The device names correspond to the list of devices available in Xcode. You can check your available devices by running <code>xcrun simctl list devices</code> from the console.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/linking-libraries-ios"><span class="arrow-prev">← </span><span>Linking Libraries</span></a><a class="docs-next button" href="/react-native/docs/0.10/communication-ios"><span>Communication between native and React Native</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#starting-the-simulator">Starting the simulator</a></li><li><a href="#specifying-a-device">Specifying a device</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>
|
||||
|
||||
@@ -71,7 +71,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/running-on-simulator-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Running On Simulator</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="starting-the-simulator"></a><a href="#starting-the-simulator" 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>Starting the simulator</h2>
|
||||
<p>Once you have your React Native project initialized, you can run <code>react-native run-ios</code> inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="specifying-a-device"></a><a href="#specifying-a-device" 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>Specifying a device</h2>
|
||||
<p>You can specify the device the simulator should run with the <code>--simulator</code> flag, followed by the device name as a string. The default is <code>"iPhone X"</code>. If you wish to run your app on an iPhone 5s, just run <code>react-native run-ios --simulator="iPhone 5s"</code>.</p>
|
||||
<p>You can specify the device the simulator should run with the <code>--simulator</code> flag, followed by the device name as a string. The default is <code>"iPhone X"</code>. If you wish to run your app on an iPhone 5s, run <code>react-native run-ios --simulator="iPhone 5s"</code>.</p>
|
||||
<p>The device names correspond to the list of devices available in Xcode. You can check your available devices by running <code>xcrun simctl list devices</code> from the console.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/linking-libraries-ios"><span class="arrow-prev">← </span><span>Linking Libraries</span></a><a class="docs-next button" href="/react-native/docs/0.10/communication-ios"><span>Communication between native and React Native</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#starting-the-simulator">Starting the simulator</a></li><li><a href="#specifying-a-device">Specifying a device</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>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<li>Scroll loading.</li>
|
||||
</ul>
|
||||
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.10/flatlist"><code><FlatList></code></a>.</p>
|
||||
<p>Simple Examples:</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="examples"></a><a href="#examples" 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>Examples</h3>
|
||||
<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">SectionList</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ListItem</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderSectionHeader</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>section<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Header</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<li>Scroll loading.</li>
|
||||
</ul>
|
||||
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.10/flatlist"><code><FlatList></code></a>.</p>
|
||||
<p>Simple Examples:</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="examples"></a><a href="#examples" 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>Examples</h3>
|
||||
<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">SectionList</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ListItem</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderSectionHeader</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>section<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Header</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
|
||||
@@ -123,7 +123,7 @@ android {
|
||||
...
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
|
||||
<p>Simply run the following in a terminal:</p>
|
||||
<p>Run the following in a terminal:</p>
|
||||
<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
|
||||
$ ./gradlew bundleRelease
|
||||
</code></pre>
|
||||
|
||||
@@ -123,7 +123,7 @@ android {
|
||||
...
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
|
||||
<p>Simply run the following in a terminal:</p>
|
||||
<p>Run the following in a terminal:</p>
|
||||
<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
|
||||
$ ./gradlew bundleRelease
|
||||
</code></pre>
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
"
|
||||
></div></div></div><p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like <a href="https://redux.js.org/">Redux</a> or <a href="https://mobx.js.org/">Mobx</a> to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling <code>setState</code> directly.</p>
|
||||
<p>When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.</p>
|
||||
<p>State works the same way as it does in React, so for more details on handling state, you can look at the <a href="https://reactjs.org/docs/react-component.html#setstate">React.Component API</a>. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to <a href="/react-native/docs/0.10/style">learn about Style</a>.</p>
|
||||
<p>State works the same way as it does in React, so for more details on handling state, you can look at the <a href="https://reactjs.org/docs/react-component.html#setstate">React.Component API</a>. At this point, you might be annoyed that most of our examples so far use the default text color. To customize the text color, you will have to <a href="/react-native/docs/0.10/style">learn about Style</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/props"><span class="arrow-prev">← </span><span>Props</span></a><a class="docs-next button" href="/react-native/docs/0.10/style"><span>Style</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></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) {
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
"
|
||||
></div></div></div><p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like <a href="https://redux.js.org/">Redux</a> or <a href="https://mobx.js.org/">Mobx</a> to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling <code>setState</code> directly.</p>
|
||||
<p>When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.</p>
|
||||
<p>State works the same way as it does in React, so for more details on handling state, you can look at the <a href="https://reactjs.org/docs/react-component.html#setstate">React.Component API</a>. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to <a href="/react-native/docs/0.10/style">learn about Style</a>.</p>
|
||||
<p>State works the same way as it does in React, so for more details on handling state, you can look at the <a href="https://reactjs.org/docs/react-component.html#setstate">React.Component API</a>. At this point, you might be annoyed that most of our examples so far use the default text color. To customize the text color, you will have to <a href="/react-native/docs/0.10/style">learn about Style</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/props"><span class="arrow-prev">← </span><span>Props</span></a><a class="docs-next button" href="/react-native/docs/0.10/style"><span>Style</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></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) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Style · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Style · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><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>Style · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="With React Native, you style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Style · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="With React Native, you style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><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/style.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Style</h1></header><article><div><span><p>With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named <code>style</code>. The style names and <a href="/react-native/docs/0.10/colors">values</a> usually match how CSS works on the web, except names are written using camel casing, e.g. <code>backgroundColor</code> rather than <code>background-color</code>.</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/style.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Style</h1></header><article><div><span><p>With React Native, you style your application using JavaScript. All of the core components accept a prop named <code>style</code>. The style names and <a href="/react-native/docs/0.10/colors">values</a> usually match how CSS works on the web, except names are written using camel casing, e.g. <code>backgroundColor</code> rather than <code>background-color</code>.</p>
|
||||
<p>The <code>style</code> prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.</p>
|
||||
<p>As a component grows in complexity, it is often cleaner to use <code>StyleSheet.create</code> to define several styles in one place. Here's an example:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</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>Style · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Style · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><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>Style · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="With React Native, you style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Style · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="With React Native, you style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](/react-native/docs/0.10/colors) usually match how CSS works on the web, except names are written using camel casing, e.g. `backgroundColor` rather than `background-color`."/><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/style.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Style</h1></header><article><div><span><p>With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named <code>style</code>. The style names and <a href="/react-native/docs/0.10/colors">values</a> usually match how CSS works on the web, except names are written using camel casing, e.g. <code>backgroundColor</code> rather than <code>background-color</code>.</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/style.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Style</h1></header><article><div><span><p>With React Native, you style your application using JavaScript. All of the core components accept a prop named <code>style</code>. The style names and <a href="/react-native/docs/0.10/colors">values</a> usually match how CSS works on the web, except names are written using camel casing, e.g. <code>backgroundColor</code> rather than <code>background-color</code>.</p>
|
||||
<p>The <code>style</code> prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.</p>
|
||||
<p>As a component grows in complexity, it is often cleaner to use <code>StyleSheet.create</code> to define several styles in one place. Here's an example:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
</ul>
|
||||
<p><code>requestAnimationFrame(fn)</code> is not the same as <code>setTimeout(fn, 0)</code> - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).</p>
|
||||
<p><code>setImmediate</code> is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call <code>setImmediate</code> within a <code>setImmediate</code> callback, it will be executed right away, it won't yield back to native in between.</p>
|
||||
<p>The <code>Promise</code> implementation uses <code>setImmediate</code> as its asynchronicity primitive.</p>
|
||||
<p>The <code>Promise</code> implementation uses <code>setImmediate</code> as its asynchronicity implementation.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="interactionmanager"></a><a href="#interactionmanager" 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>InteractionManager</h2>
|
||||
<p>One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use <code>InteractionManager</code> to make sure long-running work is scheduled to start after any interactions/animations have completed.</p>
|
||||
<p>Applications can schedule tasks to run after interactions with the following:</p>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
</ul>
|
||||
<p><code>requestAnimationFrame(fn)</code> is not the same as <code>setTimeout(fn, 0)</code> - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).</p>
|
||||
<p><code>setImmediate</code> is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call <code>setImmediate</code> within a <code>setImmediate</code> callback, it will be executed right away, it won't yield back to native in between.</p>
|
||||
<p>The <code>Promise</code> implementation uses <code>setImmediate</code> as its asynchronicity primitive.</p>
|
||||
<p>The <code>Promise</code> implementation uses <code>setImmediate</code> as its asynchronicity implementation.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="interactionmanager"></a><a href="#interactionmanager" 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>InteractionManager</h2>
|
||||
<p>One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use <code>InteractionManager</code> to make sure long-running work is scheduled to start after any interactions/animations have completed.</p>
|
||||
<p>Applications can schedule tasks to run after interactions with the following:</p>
|
||||
|
||||
@@ -122,7 +122,7 @@ sudo chown -R $<span class="hljs-keyword">USER</span> <span class="hljs-title">/
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="unable-to-start-react-native-package-manager-on-linux"></a><a href="#unable-to-start-react-native-package-manager-on-linux" 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>Unable to start react-native package manager (on Linux)</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="case-1-error-code-enospc-errno-enospc"></a><a href="#case-1-error-code-enospc-errno-enospc" 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>Case 1: Error "code":"ENOSPC","errno":"ENOSPC"</h3>
|
||||
<p>Issue caused by the number of directories <a href="https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers">inotify</a> (used by watchman on Linux) can monitor. To solve it, just run this command in your terminal window</p>
|
||||
<p>Issue caused by the number of directories <a href="https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers">inotify</a> (used by watchman on Linux) can monitor. To solve it, run this command in your terminal window</p>
|
||||
<pre><code class="hljs"><span class="hljs-built_in">echo</span> <span class="hljs-built_in">fs</span>.inotify.max_user_watches=<span class="hljs-number">582222</span> | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/upgrading"><span class="arrow-prev">← </span><span>Upgrading to new React Native versions</span></a><a class="docs-next button" href="/react-native/docs/0.10/native-modules-setup"><span>Native Modules Setup</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#shell-command-unresponsive-exception">Shell Command Unresponsive Exception</a></li><li><a href="#react-native-init-hangs">react-native init hangs</a></li><li><a href="#unable-to-start-react-native-package-manager-on-linux">Unable to start react-native package manager (on Linux)</a><ul class="toc-headings"><li><a href="#case-1-error-code-enospc-errno-enospc">Case 1: Error "code":"ENOSPC","errno":"ENOSPC"</a></li></ul></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'));
|
||||
|
||||
@@ -122,7 +122,7 @@ sudo chown -R $<span class="hljs-keyword">USER</span> <span class="hljs-title">/
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="unable-to-start-react-native-package-manager-on-linux"></a><a href="#unable-to-start-react-native-package-manager-on-linux" 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>Unable to start react-native package manager (on Linux)</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="case-1-error-code-enospc-errno-enospc"></a><a href="#case-1-error-code-enospc-errno-enospc" 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>Case 1: Error "code":"ENOSPC","errno":"ENOSPC"</h3>
|
||||
<p>Issue caused by the number of directories <a href="https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers">inotify</a> (used by watchman on Linux) can monitor. To solve it, just run this command in your terminal window</p>
|
||||
<p>Issue caused by the number of directories <a href="https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers">inotify</a> (used by watchman on Linux) can monitor. To solve it, run this command in your terminal window</p>
|
||||
<pre><code class="hljs"><span class="hljs-built_in">echo</span> <span class="hljs-built_in">fs</span>.inotify.max_user_watches=<span class="hljs-number">582222</span> | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/upgrading"><span class="arrow-prev">← </span><span>Upgrading to new React Native versions</span></a><a class="docs-next button" href="/react-native/docs/0.10/native-modules-setup"><span>Native Modules Setup</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#shell-command-unresponsive-exception">Shell Command Unresponsive Exception</a></li><li><a href="#react-native-init-hangs">react-native init hangs</a></li><li><a href="#unable-to-start-react-native-package-manager-on-linux">Unable to start react-native package manager (on Linux)</a><ul class="toc-headings"><li><a href="#case-1-error-code-enospc-errno-enospc">Case 1: Error "code":"ENOSPC","errno":"ENOSPC"</a></li></ul></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'));
|
||||
|
||||
@@ -101,10 +101,10 @@
|
||||
></div></div></div><p>If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your <code>App.js</code> file to create a real app on your local machine.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="whats-going-on-here"></a><a href="#whats-going-on-here" 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>What's going on here?</h2>
|
||||
<p>Some of the things in here might not look like JavaScript to you. Don't panic. <em>This is the future</em>.</p>
|
||||
<p>First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. <code>import</code>, <code>from</code>, <code>class</code>, and <code>extends</code> in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, <a href="https://babeljs.io/learn-es2015/">this page</a> has a good overview of ES2015 features.</p>
|
||||
<p>The other unusual thing in this code example is <code><View><Text>Hello world!</Text></View></code>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <code><div></code> or <code><span></code>, you use React components. In this case, <code><Text></code> is a built-in component that just displays some text and <code>View</code> is like the <code><div></code> or <code><span></code>.</p>
|
||||
<p>First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. <code>import</code>, <code>from</code>, <code>class</code>, and <code>extends</code> in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, <a href="https://babeljs.io/learn-es2015/">this page</a> has a good overview of ES2015 features.</p>
|
||||
<p>The other unusual thing in this code example is <code><View><Text>Hello world!</Text></View></code>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <code><div></code> or <code><span></code>, you use React components. In this case, <code><Text></code> is a built-in component that displays some text and <code>View</code> is like the <code><div></code> or <code><span></code>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="components"></a><a href="#components" 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>Components</h2>
|
||||
<p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</code>. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a <code>render</code> function which returns some JSX to render.</p>
|
||||
<p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</code>. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty basic - the only thing that's required is a <code>render</code> function which returns some JSX to render.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="this-app-doesnt-do-very-much"></a><a href="#this-app-doesnt-do-very-much" 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>This app doesn't do very much</h2>
|
||||
<p>Good point. To make components do more interesting things, you need to <a href="/react-native/docs/0.10/props">learn about Props</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/getting-started"><span class="arrow-prev">← </span><span>Getting Started</span></a><a class="docs-next button" href="/react-native/docs/0.10/props"><span>Props</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#hello-world">Hello World</a></li><li><a href="#whats-going-on-here">What's going on here?</a></li><li><a href="#components">Components</a></li><li><a href="#this-app-doesnt-do-very-much">This app doesn't do very much</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'));
|
||||
|
||||
@@ -101,10 +101,10 @@
|
||||
></div></div></div><p>If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your <code>App.js</code> file to create a real app on your local machine.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="whats-going-on-here"></a><a href="#whats-going-on-here" 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>What's going on here?</h2>
|
||||
<p>Some of the things in here might not look like JavaScript to you. Don't panic. <em>This is the future</em>.</p>
|
||||
<p>First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. <code>import</code>, <code>from</code>, <code>class</code>, and <code>extends</code> in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, <a href="https://babeljs.io/learn-es2015/">this page</a> has a good overview of ES2015 features.</p>
|
||||
<p>The other unusual thing in this code example is <code><View><Text>Hello world!</Text></View></code>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <code><div></code> or <code><span></code>, you use React components. In this case, <code><Text></code> is a built-in component that just displays some text and <code>View</code> is like the <code><div></code> or <code><span></code>.</p>
|
||||
<p>First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. <code>import</code>, <code>from</code>, <code>class</code>, and <code>extends</code> in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, <a href="https://babeljs.io/learn-es2015/">this page</a> has a good overview of ES2015 features.</p>
|
||||
<p>The other unusual thing in this code example is <code><View><Text>Hello world!</Text></View></code>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <code><div></code> or <code><span></code>, you use React components. In this case, <code><Text></code> is a built-in component that displays some text and <code>View</code> is like the <code><div></code> or <code><span></code>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="components"></a><a href="#components" 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>Components</h2>
|
||||
<p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</code>. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a <code>render</code> function which returns some JSX to render.</p>
|
||||
<p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</code>. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty basic - the only thing that's required is a <code>render</code> function which returns some JSX to render.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="this-app-doesnt-do-very-much"></a><a href="#this-app-doesnt-do-very-much" 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>This app doesn't do very much</h2>
|
||||
<p>Good point. To make components do more interesting things, you need to <a href="/react-native/docs/0.10/props">learn about Props</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/getting-started"><span class="arrow-prev">← </span><span>Getting Started</span></a><a class="docs-next button" href="/react-native/docs/0.10/props"><span>Props</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#hello-world">Hello World</a></li><li><a href="#whats-going-on-here">What's going on here?</a></li><li><a href="#components">Components</a></li><li><a href="#this-app-doesnt-do-very-much">This app doesn't do very much</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'));
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Upgrading to new React Native versions · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Upgrading to new React Native versions · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you."/><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>Upgrading to new React Native versions · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Upgrading to new React Native versions · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you."/><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/upgrading.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Upgrading to new React Native versions</h1></header><article><div><span><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you.</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/upgrading.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Upgrading to new React Native versions</h1></header><article><div><span><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="expo-projects"></a><a href="#expo-projects" 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>Expo projects</h2>
|
||||
<p>Upgrading your Expo project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://docs.expo.io/versions/latest/sdk/#sdk-version">this list</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p>
|
||||
<p>See the <a href="https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
@@ -123,13 +123,13 @@ yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" 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>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>react-native init</code>, those files are listed after the <code>package.json</code> in the Upgrade Helper page. If there aren't other changes then you can just rebuild the project and continue developing.</p>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>react-native init</code>, those files are listed after the <code>package.json</code> in the Upgrade Helper page. If there aren't other changes then you can rebuild the project and continue developing.</p>
|
||||
<p>In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
<li>If there is a new file in the template, it is simply created.</li>
|
||||
<li>If there is a new file in the template, it is created.</li>
|
||||
<li>If a file in the template is identical to your file, it is skipped.</li>
|
||||
<li>If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Upgrading to new React Native versions · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Upgrading to new React Native versions · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you."/><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>Upgrading to new React Native versions · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Upgrading to new React Native versions · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you."/><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/upgrading.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Upgrading to new React Native versions</h1></header><article><div><span><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you.</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/upgrading.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Upgrading to new React Native versions</h1></header><article><div><span><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="expo-projects"></a><a href="#expo-projects" 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>Expo projects</h2>
|
||||
<p>Upgrading your Expo project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://docs.expo.io/versions/latest/sdk/#sdk-version">this list</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p>
|
||||
<p>See the <a href="https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
@@ -123,13 +123,13 @@ yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" 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>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>react-native init</code>, those files are listed after the <code>package.json</code> in the Upgrade Helper page. If there aren't other changes then you can just rebuild the project and continue developing.</p>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>react-native init</code>, those files are listed after the <code>package.json</code> in the Upgrade Helper page. If there aren't other changes then you can rebuild the project and continue developing.</p>
|
||||
<p>In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
<li>If there is a new file in the template, it is simply created.</li>
|
||||
<li>If there is a new file in the template, it is created.</li>
|
||||
<li>If a file in the template is identical to your file, it is skipped.</li>
|
||||
<li>If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.</li>
|
||||
</ul>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user