diff --git a/docs/accessibility.html b/docs/accessibility.html index 990bdc60c80..699d78c18e4 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility – React Native | A framework for building native apps using React
React Native0.31

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Accessibility #

Native App Accessibility (iOS and Android) #

Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.

<View accessible={true}> +Accessibility – React Native | A framework for building native apps using React
React Native0.32

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Accessibility #

Native App Accessibility (iOS and Android) #

Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.

<View accessible={true}> <Text>text one</Text> <Text>text two</Text> </View>

In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

accessibilityLabel (iOS, Android) #

When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.

To use, set the accessibilityLabel property to a custom string on your View:

<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}> @@ -54,6 +54,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.31" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.32" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 0db4a8b6352..400ec67e84b 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS – React Native | A framework for building native apps using React
React Native0.31

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

Display an iOS action sheet. The options object must contain one or more +ActionSheetIOS – React Native | A framework for building native apps using React

React Native0.32

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

Display an iOS action sheet. The options object must contain one or more of:

  • options (array of strings) - a list of button titles (required)
  • cancelButtonIndex (int) - index of cancel button in options
  • destructiveButtonIndex (int) - index of destructive button in options
  • title (string) - a title to show above the action sheet
  • message (string) - a message to show below the title

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

Display the iOS share sheet. The options object should contain one or both of message and url and can additionally have a subject or excludedActivityTypes:

  • url (string) - a URL to share
  • message (string) - a message to share
  • subject (string) - a subject for the message
  • excludedActivityTypes (array) - the activites to exclude from the ActionSheet

NOTE: if url points to a local file, or is a base64-encoded @@ -25,12 +25,10 @@ In this way, you can share images, videos, PDF files, etc.

var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; -var ActionSheetExample = React.createClass({ - getInitialState() { - return { - clicked: 'none', - }; - }, +class ActionSheetExample extends React.Component { + state = { + clicked: 'none', + }; render() { return ( @@ -43,9 +41,9 @@ In this way, you can share images, videos, PDF files, etc.

</Text> </View> ); - }, + } - showActionSheet() { + showActionSheet = () => { ActionSheetIOS.showActionSheetWithOptions({ options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, @@ -54,15 +52,13 @@ In this way, you can share images, videos, PDF files, etc.

(buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); }); - } -}); + }; +} -var ActionSheetTintExample = React.createClass({ - getInitialState() { - return { - clicked: 'none', - }; - }, +class ActionSheetTintExample extends React.Component { + state = { + clicked: 'none', + }; render() { return ( @@ -75,9 +71,9 @@ In this way, you can share images, videos, PDF files, etc.

</Text> </View> ); - }, + } - showActionSheet() { + showActionSheet = () => { ActionSheetIOS.showActionSheetWithOptions({ options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, @@ -87,15 +83,13 @@ In this way, you can share images, videos, PDF files, etc.

(buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); }); - } -}); + }; +} -var ShareActionSheetExample = React.createClass({ - getInitialState() { - return { - text: '' - }; - }, +class ShareActionSheetExample extends React.Component { + state = { + text: '' + }; render() { return ( @@ -108,9 +102,9 @@ In this way, you can share images, videos, PDF files, etc.

</Text> </View> ); - }, + } - showShareActionSheet() { + showShareActionSheet = () => { ActionSheetIOS.showShareActionSheetWithOptions({ url: this.props.url, message: 'message to go with the shared url', @@ -129,15 +123,13 @@ In this way, you can share images, videos, PDF files, etc.

} this.setState({text}); }); - } -}); + }; +} -var ShareScreenshotExample = React.createClass({ - getInitialState() { - return { - text: '' - }; - }, +class ShareScreenshotExample extends React.Component { + state = { + text: '' + }; render() { return ( @@ -150,9 +142,9 @@ In this way, you can share images, videos, PDF files, etc.

</Text> </View> ); - }, + } - showShareActionSheet() { + showShareActionSheet = () => { // Take the snapshot (returns a temp file uri) UIManager.takeSnapshot('window').then((uri) => { // Share image data @@ -173,8 +165,8 @@ In this way, you can share images, videos, PDF files, etc.

this.setState({text}); }); }).catch((error) => alert(error)); - } -}); + }; +} var style = StyleSheet.create({ button: { @@ -228,6 +220,6 @@ exports.examples \ No newline at end of file diff --git a/docs/activityindicator.html b/docs/activityindicator.html index 0cf802a180a..6393acc9a8b 100644 --- a/docs/activityindicator.html +++ b/docs/activityindicator.html @@ -1,37 +1,46 @@ -ActivityIndicator – React Native | A framework for building native apps using React
React Native0.31

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicator #

Displays a circular loading indicator.

Props #

View props... #

animating PropTypes.bool #

Whether to show the indicator (true, the default) or hide it (false).

color color #

The foreground color of the spinner (default is gray).

size PropTypes.oneOf([ - 'small', - 'large', -]) #

Size of the indicator. Small has a height of 20, large has a height of 36. -Other sizes can be obtained using a scale transform.

ioshidesWhenStopped PropTypes.bool #

Whether the indicator should hide when not animating (true by default).

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; +ActivityIndicator – React Native | A framework for building native apps using React
React Native0.32

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicator #

Displays a circular loading indicator.

Props #

View props... #

animating PropTypes.bool #

Whether to show the indicator (true, the default) or hide it (false).

color color #

The foreground color of the spinner (default is gray).

size PropTypes.oneOfType([ + PropTypes.oneOf([ 'small', 'large' ]), + PropTypes.number, +]) #

Size of the indicator (default is 'small'). +Passing a number to the size prop is only supported on Android.

ioshidesWhenStopped PropTypes.bool #

Whether the indicator should hide when not animating (true by default).

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; -const React = require('react'); -const ReactNative = require('react-native'); -const { - ActivityIndicator, - StyleSheet, - View, -} = ReactNative; -const TimerMixin = require('react-timer-mixin'); +import React, { Component } from 'react'; +import { ActivityIndicator, StyleSheet, View } from 'react-native'; -const ToggleAnimatingActivityIndicator = React.createClass({ - mixins: [TimerMixin], +/** + * Optional Flowtype state and timer types definition + */ +type State = { animating: boolean; }; +type Timer = number; - getInitialState() { - return { +class ToggleAnimatingActivityIndicator extends Component { + /** + * Optional Flowtype state and timer types + */ + state: State; + _timer: Timer; + + constructor(props) { + super(props); + this.state = { animating: true, }; - }, - - setToggleTimeout() { - this.setTimeout(() => { - this.setState({animating: !this.state.animating}); - this.setToggleTimeout(); - }, 2000); - }, + } componentDidMount() { this.setToggleTimeout(); - }, + } + + componentWillUnmount() { + clearTimeout(this._timer); + } + + setToggleTimeout() { + this._timer = setTimeout(() => { + this.setState({animating: !this.state.animating}); + this.setToggleTimeout(); + }, 2000); + } render() { return ( @@ -42,7 +51,9 @@ const ToggleAnimatingActivityIndicator = Rea /> ); } -}); +} + + exports.displayName = (undefined: ?string); exports.framework = 'React'; @@ -95,8 +106,8 @@ exports.examples return ( <ActivityIndicator style={[styles.centering, styles.gray]} - color="white" size="large" + color="white" /> ); } @@ -143,8 +154,21 @@ exports.examples ); } }, + { + platform: 'android', + title: 'Custom size (size: 75)', + render() { + return ( + <ActivityIndicator + style={styles.centering} + size={75} + /> + ); + } + }, ]; + const styles = StyleSheet.create({ centering: { alignItems: 'center', @@ -175,6 +199,6 @@ const styles = StyleSheet \ No newline at end of file diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 824cf37df47..be1e07f8b0e 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native0.31

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicatorIOS #

Deprecated, use ActivityIndicator instead.

Props #

View props... #

animating PropTypes.bool #

Whether to show the indicator (true, the default) or hide it (false).

color PropTypes.string #

The foreground color of the spinner (default is gray).

hidesWhenStopped PropTypes.bool #

Whether the indicator should hide when not animating (true by default).

onLayout PropTypes.func #

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

size PropTypes.oneOf([ +ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native0.32

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicatorIOS #

Deprecated, use ActivityIndicator instead.

Props #

View props... #

animating PropTypes.bool #

Whether to show the indicator (true, the default) or hide it (false).

color PropTypes.string #

The foreground color of the spinner (default is gray).

hidesWhenStopped PropTypes.bool #

Whether the indicator should hide when not animating (true by default).

onLayout PropTypes.func #

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

size PropTypes.oneOf([ 'small', 'large', ]) #

Size of the indicator. Small has a height of 20, large has a height of 36.

You can edit the content above on GitHub and send us a pull request!

← PrevNext →
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/adsupportios.html b/docs/adsupportios.html index afc561cbee2..92dd6a90577 100644 --- a/docs/adsupportios.html +++ b/docs/adsupportios.html @@ -1,4 +1,4 @@ -AdSupportIOS – React Native | A framework for building native apps using React
React Native0.31

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AdSupportIOS #

Methods #

static getAdvertisingId(onSuccess, onFailure) #

static getAdvertisingTrackingEnabled(onSuccess, onFailure) #

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; +AdSupportIOS – React Native | A framework for building native apps using React
React Native0.32

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AdSupportIOS #

Methods #

static getAdvertisingId(onSuccess, onFailure) #

static getAdvertisingTrackingEnabled(onSuccess, onFailure) #

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -22,15 +22,13 @@ exports.examples } ]; -var AdSupportIOSExample = React.createClass({ - getInitialState: function() { - return { - deviceID: 'No IDFA yet', - hasAdvertiserTracking: 'unset', - }; - }, +class AdSupportIOSExample extends React.Component { + state = { + deviceID: 'No IDFA yet', + hasAdvertiserTracking: 'unset', + }; - componentDidMount: function() { + componentDidMount() { AdSupportIOS.getAdvertisingId( this._onDeviceIDSuccess, this._onDeviceIDFailure @@ -40,33 +38,33 @@ exports.examples this._onHasTrackingSuccess, this._onHasTrackingFailure ); - }, + } - _onHasTrackingSuccess: function(hasTracking) { + _onHasTrackingSuccess = (hasTracking) => { this.setState({ 'hasAdvertiserTracking': hasTracking, }); - }, + }; - _onHasTrackingFailure: function(e) { + _onHasTrackingFailure = (e) => { this.setState({ 'hasAdvertiserTracking': 'Error!', }); - }, + }; - _onDeviceIDSuccess: function(deviceID) { + _onDeviceIDSuccess = (deviceID) => { this.setState({ 'deviceID': deviceID, }); - }, + }; - _onDeviceIDFailure: function(e) { + _onDeviceIDFailure = (e) => { this.setState({ 'deviceID': 'Error!', }); - }, + }; - render: function() { + render() { return ( <View> <Text> @@ -80,7 +78,7 @@ exports.examples /View> ); } -}); +} var styles = StyleSheet.create({ title: { @@ -102,6 +100,6 @@ exports.examples \ No newline at end of file diff --git a/docs/alert.html b/docs/alert.html index 8f6453bde74..b82240aa3a1 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -1,4 +1,4 @@ -Alert – React Native | A framework for building native apps using React
React Native0.31

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Alert #

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the +Alert – React Native | A framework for building native apps using React

React Native0.32

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Alert #

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.

This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, @@ -34,9 +34,8 @@ of a neutral, negative and a positive button:

  • If you specify one butt /** * Simple alert examples. */ -var SimpleAlertExampleBlock = React.createClass({ - - render: function() { +class SimpleAlertExampleBlock extends React.Component { + render() { return ( <View> <TouchableHighlight style={styles.wrapper} @@ -102,23 +101,23 @@ of a neutral, negative and a positive button:

    • If you specify one butt </TouchableHighlight> </View> ); - }, -}); + } +} -var AlertExample = React.createClass({ - statics: { - title: 'Alert', - description: 'Alerts display a concise and informative message ' + - 'and prompt the user to make a decision.', - }, - render: function() { +class AlertExample extends React.Component { + static title = 'Alert'; + + static description = 'Alerts display a concise and informative message ' + + 'and prompt the user to make a decision.'; + + render() { return ( <UIExplorerBlock title={'Alert'}> <SimpleAlertExampleBlock /> </UIExplorerBlock> ); } -}); +} var styles = StyleSheet.create({ wrapper: { @@ -150,6 +149,6 @@ module.exports \ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index 8e1fe017b45..0d4db6d0b15 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      AlertIOS #

      AlertIOS provides functionality to create an iOS alert dialog with a +AlertIOS – React Native | A framework for building native apps using React

      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      AlertIOS #

      AlertIOS provides functionality to create an iOS alert dialog with a message or create a prompt for user input.

      Creating an iOS alert:

      AlertIOS.alert( 'Sync Complete', 'All your data are belong to us.' @@ -219,6 +219,6 @@ class PromptOptions extends \ No newline at end of file diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index cca60a476fa..ebd552af671 100644 --- a/docs/android-building-from-source.html +++ b/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Building React Native from source #

      You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.

      Prerequisites #

      Assuming you have the Android SDK installed, run android to open the Android SDK Manager.

      Make sure you have the following installed:

      1. Android SDK version 23 (compileSdkVersion in build.gradle)
      2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
      3. Local Maven repository for Support Libraries (formerly Android Support Repository) >= 17 (for Android Support Library)
      4. Android NDK (download links and installation instructions below)

      Point Gradle to your Android SDK: #

      Step 1: Set environment variables through your local shell.

      Note: Files may vary based on shell flavor. See below for examples from common shells.

      • bash: .bash_profile or .bashrc
      • zsh: .zprofile or .zshrc
      • ksh: .profile or $ENV

      Example:

      export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx +Building React Native from source – React Native | A framework for building native apps using React
      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Building React Native from source #

      You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.

      Prerequisites #

      Assuming you have the Android SDK installed, run android to open the Android SDK Manager.

      Make sure you have the following installed:

      1. Android SDK version 23 (compileSdkVersion in build.gradle)
      2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
      3. Local Maven repository for Support Libraries (formerly Android Support Repository) >= 17 (for Android Support Library)
      4. Android NDK (download links and installation instructions below)

      Point Gradle to your Android SDK: #

      Step 1: Set environment variables through your local shell.

      Note: Files may vary based on shell flavor. See below for examples from common shells.

      • bash: .bash_profile or .bashrc
      • zsh: .zprofile or .zshrc
      • ksh: .profile or $ENV

      Example:

      export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r10e

      Step 2: Create a local.properties file in the android directory of your react-native app with the following contents:

      Example:

      sdk.dir=/Users/your_unix_name/android-sdk-macosx ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e

      Download links for Android NDK #

      1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
      2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
      3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
      4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip

      You can find further instructions on the official page.

      Building the source #

      1. Installing the fork #

      First, you need to install react-native from your fork. For example, to install the master branch from the official repo, run the following:

      npm install --save github:facebook/react-native#master

      Alternatively, you can clone the repo to your node_modules directory and run npm install inside the cloned repo.

      2. Adding gradle dependencies #

      Add gradle-download-task as dependency in android/build.gradle:

      ... dependencies { @@ -44,6 +44,6 @@ dependencies { apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.31" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.32" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/android-ui-performance.html b/docs/android-ui-performance.html index f2f6446351f..51f4d3e6305 100644 --- a/docs/android-ui-performance.html +++ b/docs/android-ui-performance.html @@ -1,4 +1,4 @@ -Profiling Android UI Performance – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Profiling Android UI Performance #

      We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn'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's not native code's fault at all!).

      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'll be using a standard Android profiling tool called systrace. But first...

      Make sure that JS dev mode is OFF!

      You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs (which you can view using adb logcat)

      Profiling with Systrace #

      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.

      Collecting a trace #

      NOTE:

      Systrace support was added in react-native v0.15. You will need to build with that version to collect a trace.

      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

      $ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>

      A quick breakdown of this command:

      • time is the length of time the trace will be collected in seconds
      • sched, gfx, and view are the android SDK tags (collections of markers) we care about: sched gives you information about what's running on each core of your phone, gfx gives you graphics info such as frame boundaries, and view gives you information about measure, layout, and draw passes
      • -a <your_package_name> enables app-specific markers, specifically the ones built into the React Native framework. your_package_name can be found in the AndroidManifest.xml of your app and looks like com.example.app

      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.

      Reading the trace #

      After opening the trace in your browser (preferably Chrome), you should see something like this:

      Example

      If your trace .html file isn't opening correctly, check your browser console for the following:

      ObjectObserveError

      Since Object.observe was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:

      • Opening tab in chrome chrome://tracing
      • Selecting load
      • Selecting the html file generated from the previous command.

      HINT: Use the WASD keys to strafe and zoom

      Enable VSync highlighting #

      The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:

      Enable VSync Highlighting

      You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.

      Find your process #

      Scroll until you see (part of) the name of your package. In this case, I was profiling com.facebook.adsmanager, which shows up as book.adsmanager because of silly thread name limits in the kernel.

      On the left side, you'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), mqt_js and mqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.

      UI Thread #

      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 Choreographer, traversals, and DispatchUI:

      UI Thread Example

      JS Thread #

      This is where JS is executed. The thread name will be either mqt_js or <...> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like JSCall, Bridge.executeJSCall, etc:

      JS Thread Example

      Native Modules Thread #

      This is where native module calls (e.g. the UIManager) are executed. The thread name will be either mqt_native_modules or <...>. To identify it in the latter case, look for things like NativeCall, callJavaModuleMethod, and onBatchComplete:

      Native Modules Thread Example

      Bonus: Render Thread #

      If you'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 RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:

      Render Thread Example

      Identifying a culprit #

      A smooth animation should look something like the following:

      Smooth Animation

      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.

      If you noticed chop, however, you might see something like this:

      Choppy Animation from JS

      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, the problem lies in JS.

      You might also see something like this:

      Choppy Animation from UI

      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, the problem lies in the native views being rendered.

      At this point, you'll have some very helpful information to inform your next steps.

      JS Issues #

      If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see RCTEventEmitter being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:

      Too much JS

      This doesn'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'll want to look into shouldComponentUpdate.

      TODO: Add more tools for profiling JS

      Native UI Issues #

      If you identified a native UI problem, there are usually two scenarios:

      1. the UI you're trying to draw each frame involves to much work on the GPU, or
      2. You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).

      Too much GPU work #

      In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:

      Overloaded GPU

      Notice the long amount of time spent in DrawFrame that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.

      To mitigate this, you should:

      • investigate using renderToHardwareTextureAndroid for complex, static content that is being animated/transformed (e.g. the Navigator slide/alpha animations)
      • make sure that you are not using needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.

      If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.

      Creating new views on the UI thread #

      In the second scenario, you'll see something more like this:

      Creating Views

      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.

      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 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.

      Still stuck? #

      If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.

      ← PrevNext →

      You can edit the content above on GitHub and send us a pull request!

      Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!

      Take Survey
      © 2016 Facebook Inc.
      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Profiling Android UI Performance #

      We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn'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's not native code's fault at all!).

      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'll be using a standard Android profiling tool called systrace. But first...

      Make sure that JS dev mode is OFF!

      You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs (which you can view using adb logcat)

      Profiling with Systrace #

      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.

      Collecting a trace #

      NOTE:

      Systrace support was added in react-native v0.15. You will need to build with that version to collect a trace.

      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

      $ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>

      A quick breakdown of this command:

      • time is the length of time the trace will be collected in seconds
      • sched, gfx, and view are the android SDK tags (collections of markers) we care about: sched gives you information about what's running on each core of your phone, gfx gives you graphics info such as frame boundaries, and view gives you information about measure, layout, and draw passes
      • -a <your_package_name> enables app-specific markers, specifically the ones built into the React Native framework. your_package_name can be found in the AndroidManifest.xml of your app and looks like com.example.app

      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.

      Reading the trace #

      After opening the trace in your browser (preferably Chrome), you should see something like this:

      Example

      If your trace .html file isn't opening correctly, check your browser console for the following:

      ObjectObserveError

      Since Object.observe was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:

      • Opening tab in chrome chrome://tracing
      • Selecting load
      • Selecting the html file generated from the previous command.

      HINT: Use the WASD keys to strafe and zoom

      Enable VSync highlighting #

      The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:

      Enable VSync Highlighting

      You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.

      Find your process #

      Scroll until you see (part of) the name of your package. In this case, I was profiling com.facebook.adsmanager, which shows up as book.adsmanager because of silly thread name limits in the kernel.

      On the left side, you'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), mqt_js and mqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.

      UI Thread #

      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 Choreographer, traversals, and DispatchUI:

      UI Thread Example

      JS Thread #

      This is where JS is executed. The thread name will be either mqt_js or <...> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like JSCall, Bridge.executeJSCall, etc:

      JS Thread Example

      Native Modules Thread #

      This is where native module calls (e.g. the UIManager) are executed. The thread name will be either mqt_native_modules or <...>. To identify it in the latter case, look for things like NativeCall, callJavaModuleMethod, and onBatchComplete:

      Native Modules Thread Example

      Bonus: Render Thread #

      If you'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 RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:

      Render Thread Example

      Identifying a culprit #

      A smooth animation should look something like the following:

      Smooth Animation

      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.

      If you noticed chop, however, you might see something like this:

      Choppy Animation from JS

      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, the problem lies in JS.

      You might also see something like this:

      Choppy Animation from UI

      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, the problem lies in the native views being rendered.

      At this point, you'll have some very helpful information to inform your next steps.

      JS Issues #

      If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see RCTEventEmitter being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:

      Too much JS

      This doesn'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'll want to look into shouldComponentUpdate.

      TODO: Add more tools for profiling JS

      Native UI Issues #

      If you identified a native UI problem, there are usually two scenarios:

      1. the UI you're trying to draw each frame involves to much work on the GPU, or
      2. You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).

      Too much GPU work #

      In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:

      Overloaded GPU

      Notice the long amount of time spent in DrawFrame that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.

      To mitigate this, you should:

      • investigate using renderToHardwareTextureAndroid for complex, static content that is being animated/transformed (e.g. the Navigator slide/alpha animations)
      • make sure that you are not using needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.

      If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.

      Creating new views on the UI thread #

      In the second scenario, you'll see something more like this:

      Creating Views

      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.

      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 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.

      Still stuck? #

      If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.

      ← PrevNext →

      You can edit the content above on GitHub and send us a pull request!

      Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!

      Take Survey
      © 2016 Facebook Inc.
      \ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index 38d4bb1dd54..eeadfea5192 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -1,4 +1,4 @@ -Animated – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Animated #

      Animations are an important part of modern UX, and the Animated +Animated – React Native | A framework for building native apps using React

      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Animated #

      Animations are an important part of modern UX, and the Animated library is designed to make them fluid, powerful, and easy to build and maintain.

      The simplest workflow is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either @@ -361,6 +361,6 @@ exports.examples \ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index 389e0120014..3e746ab45d0 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -Animations – React Native | A framework for building native apps using React

      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Animations #

      Fluid, meaningful animations are essential to the mobile user experience. Like +Animations – React Native | A framework for building native apps using React

      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Animations #

      Fluid, meaningful animations are essential to the mobile user experience. Like everything in React Native, Animation APIs for React Native are currently under development, but have started to coalesce around two complementary systems: LayoutAnimation for animated global layout transactions, and Animated for @@ -391,6 +391,6 @@ source.

      \ No newline at end of file diff --git a/docs/appregistry.html b/docs/appregistry.html index 181858972ac..49bb30e57cd 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,4 +1,4 @@ -AppRegistry – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      AppRegistry #

      AppRegistry is the JS entry point to running all React Native apps. App +AppRegistry – React Native | A framework for building native apps using React

      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      AppRegistry #

      AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking @@ -22,6 +22,6 @@ sure the JS execution environment is setup before other modules are apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.31" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.32" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/appstate.html b/docs/appstate.html index 7c0331c5655..9f188bfbe2d 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -AppState – React Native | A framework for building native apps using React

      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      AppState #

      AppState can tell you if the app is in the foreground or background, +AppState – React Native | A framework for building native apps using React

      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      AppState #

      AppState can tell you if the app is in the foreground or background, and notify you when the state changes.

      AppState is frequently used to determine the intent and proper behavior when handling push notifications.

      App States #

      source ImageSourcePropType #

      The image source (either a remote URL or a local file resource).

      This prop can also contain several remote URLs, specified together with +their width and height and potentially with scale/other URI arguments. +The native side will then choose the best uri to display based on the +measured size of the image container.

      style style #

      Layout Props...
      Shadow Props...
      Transforms...
      backfaceVisibility ReactPropTypes.oneOf(['visible', 'hidden'])
      backgroundColor color
      borderBottomLeftRadius ReactPropTypes.number
      borderBottomRightRadius ReactPropTypes.number
      borderColor color
      borderRadius ReactPropTypes.number
      borderTopLeftRadius ReactPropTypes.number
      borderTopRightRadius ReactPropTypes.number
      borderWidth ReactPropTypes.number
      opacity ReactPropTypes.number
      overflow ReactPropTypes.oneOf(['visible', 'hidden'])
      resizeMode ReactPropTypes.oneOf(Object.keys(ImageResizeMode))
      tintColor color

      Changes the color of all the non-transparent pixels to the tintColor.

      androidoverlayColor ReactPropTypes.string

      When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: @@ -660,7 +678,20 @@ exports.examples : function() { return <MultipleSourcesExample />; }, - platform: 'android', + }, + { + title: 'Legacy local image', + description: + 'Images shipped with the native bundle, but not managed ' + + 'by the JS packager', + render: function() { + return ( + <Image + source={require('image!hawk')} + style={styles.base} + /> + ); + }, }, ]; @@ -739,6 +770,6 @@ exports.examples \ No newline at end of file diff --git a/docs/imageeditor.html b/docs/imageeditor.html index a82f9b0651f..a437626a4e6 100644 --- a/docs/imageeditor.html +++ b/docs/imageeditor.html @@ -1,4 +1,4 @@ -ImageEditor – React Native | A framework for building native apps using React

      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      ImageEditor #

      Methods #

      static cropImage(uri, cropData, success, failure) #

      Crop the image specified by the URI param. If URI points to a remote +ImageEditor – React Native | A framework for building native apps using React

      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      ImageEditor #

      Methods #

      static cropImage(uri, cropData, success, failure) #

      Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the failure callback will be called.

      If the cropping process is successful, the resultant cropped image will be stored in the ImageStore, and the URI returned in the success @@ -19,6 +19,6 @@ cropped image from the ImageStore when you are done with it.

      \ No newline at end of file diff --git a/docs/imagepickerios.html b/docs/imagepickerios.html index 807f897be7b..a06c3901c0c 100644 --- a/docs/imagepickerios.html +++ b/docs/imagepickerios.html @@ -1,4 +1,4 @@ -ImagePickerIOS – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      ImagePickerIOS #

      Methods #

      static canRecordVideos(callback) #

      static canUseCamera(callback) #

      static openCameraDialog(config, successCallback, cancelCallback) #

      static openSelectDialog(config, successCallback, cancelCallback) #

      You can edit the content above on GitHub and send us a pull request!

      ← PrevNext →
      © 2016 Facebook Inc.
      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      ImagePickerIOS #

      Methods #

      static canRecordVideos(callback) #

      static canUseCamera(callback) #

      static openCameraDialog(config, successCallback, cancelCallback) #

      static openSelectDialog(config, successCallback, cancelCallback) #

      You can edit the content above on GitHub and send us a pull request!

      ← PrevNext →
      © 2016 Facebook Inc.
      \ No newline at end of file diff --git a/docs/images.html b/docs/images.html index 4d029093c1e..927c1f2ab2e 100644 --- a/docs/images.html +++ b/docs/images.html @@ -1,4 +1,4 @@ -Images – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Images #

      Static Image Resources #

      As of 0.14 release, React Native provides a unified way of managing images in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

      <Image source={require('./my-icon.png')} />

      The image name is resolved the same way JS modules are resolved. In the example above the packager will look for my-icon.png in the same folder as the component that requires it. Also if you have my-icon.ios.png and my-icon.android.png, the packager will pick the file depending on the platform you are running on.

      You can also use @2x, @3x, etc. suffix in the file name to provide images for different screen densities. For example, if you have the following file structure:

      . +Images – React Native | A framework for building native apps using React
      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Images #

      Static Image Resources #

      As of 0.14 release, React Native provides a unified way of managing images in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

      <Image source={require('./my-icon.png')} />

      The image name is resolved the same way JS modules are resolved. In the example above the packager will look for my-icon.png in the same folder as the component that requires it. Also if you have my-icon.ios.png and my-icon.android.png, the packager will pick the file depending on the platform you are running on.

      You can also use @2x, @3x, etc. suffix in the file name to provide images for different screen densities. For example, if you have the following file structure:

      . ├── button.js └── img ├── check@2x.png @@ -37,6 +37,6 @@ using local resources that are outside of Images.xcassets.

      < apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.31" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.32" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/imagestore.html b/docs/imagestore.html index 0678ea273c1..0c34d2ddc2e 100644 --- a/docs/imagestore.html +++ b/docs/imagestore.html @@ -1,4 +1,4 @@ -ImageStore – React Native | A framework for building native apps using React
      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      ImageStore #

      Methods #

      static hasImageForTag(uri, callback) #

      Check if the ImageStore contains image data for the specified URI. +ImageStore – React Native | A framework for building native apps using React

      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      ImageStore #

      Methods #

      static hasImageForTag(uri, callback) #

      Check if the ImageStore contains image data for the specified URI. @platform ios

      static removeImageForTag(uri) #

      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 @@ -32,6 +32,6 @@ base64 data.

      You ca apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.31" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.32" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/integration-with-existing-apps.html b/docs/integration-with-existing-apps.html index 73a7effd65d..06f060d64fd 100644 --- a/docs/integration-with-existing-apps.html +++ b/docs/integration-with-existing-apps.html @@ -1,4 +1,4 @@ -Integration With Existing Apps – React Native | A framework for building native apps using React

      React Native0.31

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Integration With Existing Apps #

      +Integration With Existing Apps – React Native | A framework for building native apps using React
      React Native0.32

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Integration With Existing Apps #