Files
react-native/docs/android-ui-performance.html
T
Website Deployment Script 87ca8bb746 Updated docs for 0.25
2016-05-11 22:16:08 +00:00

19 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Profiling Android UI Performance React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Profiling Android UI Performance React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.25</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html#content">Tutorial</a></li></ul></div><div class="nav-docs-section"><h3>Community Resources</h3><ul><li><a style="margin-left:0;" class="" href="docs/videos.html#content">Videos</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://reactnative.cc/">Newsletter</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html#content">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="active" href="docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html#content">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html#content">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html#content">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html#content">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html#content">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html#content">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html#content">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html#content">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html#content">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html#content">Vibration</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/shadowproptypesios.html#content">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html#content">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html#content">Colors</a></li></ul></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="profiling-android-ui-performance"></a>Profiling Android UI Performance <a class="hash-link" href="docs/android-ui-performance.html#profiling-android-ui-performance">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/AndroidUIPerformance.md">Edit on GitHub</a></td></tr></tbody></table><div><p>We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn&#x27;t possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it&#x27;s not native code&#x27;s fault at all!).</p><p>The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we&#x27;ll be using a standard Android profiling tool called systrace. But first...</p><blockquote><p>Make sure that JS dev mode is OFF!</p><p>You should see <code>__DEV__ === false, development-level warning are OFF, performance optimizations are ON</code> in your application logs (which you can view using <code>adb logcat</code>)</p></blockquote><h2><a class="anchor" name="profiling-with-systrace"></a>Profiling with Systrace <a class="hash-link" href="docs/android-ui-performance.html#profiling-with-systrace">#</a></h2><p>Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by markers start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.</p><h3><a class="anchor" name="collecting-a-trace"></a>Collecting a trace <a class="hash-link" href="docs/android-ui-performance.html#collecting-a-trace">#</a></h3><blockquote><p>NOTE:</p><p>Systrace support was added in react-native <code>v0.15</code>. You will need to build with that version to collect a trace.</p></blockquote><p>First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run systrace as follows</p><div class="prism language-javascript">$ &lt;path_to_android_sdk<span class="token operator">&gt;</span><span class="token operator">/</span>platform<span class="token operator">-</span>tools<span class="token operator">/</span>systrace<span class="token operator">/</span>systrace<span class="token punctuation">.</span>py <span class="token operator">--</span>time<span class="token operator">=</span><span class="token number">10</span> <span class="token operator">-</span>o trace<span class="token punctuation">.</span>html sched gfx view <span class="token operator">-</span>a &lt;your_package_name<span class="token operator">&gt;</span></div><p>A quick breakdown of this command:</p><ul><li><code>time</code> is the length of time the trace will be collected in seconds</li><li><code>sched</code>, <code>gfx</code>, and <code>view</code> are the android SDK tags (collections of markers) we care about: <code>sched</code> gives you information about what&#x27;s running on each core of your phone, <code>gfx</code> gives you graphics info such as frame boundaries, and <code>view</code> gives you information about measure, layout, and draw passes</li><li><code>-a &lt;your_package_name&gt;</code> enables app-specific markers, specifically the ones built into the React Native framework. <code>your_package_name</code> can be found in the <code>AndroidManifest.xml</code> of your app and looks like <code>com.example.app</code></li></ul><p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p><h2><a class="anchor" name="reading-the-trace"></a>Reading the trace <a class="hash-link" href="docs/android-ui-performance.html#reading-the-trace">#</a></h2><p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p><p><img src="img/SystraceExample.png" alt="Example"></p><p><strong>HINT</strong>: Use the WASD keys to strafe and zoom</p><h3><a class="anchor" name="enable-vsync-highlighting"></a>Enable VSync highlighting <a class="hash-link" href="docs/android-ui-performance.html#enable-vsync-highlighting">#</a></h3><p>The first thing you should do is highlight the 16ms frame boundaries if you haven&#x27;t already done that. Check this checkbox at the top right of the screen:</p><p><img src="img/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p><p>You should see zebra stripes as in the screenshot above. If you don&#x27;t, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p><h3><a class="anchor" name="find-your-process"></a>Find your process <a class="hash-link" href="docs/android-ui-performance.html#find-your-process">#</a></h3><p>Scroll until you see (part of) the name of your package. In this case, I was profiling <code>com.facebook.adsmanager</code>, which shows up as <code>book.adsmanager</code> because of silly thread name limits in the kernel.</p><p>On the left side, you&#x27;ll see a set of threads which correspond to the timeline rows on the right. There are three/four threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), <code>mqt_js</code> and <code>mqt_native_modules</code>. If you&#x27;re running on Android 5+, we also care about the Render Thread.</p><h3><a class="anchor" name="ui-thread"></a>UI Thread <a class="hash-link" href="docs/android-ui-performance.html#ui-thread">#</a></h3><p>This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p><p><img src="img/SystraceUIThreadExample.png" alt="UI Thread Example"></p><h3><a class="anchor" name="js-thread"></a>JS Thread <a class="hash-link" href="docs/android-ui-performance.html#js-thread">#</a></h3><p>This is where JS is executed. The thread name will be either <code>mqt_js</code> or <code>&lt;...&gt;</code> depending on how cooperative the kernel on your device is being. To identify it if it doesn&#x27;t have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p><p><img src="img/SystraceJSThreadExample.png" alt="JS Thread Example"></p><h3><a class="anchor" name="native-modules-thread"></a>Native Modules Thread <a class="hash-link" href="docs/android-ui-performance.html#native-modules-thread">#</a></h3><p>This is where native module calls (e.g. the <code>UIManager</code>) are executed. The thread name will be either <code>mqt_native_modules</code> or <code>&lt;...&gt;</code>. To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p><p><img src="img/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p><h3><a class="anchor" name="bonus-render-thread"></a>Bonus: Render Thread <a class="hash-link" href="docs/android-ui-performance.html#bonus-render-thread">#</a></h3><p>If you&#x27;re using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either <code>RenderThread</code> or <code>&lt;...&gt;</code>. To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p><p><img src="img/SystraceRenderThreadExample.png" alt="Render Thread Example"></p><h2><a class="anchor" name="identifying-a-culprit"></a>Identifying a culprit <a class="hash-link" href="docs/android-ui-performance.html#identifying-a-culprit">#</a></h2><p>A smooth animation should look something like the following:</p><p><img src="img/SystraceWellBehaved.png" alt="Smooth Animation"></p><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 60FPS.</p><p>If you noticed chop, however, you might see something like this:</p><p><img src="img/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 60FPS. In this case, <strong>the problem lies in JS</strong>.</p><p>You might also see something like this:</p><p><img src="img/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&#x27;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><p>At this point, you&#x27;ll have some very helpful information to inform your next steps.</p><h2><a class="anchor" name="js-issues"></a>JS Issues <a class="hash-link" href="docs/android-ui-performance.html#js-issues">#</a></h2><p>If you identified a JS problem, look for clues in the specific JS that you&#x27;re executing. In the scenario above, we see <code>RCTEventEmitter</code> being called multiple times per frame. Here&#x27;s a zoom-in of the JS thread from the trace above:</p><p><img src="img/SystraceBadJS2.png" alt="Too much JS"></p><p>This doesn&#x27;t seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you&#x27;ll want to look into <a href="https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate" target="_blank">shouldComponentUpdate</a>.</p><blockquote><p><strong>TODO</strong>: Add more tools for profiling JS</p></blockquote><h2><a class="anchor" name="native-ui-issues"></a>Native UI Issues <a class="hash-link" href="docs/android-ui-performance.html#native-ui-issues">#</a></h2><p>If you identified a native UI problem, there are usually two scenarios:</p><ol><li>the UI you&#x27;re trying to draw each frame involves to much work on the GPU, or</li><li>You&#x27;re constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).</li></ol><h3><a class="anchor" name="too-much-gpu-work"></a>Too much GPU work <a class="hash-link" href="docs/android-ui-performance.html#too-much-gpu-work">#</a></h3><p>In the first scenario, you&#x27;ll see a trace that has the UI thread and/or Render Thread looking like this:</p><p><img src="img/SystraceBadUI.png" alt="Overloaded GPU"></p><p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p><p>To mitigate this, you should:</p><ul><li>investigate using <code>renderToHardwareTextureAndroid</code> for complex, static content that is being animated/transformed (e.g. the <code>Navigator</code> slide/alpha animations)</li><li>make sure that you are <strong>not</strong> using <code>needsOffscreenAlphaCompositing</code>, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.</li></ul><p>If these don&#x27;t help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html" target="_blank">Tracer for OpenGL ES</a>.</p><h3><a class="anchor" name="creating-new-views-on-the-ui-thread"></a>Creating new views on the UI thread <a class="hash-link" href="docs/android-ui-performance.html#creating-new-views-on-the-ui-thread">#</a></h3><p>In the second scenario, you&#x27;ll see something more like this:</p><p><img src="img/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&#x27;t an easy way to mitigate this unless you&#x27;re able to postpone creating new UI until after the interaction, or you are able to simplify the UI you&#x27;re creating. The react native team is working on a 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" name="still-stuck"></a>Still stuck? <a class="hash-link" href="docs/android-ui-performance.html#still-stuck">#</a></h2><p>If you are confused or stuck, please post ask on <a href="http://stackoverflow.com/tags/react-native" target="_blank">Stack Overflow with the react-native tag</a>. If you are unable to get a response there, or find an issue with a core component, please <a href="https://github.com/facebook/react-native/issues" target="_blank">File a Github issue</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/android-building-from-source.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>