diff --git a/blog/2016/03/24/introducing-hot-reloading.html b/blog/2016/03/24/introducing-hot-reloading.html index fefc060f955..ca9522b349b 100644 --- a/blog/2016/03/24/introducing-hot-reloading.html +++ b/blog/2016/03/24/introducing-hot-reloading.html @@ -87,4 +87,4 @@ export default function \ No newline at end of file + \ No newline at end of file diff --git a/blog/2016/07/06/toward-better-documentation.html b/blog/2016/07/06/toward-better-documentation.html index d76370c0d98..53a363ffa17 100644 --- a/blog/2016/07/06/toward-better-documentation.html +++ b/blog/2016/07/06/toward-better-documentation.html @@ -34,4 +34,4 @@ AppRegistry. inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/blog/2016/08/12/react-native-meetup-san-francisco.html b/blog/2016/08/12/react-native-meetup-san-francisco.html index 44f500fa6e2..68360e1e9b3 100644 --- a/blog/2016/08/12/react-native-meetup-san-francisco.html +++ b/blog/2016/08/12/react-native-meetup-san-francisco.html @@ -16,4 +16,4 @@ inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html index eaddbdfd260..b997829568a 100644 --- a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html +++ b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html @@ -99,4 +99,4 @@ _onDirectionChange = \ No newline at end of file + \ No newline at end of file diff --git a/blog/2016/09/08/exponent-talks-unraveling-navigation.html b/blog/2016/09/08/exponent-talks-unraveling-navigation.html index c375b114c8d..9b819471933 100644 --- a/blog/2016/09/08/exponent-talks-unraveling-navigation.html +++ b/blog/2016/09/08/exponent-talks-unraveling-navigation.html @@ -16,4 +16,4 @@ inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/blog/2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html b/blog/2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html index 0e93e40ef2f..ae1aa174a7d 100644 --- a/blog/2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html +++ b/blog/2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html @@ -29,4 +29,4 @@ $ react-native upgrade
\ No newline at end of file + \ No newline at end of file diff --git a/blog/2016/11/08/introducing-button-yarn-and-a-public-roadmap.html b/blog/2016/11/08/introducing-button-yarn-and-a-public-roadmap.html index 4d9be8e7195..c73364039ce 100644 --- a/blog/2016/11/08/introducing-button-yarn-and-a-public-roadmap.html +++ b/blog/2016/11/08/introducing-button-yarn-and-a-public-roadmap.html @@ -20,4 +20,4 @@ inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/blog/2016/12/05/easier-upgrades.html b/blog/2016/12/05/easier-upgrades.html index f6c7e2c1b2c..f851704f427 100644 --- a/blog/2016/12/05/easier-upgrades.html +++ b/blog/2016/12/05/easier-upgrades.html @@ -51,4 +51,4 @@ index e98ebb0. \ No newline at end of file + \ No newline at end of file diff --git a/blog/2017/01/07/monthly-release-cadence.html b/blog/2017/01/07/monthly-release-cadence.html index b4248f887e7..b6e2a30f240 100644 --- a/blog/2017/01/07/monthly-release-cadence.html +++ b/blog/2017/01/07/monthly-release-cadence.html @@ -17,4 +17,4 @@ react-native- \ No newline at end of file + \ No newline at end of file diff --git a/blog/2017/02/14/using-native-driver-for-animated.html b/blog/2017/02/14/using-native-driver-for-animated.html index 567f5787b94..77cbb502715 100644 --- a/blog/2017/02/14/using-native-driver-for-animated.html +++ b/blog/2017/02/14/using-native-driver-for-animated.html @@ -57,4 +57,4 @@ NativeAnimatedModule. \ No newline at end of file + \ No newline at end of file diff --git a/blog/2017/03/13/better-list-views.html b/blog/2017/03/13/better-list-views.html index 0a81865eacb..84df94c50b0 100644 --- a/blog/2017/03/13/better-list-views.html +++ b/blog/2017/03/13/better-list-views.html @@ -52,4 +52,4 @@ inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/blog/2017/03/13/idx-the-existential-function.html b/blog/2017/03/13/idx-the-existential-function.html index c752d119c42..f8614f0870b 100644 --- a/blog/2017/03/13/idx-the-existential-function.html +++ b/blog/2017/03/13/idx-the-existential-function.html @@ -22,4 +22,4 @@ props.user \ No newline at end of file + \ No newline at end of file diff --git a/blog/2017/03/13/introducing-create-react-native-app.html b/blog/2017/03/13/introducing-create-react-native-app.html index 2edbf4bb140..6637d0a6b99 100644 --- a/blog/2017/03/13/introducing-create-react-native-app.html +++ b/blog/2017/03/13/introducing-create-react-native-app.html @@ -19,4 +19,4 @@ $ npm start

This will start the React Native packager and print a QR cod inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 2dd2aebe9cb..ab4dde5f0c2 100644 --- a/blog/index.html +++ b/blog/index.html @@ -16,4 +16,4 @@ inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/accessibility.html b/releases/next/docs/accessibility.html index 876effa6f5c..e78095d0df6 100644 --- a/releases/next/docs/accessibility.html +++ b/releases/next/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility

React Nativenext

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.

In addition to this documentation, you might find this blog post about React Native accessibility to be useful.

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 Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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.

In addition to this documentation, you might find this blog post about React Native accessibility to be useful.

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}> @@ -57,4 +57,4 @@ On the other hand, if view B contains a child view C a inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/accessibilityinfo.html b/releases/next/docs/accessibilityinfo.html index 3f21258ca3d..2784b559b22 100644 --- a/releases/next/docs/accessibilityinfo.html +++ b/releases/next/docs/accessibilityinfo.html @@ -1,4 +1,4 @@ -AccessibilityInfo
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AccessibilityInfo #

Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The +AccessibilityInfo

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

AccessibilityInfo #

Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The AccessibilityInfo API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.

Here's a small example illustrating how to use AccessibilityInfo:

class ScreenReaderStatusExample extends React.Component { state = { @@ -61,4 +61,4 @@ reader is enabled and false otherwise.
\ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/actionsheetios.html b/releases/next/docs/actionsheetios.html index df98dc605e6..70a542135d6 100644 --- a/releases/next/docs/actionsheetios.html +++ b/releases/next/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS
React Nativenext

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 Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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 activities to exclude from the ActionSheet

NOTE: if url points to a local file, or is a base64-encoded @@ -222,4 +222,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/activityindicator.html b/releases/next/docs/activityindicator.html index 289d64302ae..f58e85bb485 100644 --- a/releases/next/docs/activityindicator.html +++ b/releases/next/docs/activityindicator.html @@ -1,4 +1,4 @@ -ActivityIndicator

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Props #

ViewPropTypes props... #

animating?: 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?: enum('small', 'large'), number #

Size of the indicator (default is 'small'). +ActivityIndicator

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Props #

ViewPropTypes props... #

animating?: 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?: enum('small', 'large'), number #

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

ioshidesWhenStopped?: 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'; import React, { Component } from 'react'; @@ -198,4 +198,4 @@ const styles = StyleSheet \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/adsupportios.html b/releases/next/docs/adsupportios.html index cca6941ff82..8b6bbee8f5b 100644 --- a/releases/next/docs/adsupportios.html +++ b/releases/next/docs/adsupportios.html @@ -1,4 +1,4 @@ -AdSupportIOS
React Nativenext

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 Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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'); @@ -102,4 +102,4 @@ class AdSupportIOSExample extends \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/alert.html b/releases/next/docs/alert.html index a0d6a9a8289..47559fb3c24 100644 --- a/releases/next/docs/alert.html +++ b/releases/next/docs/alert.html @@ -1,4 +1,4 @@ -Alert
React Nativenext

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 Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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, @@ -171,4 +171,4 @@ module.exports \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/alertios.html b/releases/next/docs/alertios.html index bcc635da033..39eb8a622dd 100644 --- a/releases/next/docs/alertios.html +++ b/releases/next/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AlertIOS #

AlertIOS provides functionality to create an iOS alert dialog with a +AlertIOS

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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.' @@ -235,4 +235,4 @@ class PromptOptions extends \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/android-building-from-source.html b/releases/next/docs/android-building-from-source.html index de43188dc88..3d16fe81047 100644 --- a/releases/next/docs/android-building-from-source.html +++ b/releases/next/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source
React Nativenext

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

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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. 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 { @@ -46,4 +46,4 @@ dependencies { inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/animated.html b/releases/next/docs/animated.html index 370ed84b7c4..a8884e7de3f 100644 --- a/releases/next/docs/animated.html +++ b/releases/next/docs/animated.html @@ -1,4 +1,4 @@ -Animated
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Animated #

The Animated library is designed to make animations fluid, powerful, and +Animated

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Animated #

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.

The simplest workflow for creating an animation is to to create an @@ -382,4 +382,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/animations.html b/releases/next/docs/animations.html index 7ef63ce5236..fc988234bf9 100644 --- a/releases/next/docs/animations.html +++ b/releases/next/docs/animations.html @@ -1,36 +1,35 @@ -Animations

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Animations #

Animations are very important to create a great user experience. +Animations

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Animations #

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.

React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

Animated API #

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

Animated exports four animatable component types: View, Text, Image, and ScrollView, but you can also create your own using Animated.createAnimatedComponent().

For example, a container view that fades in when it is mounted may look like this:

// FadeInView.js -import React, { Component } from 'react'; -import { - Animated, -} from 'react-native'; +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.

Animated exports four animatable component types: View, Text, Image, and ScrollView, but you can also create your own using Animated.createAnimatedComponent().

For example, a container view that fades in when it is mounted may look like this:

Let's break down what's happening here. In the FadeInView constructor, a new Animated.Value called fadeAnim is initialized as part of state. The opacity property on the View is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.

When the component mounts, the opacity is set to 0. @@ -198,19 +202,28 @@ row below which would otherwise require explicit coordination between the components in order to animate them all in sync.

Note that although LayoutAnimation is very powerful and can be quite useful, it provides much less control than Animated and other animation libraries, so you may need to use another approach if you can't get LayoutAnimation to do -what you want.

Note that in order to get this to work on Android you need to set the following flags via UIManager:

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

class App extends React.Component { - constructor(props) { - super(props); - this.state = { w: 100, h: 100 }; - this._onPress = this._onPress.bind(this); - } +what you want.

Note that in order to get this to work on Android you need to set the following flags via UIManager:

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

This example uses a preset value, you can customize the animations as you need, see LayoutAnimation.js for more information.

Additional notes #

requestAnimationFrame #

requestAnimationFrame is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that @@ -241,41 +277,15 @@ components (components that are actually backed by native views, unlike composite components) directly, without having to setState and re-render the component hierarchy.

We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested -and hasn't been optimized with shouldComponentUpdate.

// Back inside of the App component, replace the scrollSpring listener -// in componentWillMount with this: -this._scrollSpring.addListener({ - onSpringUpdate: () => { - if (!this._photo) { return } - var v = this._scrollSpring.getCurrentValue(); - var newProps = {style: {transform: [{scaleX: v}, {scaleY: v}]}}; - this._photo.setNativeProps(newProps); - }, -}); - -// Lastly, we update the render function to no longer pass in the -// transform via style (avoid clashes when re-rendering) and to set the -// photo ref -render() { - return ( - <View style={styles.container}> - <TouchableWithoutFeedback onPressIn={this._onPressIn} onPressOut={this._onPressOut}> - <Image ref={component => this._photo = component} - source={{uri: "img/ReboundExample.png"}} - style={{width: 250, height: 200}} /> - </TouchableWithoutFeedback> - </View> - ); -}

Run this example

It would not make sense to use setNativeProps with react-tween-state -because the updated tween values are set on the state automatically by -the library - Rebound on the other hand gives us an updated value for -each frame with the onSpringUpdate function.

If you find your animations with dropping frames (performing below 60 -frames per second), look into using setNativeProps or -shouldComponentUpdate to optimize them. You may also want to defer any -computationally intensive work until after animations are complete, -using the -InteractionManager. You -can monitor the frame rate by using the In-App Developer Menu "FPS -Monitor" tool.

← PrevNext →

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

\ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/appregistry.html b/releases/next/docs/appregistry.html index db7bda1713f..f47cfeca2b7 100644 --- a/releases/next/docs/appregistry.html +++ b/releases/next/docs/appregistry.html @@ -1,4 +1,4 @@ -AppRegistry
React Nativenext

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 Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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 @@ -30,4 +30,4 @@ sure the JS execution environment is setup before other modules are inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/appstate.html b/releases/next/docs/appstate.html index f5ed4501aaf..0c8048a71fb 100644 --- a/releases/next/docs/appstate.html +++ b/releases/next/docs/appstate.html @@ -1,4 +1,4 @@ -AppState

React Nativenext

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 Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

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 #

  • active - The app is running in the foreground
  • background - The app is running in the background. The user is either in another app or on the home screen
  • inactive - This is a state that occurs when transitioning between @@ -147,4 +147,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/asyncstorage.html b/releases/next/docs/asyncstorage.html index c79a806c5e9..05f13e7956a 100644 --- a/releases/next/docs/asyncstorage.html +++ b/releases/next/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    AsyncStorage #

    AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage +AsyncStorage

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    AsyncStorage #

    AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

    It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.

    On iOS, AsyncStorage is backed by native code that stores small values in a @@ -235,4 +235,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/backandroid.html b/releases/next/docs/backandroid.html index 8e7de310e8e..a04e64d17da 100644 --- a/releases/next/docs/backandroid.html +++ b/releases/next/docs/backandroid.html @@ -1,4 +1,4 @@ -BackAndroid

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    BackAndroid #

    Deprecated. Use BackHandler instead.

    Methods #

    static exitApp() #

    static addEventListener(eventName, handler) #

    static removeEventListener(eventName, handler) #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    BackAndroid #

    Deprecated. Use BackHandler instead.

    Methods #

    static exitApp() #

    static addEventListener(eventName, handler) #

    static removeEventListener(eventName, handler) #

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

    ← PrevNext →
    \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/backhandler.html b/releases/next/docs/backhandler.html index 9126a9a7bcd..953a6a50090 100644 --- a/releases/next/docs/backhandler.html +++ b/releases/next/docs/backhandler.html @@ -1,4 +1,4 @@ -BackHandler
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    BackHandler #

    Detect hardware button presses for back navigation.

    Android: Detect hardware back button presses, and programmatically invoke the default back button +BackHandler

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    BackHandler #

    Detect hardware button presses for back navigation.

    Android: Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true.

    tvOS: Detect presses of the menu button on the TV remote. (Still to be implemented: programmatically disable menu button handling functionality to exit the app if there are no listeners or if none of the listeners return true.)

    iOS: Not applicable.

    The event subscriptions are called in reverse order (i.e. last registered subscription first), @@ -29,4 +29,4 @@ and if one subscription returns true then subscriptions registered earlier will inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/building-for-apple-tv.html b/releases/next/docs/building-for-apple-tv.html new file mode 100644 index 00000000000..9a4c1b68484 --- /dev/null +++ b/releases/next/docs/building-for-apple-tv.html @@ -0,0 +1,59 @@ +Building For Apple TV

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    Building For Apple TV #

    Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.

    The UIExplorer example project supports Apple TV; use the UIExplorer-tvOS build target to build for tvOS.

    Build changes #

    • Native layer: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.

    • react-native init: New React Native projects created with react-native init will have Apple TV target automatically created in their XCode projects.

    • JavaScript layer: Support for Apple TV has been added to Platform.ios.js. You can check whether code is running on AppleTV by doing

    var Platform = require('Platform'); +var running_on_apple_tv = Platform.isTVOS;

    Code changes #

    • General support for tvOS: 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.

    • Common codebase: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.

    • Access to touchable controls: When running on Apple TV, the native view class is RCTTVView, which has additional methods to make use of the tvOS focus engine. The Touchable 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 TouchableHighlight and TouchableOpacity will "just work". In particular:

      • touchableHandleActivePressIn will be executed when the touchable view goes into focus
      • touchableHandleActivePressOut will be executed when the touchable view goes out of focus
      • touchableHandlePress will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.

    • TV remote/keyboard input: A new native class, RCTTVRemoteHandler, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by RCTTVNavigationEventEmitter (a subclass of RCTEventEmitter), that fires a JS event. This event will be picked up by instances of the TVEventHandler JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of TVEventHandler and listen for these events, as in the following code:

    var TVEventHandler = require('TVEventHandler'); + +. +. +. + +class Game2048 extends React.Component { + _tvEventHandler: any; + + _enableTVEventHandler() { + this._tvEventHandler = new TVEventHandler(); + this._tvEventHandler.enable(this, function(cmp, evt) { + if (evt && evt.eventType === 'right') { + cmp.setState({board: cmp.state.board.move(2)}); + } else if(evt && evt.eventType === 'up') { + cmp.setState({board: cmp.state.board.move(1)}); + } else if(evt && evt.eventType === 'left') { + cmp.setState({board: cmp.state.board.move(0)}); + } else if(evt && evt.eventType === 'down') { + cmp.setState({board: cmp.state.board.move(3)}); + } else if(evt && evt.eventType === 'playPause') { + cmp.restartGame(); + } + }); + } + + _disableTVEventHandler() { + if (this._tvEventHandler) { + this._tvEventHandler.disable(); + delete this._tvEventHandler; + } + } + + componentDidMount() { + this._enableTVEventHandler(); + } + + componentWillUnmount() { + this._disableTVEventHandler(); + }

    • TV remote animations: RCTTVView 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.

    • Back navigation with the TV remote menu button: The BackHandler 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.

    • Known issues:

      • ListView scrolling. The issue can be easily worked around by setting removeClippedSubviews to false in ListView and similar components. For more discussion of this issue, see this PR.
    ← PrevNext →

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

    \ No newline at end of file diff --git a/releases/next/docs/button.html b/releases/next/docs/button.html index a4ec71b72fc..2499f709bea 100644 --- a/releases/next/docs/button.html +++ b/releases/next/docs/button.html @@ -1,4 +1,4 @@ -Button
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Button #

    A basic button component that should render nicely on any platform. Supports +Button

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    Button #

    A basic button component that should render nicely on any platform. Supports a minimal level of customization.

    If this button doesn't look right for your app, you can build your own @@ -115,4 +115,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/cameraroll.html b/releases/next/docs/cameraroll.html index 2c75ca31e8a..2993c9977cc 100644 --- a/releases/next/docs/cameraroll.html +++ b/releases/next/docs/cameraroll.html @@ -1,4 +1,4 @@ -CameraRoll

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    CameraRoll #

    CameraRoll provides access to the local camera roll / gallery. +CameraRoll

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    CameraRoll #

    CameraRoll provides access to the local camera roll / gallery. Before using this you must link the RCTCameraRoll library. You can refer to Linking for help.

    Permissions #

    The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Fill out the NSCameraUsageDescription key in your Info.plist with a string that describes how your @@ -149,4 +149,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/clipboard.html b/releases/next/docs/clipboard.html index 8397e8caa47..813fc194a2b 100644 --- a/releases/next/docs/clipboard.html +++ b/releases/next/docs/clipboard.html @@ -1,4 +1,4 @@ -Clipboard

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Clipboard #

    Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android

    Methods #

    static getString() #

    Get content of string type, this method returns a Promise, so you can use following code to get clipboard content

    async _getContent() { +Clipboard
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    Clipboard #

    Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android

    Methods #

    static getString() #

    Get content of string type, this method returns a Promise, so you can use following code to get clipboard content

    async _getContent() { var content = await Clipboard.getString(); }

    static setString(content) #

    Set content of string type. You can use following code to set clipboard content

    _setContent() { Clipboard.setString('hello world'); @@ -68,4 +68,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/colors.html b/releases/next/docs/colors.html index 3cd8dd45a3b..9b2cdc8701d 100644 --- a/releases/next/docs/colors.html +++ b/releases/next/docs/colors.html @@ -1,4 +1,4 @@ -Colors
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Colors #

    Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.

    Red-green-blue #

    React Native supports rgb() and rgba() in both hexadecimal and functional notation:

    • '#f0f' (#rgb)

    • '#ff00ff' (#rrggbb)

    • 'rgb(255, 0, 255)'

    • 'rgba(255, 255, 255, 1.0)'

    • '#f0ff' (#rgba)

    • '#ff00ff00' (#rrggbbaa)

    Hue-saturation-lightness #

    hsl() and hsla() is supported in functional notation:

    • 'hsl(360, 100%, 100%)'
    • 'hsla(360, 100%, 100%, 1.0)'

    transparent #

    This is a shortcut for rgba(0,0,0,0):

    • 'transparent'

    Named colors #

    You can also use color names as values. React Native follows the CSS3 specification:

    • aliceblue (#f0f8ff)
    • antiquewhite (#faebd7)
    • aqua (#00ffff)
    • aquamarine (#7fffd4)
    • azure (#f0ffff)
    • beige (#f5f5dc)
    • bisque (#ffe4c4)
    • black (#000000)
    • blanchedalmond (#ffebcd)
    • blue (#0000ff)
    • blueviolet (#8a2be2)
    • brown (#a52a2a)
    • burlywood (#deb887)
    • cadetblue (#5f9ea0)
    • chartreuse (#7fff00)
    • chocolate (#d2691e)
    • coral (#ff7f50)
    • cornflowerblue (#6495ed)
    • cornsilk (#fff8dc)
    • crimson (#dc143c)
    • cyan (#00ffff)
    • darkblue (#00008b)
    • darkcyan (#008b8b)
    • darkgoldenrod (#b8860b)
    • darkgray (#a9a9a9)
    • darkgreen (#006400)
    • darkgrey (#a9a9a9)
    • darkkhaki (#bdb76b)
    • darkmagenta (#8b008b)
    • darkolivegreen (#556b2f)
    • darkorange (#ff8c00)
    • darkorchid (#9932cc)
    • darkred (#8b0000)
    • darksalmon (#e9967a)
    • darkseagreen (#8fbc8f)
    • darkslateblue (#483d8b)
    • darkslategray (#2f4f4f)
    • darkslategrey (#2f4f4f)
    • darkturquoise (#00ced1)
    • darkviolet (#9400d3)
    • deeppink (#ff1493)
    • deepskyblue (#00bfff)
    • dimgray (#696969)
    • dimgrey (#696969)
    • dodgerblue (#1e90ff)
    • firebrick (#b22222)
    • floralwhite (#fffaf0)
    • forestgreen (#228b22)
    • fuchsia (#ff00ff)
    • gainsboro (#dcdcdc)
    • ghostwhite (#f8f8ff)
    • gold (#ffd700)
    • goldenrod (#daa520)
    • gray (#808080)
    • green (#008000)
    • greenyellow (#adff2f)
    • grey (#808080)
    • honeydew (#f0fff0)
    • hotpink (#ff69b4)
    • indianred (#cd5c5c)
    • indigo (#4b0082)
    • ivory (#fffff0)
    • khaki (#f0e68c)
    • lavender (#e6e6fa)
    • lavenderblush (#fff0f5)
    • lawngreen (#7cfc00)
    • lemonchiffon (#fffacd)
    • lightblue (#add8e6)
    • lightcoral (#f08080)
    • lightcyan (#e0ffff)
    • lightgoldenrodyellow (#fafad2)
    • lightgray (#d3d3d3)
    • lightgreen (#90ee90)
    • lightgrey (#d3d3d3)
    • lightpink (#ffb6c1)
    • lightsalmon (#ffa07a)
    • lightseagreen (#20b2aa)
    • lightskyblue (#87cefa)
    • lightslategray (#778899)
    • lightslategrey (#778899)
    • lightsteelblue (#b0c4de)
    • lightyellow (#ffffe0)
    • lime (#00ff00)
    • limegreen (#32cd32)
    • linen (#faf0e6)
    • magenta (#ff00ff)
    • maroon (#800000)
    • mediumaquamarine (#66cdaa)
    • mediumblue (#0000cd)
    • mediumorchid (#ba55d3)
    • mediumpurple (#9370db)
    • mediumseagreen (#3cb371)
    • mediumslateblue (#7b68ee)
    • mediumspringgreen (#00fa9a)
    • mediumturquoise (#48d1cc)
    • mediumvioletred (#c71585)
    • midnightblue (#191970)
    • mintcream (#f5fffa)
    • mistyrose (#ffe4e1)
    • moccasin (#ffe4b5)
    • navajowhite (#ffdead)
    • navy (#000080)
    • oldlace (#fdf5e6)
    • olive (#808000)
    • olivedrab (#6b8e23)
    • orange (#ffa500)
    • orangered (#ff4500)
    • orchid (#da70d6)
    • palegoldenrod (#eee8aa)
    • palegreen (#98fb98)
    • paleturquoise (#afeeee)
    • palevioletred (#db7093)
    • papayawhip (#ffefd5)
    • peachpuff (#ffdab9)
    • peru (#cd853f)
    • pink (#ffc0cb)
    • plum (#dda0dd)
    • powderblue (#b0e0e6)
    • purple (#800080)
    • rebeccapurple (#663399)
    • red (#ff0000)
    • rosybrown (#bc8f8f)
    • royalblue (#4169e1)
    • saddlebrown (#8b4513)
    • salmon (#fa8072)
    • sandybrown (#f4a460)
    • seagreen (#2e8b57)
    • seashell (#fff5ee)
    • sienna (#a0522d)
    • silver (#c0c0c0)
    • skyblue (#87ceeb)
    • slateblue (#6a5acd)
    • slategray (#708090)
    • slategrey (#708090)
    • snow (#fffafa)
    • springgreen (#00ff7f)
    • steelblue (#4682b4)
    • tan (#d2b48c)
    • teal (#008080)
    • thistle (#d8bfd8)
    • tomato (#ff6347)
    • turquoise (#40e0d0)
    • violet (#ee82ee)
    • wheat (#f5deb3)
    • white (#ffffff)
    • whitesmoke (#f5f5f5)
    • yellow (#ffff00)
    • yellowgreen (#9acd32)
    ← PrevNext →

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

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    Colors #

    Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.

    Red-green-blue #

    React Native supports rgb() and rgba() in both hexadecimal and functional notation:

    • '#f0f' (#rgb)

    • '#ff00ff' (#rrggbb)

    • 'rgb(255, 0, 255)'

    • 'rgba(255, 255, 255, 1.0)'

    • '#f0ff' (#rgba)

    • '#ff00ff00' (#rrggbbaa)

    Hue-saturation-lightness #

    hsl() and hsla() is supported in functional notation:

    • 'hsl(360, 100%, 100%)'
    • 'hsla(360, 100%, 100%, 1.0)'

    transparent #

    This is a shortcut for rgba(0,0,0,0):

    • 'transparent'

    Named colors #

    You can also use color names as values. React Native follows the CSS3 specification:

    • aliceblue (#f0f8ff)
    • antiquewhite (#faebd7)
    • aqua (#00ffff)
    • aquamarine (#7fffd4)
    • azure (#f0ffff)
    • beige (#f5f5dc)
    • bisque (#ffe4c4)
    • black (#000000)
    • blanchedalmond (#ffebcd)
    • blue (#0000ff)
    • blueviolet (#8a2be2)
    • brown (#a52a2a)
    • burlywood (#deb887)
    • cadetblue (#5f9ea0)
    • chartreuse (#7fff00)
    • chocolate (#d2691e)
    • coral (#ff7f50)
    • cornflowerblue (#6495ed)
    • cornsilk (#fff8dc)
    • crimson (#dc143c)
    • cyan (#00ffff)
    • darkblue (#00008b)
    • darkcyan (#008b8b)
    • darkgoldenrod (#b8860b)
    • darkgray (#a9a9a9)
    • darkgreen (#006400)
    • darkgrey (#a9a9a9)
    • darkkhaki (#bdb76b)
    • darkmagenta (#8b008b)
    • darkolivegreen (#556b2f)
    • darkorange (#ff8c00)
    • darkorchid (#9932cc)
    • darkred (#8b0000)
    • darksalmon (#e9967a)
    • darkseagreen (#8fbc8f)
    • darkslateblue (#483d8b)
    • darkslategray (#2f4f4f)
    • darkslategrey (#2f4f4f)
    • darkturquoise (#00ced1)
    • darkviolet (#9400d3)
    • deeppink (#ff1493)
    • deepskyblue (#00bfff)
    • dimgray (#696969)
    • dimgrey (#696969)
    • dodgerblue (#1e90ff)
    • firebrick (#b22222)
    • floralwhite (#fffaf0)
    • forestgreen (#228b22)
    • fuchsia (#ff00ff)
    • gainsboro (#dcdcdc)
    • ghostwhite (#f8f8ff)
    • gold (#ffd700)
    • goldenrod (#daa520)
    • gray (#808080)
    • green (#008000)
    • greenyellow (#adff2f)
    • grey (#808080)
    • honeydew (#f0fff0)
    • hotpink (#ff69b4)
    • indianred (#cd5c5c)
    • indigo (#4b0082)
    • ivory (#fffff0)
    • khaki (#f0e68c)
    • lavender (#e6e6fa)
    • lavenderblush (#fff0f5)
    • lawngreen (#7cfc00)
    • lemonchiffon (#fffacd)
    • lightblue (#add8e6)
    • lightcoral (#f08080)
    • lightcyan (#e0ffff)
    • lightgoldenrodyellow (#fafad2)
    • lightgray (#d3d3d3)
    • lightgreen (#90ee90)
    • lightgrey (#d3d3d3)
    • lightpink (#ffb6c1)
    • lightsalmon (#ffa07a)
    • lightseagreen (#20b2aa)
    • lightskyblue (#87cefa)
    • lightslategray (#778899)
    • lightslategrey (#778899)
    • lightsteelblue (#b0c4de)
    • lightyellow (#ffffe0)
    • lime (#00ff00)
    • limegreen (#32cd32)
    • linen (#faf0e6)
    • magenta (#ff00ff)
    • maroon (#800000)
    • mediumaquamarine (#66cdaa)
    • mediumblue (#0000cd)
    • mediumorchid (#ba55d3)
    • mediumpurple (#9370db)
    • mediumseagreen (#3cb371)
    • mediumslateblue (#7b68ee)
    • mediumspringgreen (#00fa9a)
    • mediumturquoise (#48d1cc)
    • mediumvioletred (#c71585)
    • midnightblue (#191970)
    • mintcream (#f5fffa)
    • mistyrose (#ffe4e1)
    • moccasin (#ffe4b5)
    • navajowhite (#ffdead)
    • navy (#000080)
    • oldlace (#fdf5e6)
    • olive (#808000)
    • olivedrab (#6b8e23)
    • orange (#ffa500)
    • orangered (#ff4500)
    • orchid (#da70d6)
    • palegoldenrod (#eee8aa)
    • palegreen (#98fb98)
    • paleturquoise (#afeeee)
    • palevioletred (#db7093)
    • papayawhip (#ffefd5)
    • peachpuff (#ffdab9)
    • peru (#cd853f)
    • pink (#ffc0cb)
    • plum (#dda0dd)
    • powderblue (#b0e0e6)
    • purple (#800080)
    • rebeccapurple (#663399)
    • red (#ff0000)
    • rosybrown (#bc8f8f)
    • royalblue (#4169e1)
    • saddlebrown (#8b4513)
    • salmon (#fa8072)
    • sandybrown (#f4a460)
    • seagreen (#2e8b57)
    • seashell (#fff5ee)
    • sienna (#a0522d)
    • silver (#c0c0c0)
    • skyblue (#87ceeb)
    • slateblue (#6a5acd)
    • slategray (#708090)
    • slategrey (#708090)
    • snow (#fffafa)
    • springgreen (#00ff7f)
    • steelblue (#4682b4)
    • tan (#d2b48c)
    • teal (#008080)
    • thistle (#d8bfd8)
    • tomato (#ff6347)
    • turquoise (#40e0d0)
    • violet (#ee82ee)
    • wheat (#f5deb3)
    • white (#ffffff)
    • whitesmoke (#f5f5f5)
    • yellow (#ffff00)
    • yellowgreen (#9acd32)
    ← PrevNext →

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

    \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/communication-ios.html b/releases/next/docs/communication-ios.html index c9455310a79..b3d2be94f7a 100644 --- a/releases/next/docs/communication-ios.html +++ b/releases/next/docs/communication-ios.html @@ -1,4 +1,4 @@ -Communication between native and React Native
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Communication between native and React Native #

    In Integrating with Existing Apps guide and Native UI Components guide 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.

    Introduction #

    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.

    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.

    Properties #

    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.

    Passing properties from native to React Native #

    In order to embed a React Native view in a native component, we use RCTRootView. RCTRootView is a UIView that holds a React Native app. It also provides an interface between native side and the hosted app.

    RCTRootView has an initializer that allows you to pass arbitrary properties down to the React Native app. The initialProperties parameter has to be an instance of NSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.

    NSArray *imageList = @[@"http://foo.com/bar1.png", +Communication between native and React Native
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    Communication between native and React Native #

    In Integrating with Existing Apps guide and Native UI Components guide 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.

    Introduction #

    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.

    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.

    Properties #

    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.

    Passing properties from native to React Native #

    In order to embed a React Native view in a native component, we use RCTRootView. RCTRootView is a UIView that holds a React Native app. It also provides an interface between native side and the hosted app.

    RCTRootView has an initializer that allows you to pass arbitrary properties down to the React Native app. The initialProperties parameter has to be an instance of NSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.

    NSArray *imageList = @[@"http://foo.com/bar1.png", @"http://foo.com/bar2.png"]; NSDictionary *props = @{@"images" : imageList}; @@ -74,7 +74,7 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F newFrame.size = rootView.intrinsicContentSize; rootView.frame = newFrame; -}

    In the example we have a FlexibleSizeExampleView view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to RCTRootViewSizeFlexibilityHeight, which means that rootViewDidChangeIntrinsicSize: method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.

    You can checkout full source code of the example here.

    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 rootViewDidChangeIntrinsicSize: method will be called once the content size is known.

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

    Note: 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 UIView's hidden property). Then change its visibility in the delegate method.

    ← PrevNext →

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

    \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/datepickerandroid.html b/releases/next/docs/datepickerandroid.html index 7d12eafa34c..e9643951cfa 100644 --- a/releases/next/docs/datepickerandroid.html +++ b/releases/next/docs/datepickerandroid.html @@ -1,4 +1,4 @@ -DatePickerAndroid
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    DatePickerAndroid #

    Opens the standard Android date picker dialog.

    Example #

    try { +DatePickerAndroid
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    DatePickerAndroid #

    Opens the standard Android date picker dialog.

    Example #

    try { const {action, year, month, day} = await DatePickerAndroid.open({ // Use `new Date()` for current date. // May 25 2020. Month 0 is January. @@ -155,4 +155,4 @@ module.exports \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/datepickerios.html b/releases/next/docs/datepickerios.html index c6311f612ac..a6319bb6897 100644 --- a/releases/next/docs/datepickerios.html +++ b/releases/next/docs/datepickerios.html @@ -1,4 +1,4 @@ -DatePickerIOS
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    DatePickerIOS #

    Use DatePickerIOS to render a date/time picker (selector) on iOS. This is +DatePickerIOS

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    DatePickerIOS #

    Use DatePickerIOS to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the onDateChange callback and update the date prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.date as the @@ -173,4 +173,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/debugging.html b/releases/next/docs/debugging.html index 7a77973453c..d46d5434a73 100644 --- a/releases/next/docs/debugging.html +++ b/releases/next/docs/debugging.html @@ -1,4 +1,4 @@ -Debugging

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Debugging #

    Enabling Keyboard Shortcuts #

    React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

    Accessing the In-App Developer Menu #

    You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.

    The Developer Menu is disabled in release (production) builds.

    Reloading JavaScript #

    Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.

    Automatic reloading #

    You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.

    You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.

    There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.

    You will need to rebuild your app for changes to take effect in certain situations:

    • You have added new resources to your native app's bundle, such as an image in Images.xcassets on iOS or the res/drawable folder on Android.
    • You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).

    In-app Errors and Warnings #

    Errors and warnings are displayed inside your app in development builds.

    Errors #

    In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.

    Warnings #

    Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.

    As with a RedBox, you can use console.warn() to trigger a YellowBox.

    YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];.

    In CI/Xcode, YellowBoxes can also be disabled by setting the IS_TESTING environment variable.

    RedBoxes and YellowBoxes are automatically disabled in release (production) builds.

    Accessing console logs #

    You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:

    $ react-native log-ios +Debugging
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Apple TV)

    Guides (Android)

    components

    APIs

    Debugging #

    Enabling Keyboard Shortcuts #

    React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

    Accessing the In-App Developer Menu #

    You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.

    The Developer Menu is disabled in release (production) builds.

    Reloading JavaScript #

    Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.

    Automatic reloading #

    You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.

    You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.

    There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.

    You will need to rebuild your app for changes to take effect in certain situations:

    • You have added new resources to your native app's bundle, such as an image in Images.xcassets on iOS or the res/drawable folder on Android.
    • You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).

    In-app Errors and Warnings #

    Errors and warnings are displayed inside your app in development builds.

    Errors #

    In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.

    Warnings #

    Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.

    As with a RedBox, you can use console.warn() to trigger a YellowBox.

    YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];.

    In CI/Xcode, YellowBoxes can also be disabled by setting the IS_TESTING environment variable.

    RedBoxes and YellowBoxes are automatically disabled in release (production) builds.

    Accessing console logs #

    You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:

    $ react-native log-ios $ react-native log-android

    You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.

    Chrome Developer Tools #

    To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.

    Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.

    It is currently not possible to use the "React" tab in the Chrome Developer Tools to inspect app widgets. You can use Nuclide's "React Native Inspector" as a workaround.

    Debugging on a device with Chrome Developer Tools #

    On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.

    On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:

    adb reverse tcp:8081 tcp:8081

    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.

    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.

    Debugging using a custom JavaScript debugger #

    To use a custom JavaScript debugger in place of Chrome Developer Tools, set the REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.

    The debugger will receive a list of all project roots, separated by a space. For example, if you set REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the command node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app will be used to start your debugger.

    Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.

    Debugging with Stetho on Android #

    1. In android/app/build.gradle, add these lines in the dependencies section:

      compile 'com.facebook.stetho:stetho:1.3.1' compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'

    2. In android/app/src/main/java/com/{yourAppName}/MainApplication.java, add the following imports:

      import com.facebook.react.modules.network.ReactCookieJarContainer; import com.facebook.stetho.Stetho; @@ -34,4 +34,4 @@ import java.util \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/dimensions.html b/releases/next/docs/dimensions.html index a881690404d..81a1c99821c 100644 --- a/releases/next/docs/dimensions.html +++ b/releases/next/docs/dimensions.html @@ -1,4 +1,4 @@ -Dimensions
      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      APIs

      Dimensions #

      Methods #

      static set(dims) #

      This should only be called from native code by sending the +Dimensions

      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Apple TV)

      Guides (Android)

      components

      APIs

      Dimensions #

      Methods #

      static set(dims) #

      This should only be called from native code by sending the didUpdateDimensions event.

      @param {object} dims Simple string-keyed object of dimensions to set

      static get(dim) #

      Initial dimensions are set before runApplication is called so they should be available before any other require's are run, but may be updated later.

      Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on @@ -26,4 +26,4 @@ are the same as the return values of Dimensions.get('window') \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/direct-manipulation.html b/releases/next/docs/direct-manipulation.html index 2b3fc066cf6..5ca2f701e70 100644 --- a/releases/next/docs/direct-manipulation.html +++ b/releases/next/docs/direct-manipulation.html @@ -1,4 +1,4 @@ -Direct Manipulation

      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      APIs

      Direct Manipulation #

      It is sometimes necessary to make changes directly to a component +Direct Manipulation

      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Apple TV)

      Guides (Android)

      components

      APIs

      Direct Manipulation #

      It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile @@ -50,7 +50,10 @@ you will notice that it is a wrapper around RCTUIManager.updateView this is the exact same function call that results from re-rendering - see receiveComponent in ReactNativeBaseComponent.js.

      Composite components and setNativeProps #

      Composite components are not backed by a native view, so you cannot call -setNativeProps on them. Consider this example:

      class MyButton extends React.Component { +setNativeProps on them. Consider this example:

      If you run this you will immediately see this error: Touchable child must either be native or forward setNativeProps to a native component. This occurs because MyButton isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you @@ -78,8 +81,11 @@ pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward setNativeProps to a native-backed child component.

      Forward setNativeProps to a child #

      All we need to do is provide a setNativeProps method on our component that calls setNativeProps on the appropriate child with the given -arguments.

      class MyButton extends React.Component { - setNativeProps(nativeProps) { +arguments.

      You can now use MyButton inside of TouchableOpacity! A sidenote for clarity: we used the ref callback syntax here, rather than the traditional string-based ref.

      You may have noticed that we passed all of the props down to the child view using {...this.props}. The reason for this is that TouchableOpacity is actually a composite component, and so in addition @@ -105,34 +121,32 @@ characters when the bufferDelay is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use setNativeProps to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the -input when you tap a button:

      class App extends React.Component { - constructor(props) { - super(props); - this.clearText = this.clearText.bind(this); - } +input when you tap a button:

      Avoiding conflicts with the render function #

      If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from setNativeProps will be completely -ignored and overridden. See this example -for a demonstration of what can happen if these two collide - notice -the jerky animation each 250ms when setState triggers a re-render.

      setNativeProps & shouldComponentUpdate #

      By intelligently applying +ignored and overridden.

      setNativeProps & shouldComponentUpdate #

      By intelligently applying shouldComponentUpdate you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to @@ -154,4 +168,4 @@ use setState instead of setNativeProps.

      \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/drawerlayoutandroid.html b/releases/next/docs/drawerlayoutandroid.html index 49074ccec81..c7127a93e60 100644 --- a/releases/next/docs/drawerlayoutandroid.html +++ b/releases/next/docs/drawerlayoutandroid.html @@ -1,4 +1,4 @@ -DrawerLayoutAndroid
      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      APIs

      DrawerLayoutAndroid #

      React component that wraps the platform DrawerLayout (Android only). The +DrawerLayoutAndroid

      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Apple TV)

      Guides (Android)

      components

      APIs

      DrawerLayoutAndroid #

      React component that wraps the platform DrawerLayout (Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the @@ -55,4 +55,4 @@ effect on API 21+.

      \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/easing.html b/releases/next/docs/easing.html index d776fcff53c..c5e221af14b 100644 --- a/releases/next/docs/easing.html +++ b/releases/next/docs/easing.html @@ -1,4 +1,4 @@ -Easing
      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      APIs

      Easing #

      The Easing module implements common easing functions. This module is used +Easing

      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Apple TV)

      Guides (Android)

      components

      APIs

      Easing #

      The Easing module implements common easing functions. This module is used by Animate.timing() to convey physically believable motion in animations.

      You can find a visualization of some common easing functions at http://easings.net/

      Predefined animations #

      The Easing module provides several predefined animations through the @@ -35,4 +35,4 @@ duration.

      You can < inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/flatlist.html b/releases/next/docs/flatlist.html index fe1d81639af..49982c55967 100644 --- a/releases/next/docs/flatlist.html +++ b/releases/next/docs/flatlist.html @@ -1,4 +1,4 @@ -FlatList

      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Android)

      components

      APIs

      FlatList #

      A performant interface for rendering simple, flat lists, supporting the most handy features:

      • Fully cross-platform.
      • Optional horizontal mode.
      • Configurable viewability callbacks.
      • Header support.
      • Footer support.
      • Separator support.
      • Pull to Refresh.
      • Scroll loading.
      • ScrollToIndex support.

      If you need section support, use <SectionList>.

      Minimal Example:

      <FlatList +FlatList
      React Nativenext

      The Basics

      Guides

      Guides (iOS)

      Guides (Apple TV)

      Guides (Android)

      components

      APIs

      FlatList #

      A performant interface for rendering simple, flat lists, supporting the most handy features:

      • Fully cross-platform.
      • Optional horizontal mode.
      • Configurable viewability callbacks.
      • Header support.
      • Footer support.
      • Separator support.
      • Pull to Refresh.
      • Scroll loading.
      • ScrollToIndex support.

      If you need section support, use <SectionList>.

      Minimal Example:

      <FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />

      More complex example demonstrating PureComponent usage for perf optimization and avoiding bugs.

      • By binding the onPressItem handler, the props will remain === and PureComponent will @@ -312,4 +312,4 @@ module.exports \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/flexbox.html b/releases/next/docs/flexbox.html index 0046f8c373f..2d642ea1118 100644 --- a/releases/next/docs/flexbox.html +++ b/releases/next/docs/flexbox.html @@ -1,4 +1,4 @@ -Layout with Flexbox
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Layout with Flexbox #

        A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

        You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

        Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

        Flex Direction #

        Adding flexDirection to a component's style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

        import React, { Component } from 'react'; +Layout with Flexbox
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Layout with Flexbox #

        A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

        You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

        Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

        Flex Direction #

        Adding flexDirection to a component's style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

        import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FlexDirectionBasics extends Component { @@ -76,4 +76,4 @@ AppRegistry. inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/geolocation.html b/releases/next/docs/geolocation.html index 712d553a6b2..7fbc5bf8c31 100644 --- a/releases/next/docs/geolocation.html +++ b/releases/next/docs/geolocation.html @@ -1,4 +1,4 @@ -Geolocation
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Geolocation #

        The Geolocation API extends the web spec: +Geolocation

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Geolocation #

        The Geolocation API extends the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation

        As a browser polyfill, this API is available through the navigator.geolocation global - you do not need to import it.

        iOS #

        You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation when using the app. Geolocation is @@ -100,4 +100,4 @@ class GeolocationExample extends \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/gesture-responder-system.html b/releases/next/docs/gesture-responder-system.html index 5acea2e695b..8f99b4ea0f7 100644 --- a/releases/next/docs/gesture-responder-system.html +++ b/releases/next/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -Gesture Responder System

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Gesture Responder System #

        The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

        The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.

        Best Practices #

        To make your app feel great, every action should have the following attributes:

        • Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
        • Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away

        These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

        TouchableHighlight and Touchable* #

        The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

        Responder Lifecycle #

        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:

        • View.props.onStartShouldSetResponder: (evt) => true, - Does this view want to become responder on the start of a touch?
        • View.props.onMoveShouldSetResponder: (evt) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

        If the View returns true and attempts to become the responder, one of the following will happen:

        • View.props.onResponderGrant: (evt) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
        • View.props.onResponderReject: (evt) => {} - Something else is the responder right now and will not release it

        If the view is responding, the following handlers can be called:

        • View.props.onResponderMove: (evt) => {} - The user is moving their finger
        • View.props.onResponderRelease: (evt) => {} - Fired at the end of the touch, ie "touchUp"
        • View.props.onResponderTerminationRequest: (evt) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
        • View.props.onResponderTerminate: (evt) => {} - The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

        evt is a synthetic touch event with the following form:

        • nativeEvent
          • changedTouches - Array of all touch events that have changed since the last event
          • identifier - The ID of the touch
          • locationX - The X position of the touch, relative to the element
          • locationY - The Y position of the touch, relative to the element
          • pageX - The X position of the touch, relative to the root element
          • pageY - The Y position of the touch, relative to the root element
          • target - The node id of the element receiving the touch event
          • timestamp - A time identifier for the touch, useful for velocity calculation
          • touches - Array of all current touches on the screen

        Capture ShouldSet Handlers #

        onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

        However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

        • View.props.onStartShouldSetResponderCapture: (evt) => true,
        • View.props.onMoveShouldSetResponderCapture: (evt) => true,

        PanResponder #

        For higher-level gesture interpretation, check out PanResponder.

        ← PrevNext →

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

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Gesture Responder System #

        The gesture responder system manages the lifecycle of gestures in your app. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

        The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.

        Best Practices #

        To make your app feel great, every action should have the following attributes:

        • Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
        • Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away

        These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

        TouchableHighlight and Touchable* #

        The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

        Responder Lifecycle #

        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:

        • View.props.onStartShouldSetResponder: (evt) => true, - Does this view want to become responder on the start of a touch?
        • View.props.onMoveShouldSetResponder: (evt) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

        If the View returns true and attempts to become the responder, one of the following will happen:

        • View.props.onResponderGrant: (evt) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
        • View.props.onResponderReject: (evt) => {} - Something else is the responder right now and will not release it

        If the view is responding, the following handlers can be called:

        • View.props.onResponderMove: (evt) => {} - The user is moving their finger
        • View.props.onResponderRelease: (evt) => {} - Fired at the end of the touch, ie "touchUp"
        • View.props.onResponderTerminationRequest: (evt) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
        • View.props.onResponderTerminate: (evt) => {} - The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

        evt is a synthetic touch event with the following form:

        • nativeEvent
          • changedTouches - Array of all touch events that have changed since the last event
          • identifier - The ID of the touch
          • locationX - The X position of the touch, relative to the element
          • locationY - The Y position of the touch, relative to the element
          • pageX - The X position of the touch, relative to the root element
          • pageY - The Y position of the touch, relative to the root element
          • target - The node id of the element receiving the touch event
          • timestamp - A time identifier for the touch, useful for velocity calculation
          • touches - Array of all current touches on the screen

        Capture ShouldSet Handlers #

        onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

        However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

        • View.props.onStartShouldSetResponderCapture: (evt) => true,
        • View.props.onMoveShouldSetResponderCapture: (evt) => true,

        PanResponder #

        For higher-level gesture interpretation, check out PanResponder.

        ← PrevNext →

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

        \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/getting-started.html b/releases/next/docs/getting-started.html index eb850f27ee5..a5f0006febb 100644 --- a/releases/next/docs/getting-started.html +++ b/releases/next/docs/getting-started.html @@ -1,4 +1,4 @@ -Getting Started
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Getting Started #

        Welcome to React Native! This page will help you install React Native on +Getting Started

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Getting Started #

        Welcome to React Native! This page will help you install React Native on your system, so that you can build apps with it right away. If you already have React Native installed, you can skip ahead to the Tutorial.

        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 @@ -237,4 +237,4 @@ if (!foundHash) { inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/handling-text-input.html b/releases/next/docs/handling-text-input.html index 6380f81ca6f..4f741823e1b 100644 --- a/releases/next/docs/handling-text-input.html +++ b/releases/next/docs/handling-text-input.html @@ -1,4 +1,4 @@ -Handling Text Input

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Handling Text Input #

        TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes +Handling Text Input

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Handling Text Input #

        TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

        For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕".

        import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; @@ -43,4 +43,4 @@ AppRegistry. inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/handling-touches.html b/releases/next/docs/handling-touches.html index cb6a7f919fa..ba528dc4646 100644 --- a/releases/next/docs/handling-touches.html +++ b/releases/next/docs/handling-touches.html @@ -1,4 +1,4 @@ -Handling Touches
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Handling Touches #

        Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.

        React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition.

        Tappable Components #

        You can use "Touchable" components when you want to capture a tapping gesture. They take a function through the onPress props which will be called when the touch begins and ends within the bounds of the component.

        Example:

        class MyButton extends Component { +Handling Touches
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Handling Touches #

        Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.

        React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition.

        Tappable Components #

        You can use "Touchable" components when you want to capture a tapping gesture. They take a function through the onPress props which will be called when the touch begins and ends within the bounds of the component.

        Example:

        class MyButton extends Component { _onPressButton() { console.log("You tapped the button!"); } @@ -28,4 +28,4 @@ inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/headless-js-android.html b/releases/next/docs/headless-js-android.html index 7b48746030d..a61768faaa8 100644 --- a/releases/next/docs/headless-js-android.html +++ b/releases/next/docs/headless-js-android.html @@ -1,4 +1,4 @@ -Headless JS
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Headless JS #

        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.

        The JS API #

        A task is a simple async function that you register on AppRegistry, similar to registering React applications:

        AppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));

        Then, in SomeTaskName.js:

        module.exports = async (taskData) => { +Headless JS
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Headless JS #

        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.

        The JS API #

        A task is a simple async function that you register on AppRegistry, similar to registering React applications:

        AppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));

        Then, in SomeTaskName.js:

        module.exports = async (taskData) => { // do stuff }

        You can do anything in your task as long as it doesn't touch UI: network requests, timers and so on. Once your task completes (i.e. the promise is resolved), React Native will go into "paused" mode (unless there are other tasks running, or there is a foreground app).

        The Java API #

        Yes, this does still require some native code, but it's pretty thin. You need to extend HeadlessJsTaskService and override getTaskConfig, e.g.:

        public class MyTaskService extends HeadlessJsTaskService { @@ -31,4 +31,4 @@ inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/height-and-width.html b/releases/next/docs/height-and-width.html index e83e0f8e4c4..28ab47cdb80 100644 --- a/releases/next/docs/height-and-width.html +++ b/releases/next/docs/height-and-width.html @@ -1,4 +1,4 @@ -Height and Width
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Height and Width #

        A component's height and width determine its size on the screen.

        Fixed Dimensions #

        The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

        import React, { Component } from 'react'; +Height and Width
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Height and Width #

        A component's height and width determine its size on the screen.

        Fixed Dimensions #

        The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

        import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { @@ -49,4 +49,4 @@ AppRegistry. inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/image.html b/releases/next/docs/image.html index fae90574c2e..38326cf51cc 100644 --- a/releases/next/docs/image.html +++ b/releases/next/docs/image.html @@ -1,4 +1,4 @@ -Image
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Image #

        A React component for displaying different types of images, +Image

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Image #

        A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.

        This example shows both fetching and displaying an image from local storage as well as one from network.

        import React, { Component } from 'react'; @@ -886,4 +886,4 @@ exports.examples \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/imageeditor.html b/releases/next/docs/imageeditor.html index cf4ebf51e33..b7c05ab57ee 100644 --- a/releases/next/docs/imageeditor.html +++ b/releases/next/docs/imageeditor.html @@ -1,4 +1,4 @@ -ImageEditor
        React Nativenext

        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 Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        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 @@ -21,4 +21,4 @@ cropped image from the ImageStore when you are done with it.

        \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/imagepickerios.html b/releases/next/docs/imagepickerios.html index 02bcfe6cd84..0661f7d8eb4 100644 --- a/releases/next/docs/imagepickerios.html +++ b/releases/next/docs/imagepickerios.html @@ -1,4 +1,4 @@ -ImagePickerIOS
        React Nativenext

        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 →
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        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 →
        \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/images.html b/releases/next/docs/images.html index 1aaf3648364..31675a7b71c 100644 --- a/releases/next/docs/images.html +++ b/releases/next/docs/images.html @@ -1,4 +1,4 @@ -Images
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Images #

        Static Image Resources #

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

        <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 correct file for the platform.

        You can also use the @2x and @3x suffixes to provide images for different screen densities. If you have the following file structure:

        . +Images
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Images #

        Static Image Resources #

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

        <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 correct file for the platform.

        You can also use the @2x and @3x suffixes to provide images for different screen densities. If you have the following file structure:

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

        < inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/imagestore.html b/releases/next/docs/imagestore.html index b6f379db3e5..1890755f152 100644 --- a/releases/next/docs/imagestore.html +++ b/releases/next/docs/imagestore.html @@ -1,4 +1,4 @@ -ImageStore
        React Nativenext

        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 Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        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 @@ -34,4 +34,4 @@ base64 data.

        You ca inputSelector: '#algolia-doc-search', algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 } }); - \ No newline at end of file + \ No newline at end of file diff --git a/releases/next/docs/integration-with-existing-apps.html b/releases/next/docs/integration-with-existing-apps.html index 9a3694323ab..62ea19ade30 100644 --- a/releases/next/docs/integration-with-existing-apps.html +++ b/releases/next/docs/integration-with-existing-apps.html @@ -1,4 +1,4 @@ -Integration With Existing Apps

        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Android)

        components

        APIs

        Integration With Existing Apps #

        +Integration With Existing Apps
        React Nativenext

        The Basics

        Guides

        Guides (iOS)

        Guides (Apple TV)

        Guides (Android)

        components

        APIs

        Integration With Existing Apps #