diff --git a/docs/accessibility.html b/docs/accessibility.html index 5730565021b..2a52e21c26d 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -1,45 +1,45 @@ -Accessibility
React Native0.45

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}> - <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}> - <View style={styles.button}> - <Text style={styles.buttonText}>Press me!</Text> - </View> -</TouchableOpacity>

In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

accessibilityTraits (iOS) #

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by accessibilityTraits.

To use, set the accessibilityTraits property to one of (or an array of) accessibility trait strings:

  • none Used when the element has no traits.
  • button Used when the element should be treated as a button.
  • link Used when the element should be treated as a link.
  • header Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
  • search Used when the text field element should also be treated as a search field.
  • image Used when the element should be treated as an image. Can be combined with button or link, for example.
  • selected Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
  • plays Used when the element plays its own sound when activated.
  • key Used when the element acts as a keyboard key.
  • text Used when the element should be treated as static text that cannot change.
  • summary Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
  • disabled Used when the control is not enabled and does not respond to user input.
  • frequentUpdates Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
  • startsMedia Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
  • adjustable Used when an element can be "adjusted" (e.g. a slider).
  • allowsDirectInteraction Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
  • pageTurn Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

accessibilityViewIsModal (iOS) #

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.

For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. -On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.

onAccessibilityTap (iOS) #

Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.

onMagicTap (iOS) #

Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.

accessibilityComponentType (Android) #

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.

<TouchableWithoutFeedback accessibilityComponentType=”button” +Accessibility
React Native0.46

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}> + <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}> + <View style={styles.button}> + <Text style={styles.buttonText}>Press me!</Text> + </View> +</TouchableOpacity>

In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

accessibilityTraits (iOS) #

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by accessibilityTraits.

To use, set the accessibilityTraits property to one of (or an array of) accessibility trait strings:

  • none Used when the element has no traits.
  • button Used when the element should be treated as a button.
  • link Used when the element should be treated as a link.
  • header Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
  • search Used when the text field element should also be treated as a search field.
  • image Used when the element should be treated as an image. Can be combined with button or link, for example.
  • selected Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
  • plays Used when the element plays its own sound when activated.
  • key Used when the element acts as a keyboard key.
  • text Used when the element should be treated as static text that cannot change.
  • summary Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
  • disabled Used when the control is not enabled and does not respond to user input.
  • frequentUpdates Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
  • startsMedia Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
  • adjustable Used when an element can be "adjusted" (e.g. a slider).
  • allowsDirectInteraction Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
  • pageTurn Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

accessibilityViewIsModal (iOS) #

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.

For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. +On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.

onAccessibilityTap (iOS) #

Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.

onMagicTap (iOS) #

Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.

accessibilityComponentType (Android) #

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.

<TouchableWithoutFeedback accessibilityComponentType=”button” onPress={this._onPress}> - <View style={styles.button}> - <Text style={styles.buttonText}>Press me!</Text> - </View> -</TouchableWithoutFeedback>

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

accessibilityLiveRegion (Android) #

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:

  • none Accessibility services should not announce changes to this view.
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedback onPress={this._addOne}> - <View style={styles.embedded}> - <Text>Click me</Text> - </View> -</TouchableWithoutFeedback> -<Text accessibilityLiveRegion="polite"> + <View style={styles.button}> + <Text style={styles.buttonText}>Press me!</Text> + </View> +</TouchableWithoutFeedback>

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

accessibilityLiveRegion (Android) #

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:

  • none Accessibility services should not announce changes to this view.
  • polite Accessibility services should announce changes to this view.
  • assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedback onPress={this._addOne}> + <View style={styles.embedded}> + <Text>Click me</Text> + </View> +</TouchableWithoutFeedback> +<Text accessibilityLiveRegion="polite"> Clicked {this.state.count} times -</Text>

In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

importantForAccessibility (Android) #

In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

<View style={styles.container}> - <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100, +</Text>

In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.

importantForAccessibility (Android) #

In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

<View style={styles.container}> + <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100, backgroundColor: 'green'}} importantForAccessibility=”yes”> - <Text> First layout </Text> - </View> - <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100, + <Text> First layout </Text> + </View> + <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100, backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”> - <Text> Second layout </Text> - </View> -</View>

In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.

Checking if a Screen Reader is Enabled #

The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.

Sending Accessibility Events (Android) #

Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.

_onPress: function() { + <Text> Second layout </Text> + </View> +</View>

In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.

Checking if a Screen Reader is Enabled #

The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.

Sending Accessibility Events (Android) #

Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.

_onPress: function() { this.state.radioButton = this.state.radioButton === “radiobutton_checked” ? “radiobutton_unchecked” : “radiobutton_checked”; if (this.state.radioButton === “radiobutton_checked”) { - RCTUIManager.sendAccessibilityEvent( - ReactNative.findNodeHandle(this), + RCTUIManager.sendAccessibilityEvent( + ReactNative.findNodeHandle(this), RCTUIManager.AccessibilityEventTypes.typeViewClicked); } } -<CustomRadioButton +<CustomRadioButton accessibleComponentType={this.state.radioButton} - onPress={this._onPress}/>

In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.

Testing VoiceOver Support (iOS) #

To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.

To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.

At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.

← PrevNext →

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

\ No newline at end of file diff --git a/docs/accessibilityinfo.html b/docs/accessibilityinfo.html index 245564af7cb..2d5534c379d 100644 --- a/docs/accessibilityinfo.html +++ b/docs/accessibilityinfo.html @@ -1,49 +1,51 @@ -AccessibilityInfo
React Native0.45

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

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 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 { +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 = { screenReaderEnabled: false, } - componentDidMount() { - AccessibilityInfo.addEventListener( + componentDidMount() { + AccessibilityInfo.addEventListener( 'change', this._handleScreenReaderToggled ); - AccessibilityInfo.fetch().done((isEnabled) => { - this.setState({ + AccessibilityInfo.fetch().done((isEnabled) => { + this.setState({ screenReaderEnabled: isEnabled }); }); } - componentWillUnmount() { - AccessibilityInfo.removeEventListener( + componentWillUnmount() { + AccessibilityInfo.removeEventListener( 'change', this._handleScreenReaderToggled ); } - _handleScreenReaderToggled = (isEnabled) => { - this.setState({ + _handleScreenReaderToggled = (isEnabled) => { + this.setState({ screenReaderEnabled: isEnabled, }); } - render() { + render() { return ( - <View> - <Text> + <View> + <Text> The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - </Text> - </View> + </Text> + </View> ); } }

Methods #

static fetch() #

Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is true when a screen reader is enabled and false otherwise.

static addEventListener(eventName, handler) #

Add an event handler. Supported events:

  • change: Fires when the state of the screen reader changes. The argument to the event handler is a boolean. The boolean is true when a screen -reader is enabled and false otherwise.

static removeEventListener(eventName, handler) #

Remove an event handler.

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

← PrevNext →
\ No newline at end of file diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 0af9994ba7d..792eb16224e 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS
React Native0.45

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

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

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

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

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

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

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

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

apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.45" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.46" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/activityindicator.html b/docs/activityindicator.html index b6f455fa2d1..cde39dce6b1 100644 --- a/docs/activityindicator.html +++ b/docs/activityindicator.html @@ -1,8 +1,5 @@ -ActivityIndicator
React Native0.45

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Props #

ViewPropTypes props... #

animating?: PropTypes.bool #

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

color?: color #

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

size?: PropTypes.oneOfType([ - PropTypes.oneOf([ 'small', 'large' ]), - PropTypes.number, -]) #

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

ioshidesWhenStopped?: PropTypes.bool #

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

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

Next →
React Native0.46

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'). +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!

Next →
\ No newline at end of file diff --git a/docs/adsupportios.html b/docs/adsupportios.html index fc1ba0a0bc2..377607e0a34 100644 --- a/docs/adsupportios.html +++ b/docs/adsupportios.html @@ -1,4 +1,4 @@ -AdSupportIOS
React Native0.45

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AdSupportIOS #

AdSupport provides access to the "advertising identifier". If you link this library +AdSupportIOS

React Native0.46

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AdSupportIOS #

AdSupport provides access to the "advertising identifier". If you link this library in your project, you may need to justify your use for this identifier when submitting your application to the App Store.

In order to use AdSupport in your project, you must link the RCTAdSupport library. In Xcode, you can manually add the RCTAdSupport.m and RCTAdSupport.h files from @@ -19,6 +19,6 @@ of your current project.

You can refer to \ No newline at end of file diff --git a/docs/alert.html b/docs/alert.html index 9e0d4ba6982..5cf205d20f5 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -1,4 +1,4 @@ -Alert

React Native0.45

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

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Alert #

Launches an alert dialog with the specified title and message.

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

This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, @@ -9,13 +9,13 @@ box. This event can be handled by providing an optional options par with an onDismiss callback property { onDismiss: () => {} }.

Alternatively, the dismissing behavior can be disabled altogether by providing an optional options parameter with the cancelable property set to false i.e. { cancelable: false }

Example usage:

// Works on both iOS and Android -Alert.alert( +Alert.alert( 'Alert Title', 'My Alert Msg', [ - {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, - {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, - {text: 'OK', onPress: () => console.log('OK Pressed')}, + {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: () => console.log('OK Pressed')}, ], { cancelable: false } )

Methods #

static alert(title, message?, buttons?, options?, type?) #

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

← PrevNext →
\ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index cf89f43450f..a928587005f 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,23 +1,23 @@ -AlertIOS
React Native0.45

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AlertIOS #

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

Creating an iOS alert:

AlertIOS.alert( +AlertIOS
React Native0.46

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AlertIOS #

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

Creating an iOS alert:

AlertIOS.alert( 'Sync Complete', 'All your data are belong to us.' -);

Creating an iOS prompt:

AlertIOS.prompt( +);

Creating an iOS prompt:

AlertIOS.prompt( 'Enter a value', null, - text => console.log("You entered "+text) + text => console.log("You entered "+text) );

We recommend using the Alert.alert method for cross-platform support if you don't need to create iOS-only prompts.

Methods #

static alert(title: string, message?: string, callbackOrButtons?: ?(() => void), ButtonsArray, type?: AlertType) #

Create and display a popup alert.

Parameters:
Name and TypeDescription
title

string

The dialog's title.

[message]

string

An optional message that appears below the dialog's title.

[callbackOrButtons]

?(() => void) | ButtonsArray

This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'.

If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys. style - should be one of 'default', 'cancel' or 'destructive'.

[type]

Deprecated, do not use.


Example with custom buttons:
AlertIOS.alert( + should be one of 'default', 'cancel' or 'destructive'.

[type]

Deprecated, do not use.


Example with custom buttons:
AlertIOS.alert( 'Update available', 'Keep your app up to date to enjoy the latest features', [ - {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, - {text: 'Install', onPress: () => console.log('Install Pressed')}, + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'Install', onPress: () => console.log('Install Pressed')}, ], );

static prompt(title: string, message?: string, callbackOrButtons?: ?((text: string) => void), ButtonsArray, type?: AlertType, defaultValue?: string, keyboardType?: string) #

Create and display a prompt to enter some text.

Parameters:
Name and TypeDescription
title

string

The dialog's title.

[message]

string

An optional message that appears above the text input.

[callbackOrButtons]

?((text: string) => void) | ButtonsArray

This optional argument should @@ -29,18 +29,18 @@ cross-platform support if you don't need to create iOS-only prompts.

[defaultValue]

string

The default text in text input.

[keyboardType]

string

The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', - 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.


Example with custom buttons:
AlertIOS.prompt( + 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.


Example with custom buttons:
AlertIOS.prompt( 'Enter password', 'Enter your password to claim your $1.5B in lottery winnings', [ - {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, - {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, ], 'secure-text' -);

Example with the default button and a custom callback:
AlertIOS.prompt( +);

Example with the default button and a custom callback:
AlertIOS.prompt( 'Update username', null, - text => console.log("Your username is "+text), + text => console.log("Your username is "+text), null, 'default' );

Type Definitions #

AlertType #

An Alert button type

Type:
$Enum

Constants:
ValueDescription
default

Default alert with no inputs

plain-text

Plain text input alert

secure-text

Secure text input alert

login-password

Login and password alert

AlertButtonStyle #

An Alert button style

Type:
$Enum

Constants:
ValueDescription
default

Default button style

cancel

Cancel button style

destructive

Destructive button style

ButtonsArray #

Array or buttons

Type:
Array

Properties:
Name and TypeDescription
[text]

string

Button label

[onPress]

function

Callback function when button pressed

[style]

Button style


Constants:
ValueDescription
text

Button label

onPress

Callback function when button pressed

style

Button style

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

← PrevNext →
\ No newline at end of file diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index 3e770f075d7..48bff71f1a2 100644 --- a/docs/android-building-from-source.html +++ b/docs/android-building-from-source.html @@ -1,6 +1,6 @@ -Building React Native from source
React Native0.45

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

... +Building React Native from source
React Native0.46

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 +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 { classpath 'com.android.tools.build:gradle:1.3.1' classpath 'de.undercouch:gradle-download-task:3.1.2' @@ -8,23 +8,23 @@ ndk.dir= // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } -...

3. Adding the :ReactAndroid project #

Add the :ReactAndroid project in android/settings.gradle:

... +...

3. Adding the :ReactAndroid project #

Add the :ReactAndroid project in android/settings.gradle:

... include ':ReactAndroid' -project(':ReactAndroid').projectDir = new File( +project(':ReactAndroid').projectDir = new File( rootProject.projectDir, '../node_modules/react-native/ReactAndroid') -...

Modify your android/app/build.gradle to use the :ReactAndroid project instead of the pre-compiled library, e.g. - replace compile 'com.facebook.react:react-native:+' with compile project(':ReactAndroid'):

... +...

Modify your android/app/build.gradle to use the :ReactAndroid project instead of the pre-compiled library, e.g. - replace compile 'com.facebook.react:react-native:+' with compile project(':ReactAndroid'):

... dependencies { - compile fileTree(dir: 'libs', include: ['*.jar']) + compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' - compile project(':ReactAndroid') + compile project(':ReactAndroid') - ... + ... } -...

4. Making 3rd-party modules use your fork #

If you use 3rd-party React Native modules, you need to override their dependencies so that they don't bundle the pre-compiled library. Otherwise you'll get an error while compiling - Error: more than one library with package name 'com.facebook.react'.

Modify your android/app/build.gradle, and add:

configurations.all { +...

4. Making 3rd-party modules use your fork #

If you use 3rd-party React Native modules, you need to override their dependencies so that they don't bundle the pre-compiled library. Otherwise you'll get an error while compiling - Error: more than one library with package name 'com.facebook.react'.

Modify your android/app/build.gradle, and add:

configurations.all { exclude group: 'com.facebook.react', module: 'react-native' -}

Building from Android Studio #

From the Welcome screen of Android Studio choose "Import project" and select the android folder of your app.

You should be able to use the Run button to run your app on a device. Android Studio won't start the packager automatically, you'll need to start it by running npm start on the command line.

Additional notes #

Building from source can take a long time, especially for the first build, as it needs to download ~200 MB of artifacts and compile the native code. Every time you update the react-native version from your repo, the build directory may get deleted, and all the files are re-downloaded. To avoid this, you might want to change your build directory path by editing the ~/.gradle/init.gradle file:

gradle.projectsLoaded { +}

Building from Android Studio #

From the Welcome screen of Android Studio choose "Import project" and select the android folder of your app.

You should be able to use the Run button to run your app on a device. Android Studio won't start the packager automatically, you'll need to start it by running npm start on the command line.

Additional notes #

Building from source can take a long time, especially for the first build, as it needs to download ~200 MB of artifacts and compile the native code. Every time you update the react-native version from your repo, the build directory may get deleted, and all the files are re-downloaded. To avoid this, you might want to change your build directory path by editing the ~/.gradle/init.gradle file:

gradle.projectsLoaded { rootProject.allprojects { buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}" } @@ -44,6 +44,6 @@ dependencies { apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.45" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.46" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index 0e9f8f41520..d6a2f1ba0f1 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -1,14 +1,14 @@ -Animated
React Native0.45

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Animated #

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

React Native0.46

The Basics

Guides

Guides (iOS)

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 Animated.Value, hook it up to one or more style attributes of an animated -component, and then drive updates via animations using Animated.timing():

Animated.timing( // Animate value over time +component, and then drive updates via animations using Animated.timing():

Animated.timing( // Animate value over time this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 } -).start(); // Start the animation

Refer to the Animations guide to see +).start(); // Start the animation

Refer to the Animations guide to see additional examples of Animated in action.

Overview #

There are two value types you can use with Animated:

Animated.Value can bind to style properties or other props, and can be interpolated as well. A single Animated.Value can drive any number of properties.

Configuring animations #

Animated provides three types of animation types. Each animation type @@ -55,7 +55,7 @@ syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.

For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to -scrollX (an Animated.Value):

onScroll={Animated.event( +scrollX (an Animated.Value):

onScroll={Animated.event( // scrollX = e.nativeEvent.contentOffset.x [{ nativeEvent: { contentOffset: { @@ -69,7 +69,8 @@ coefficient.

Config is an object that may have the following options:

< can use your own function.

Config is an object that may have the following options:

  • duration: Length of animation (milliseconds). Default 500.
  • easing: Easing function to define curve. Default is Easing.inOut(Easing.ease).
  • delay: Start the animation after delay (milliseconds). Default 0.
  • useNativeDriver: Uses the native driver when true. Default false.

static spring(value, config) #

Spring animation based on Rebound and Origami. Tracks velocity state to -create fluid motions as the toValue updates, and can be chained together.

Config is an object that may have the following options:

  • friction: Controls "bounciness"/overshoot. Default 7.
  • tension: Controls speed. Default 40.
  • useNativeDriver: Uses the native driver when true. Default false.

static add(a, b) #

Creates a new Animated value composed from two Animated values added +create fluid motions as the toValue updates, and can be chained together.

Config is an object that may have the following options. Note that you can +only define bounciness/speed or tension/friction but not both:

  • friction: Controls "bounciness"/overshoot. Default 7.
  • tension: Controls speed. Default 40.
  • speed: Controls speed of the animation. Default 12.
  • bounciness: Controls bounciness. Default 8.
  • useNativeDriver: Uses the native driver when true. Default false.

static add(a, b) #

Creates a new Animated value composed from two Animated values added together.

static divide(a, b) #

Creates a new Animated value composed by dividing the first Animated value by the second Animated value.

static multiply(a, b) #

Creates a new Animated value composed from two Animated values multiplied together.

static modulo(a, modulus) #

Creates a new Animated value that is the (non-negative) modulo of the @@ -86,12 +87,12 @@ sequence with successive delays. Nice for doing trailing effects.

static event(argMapping, config?) #

Takes an array of mappings and extracts values from each arg accordingly, -then calls setValue on the mapped outputs. e.g.

onScroll={Animated.event( +then calls setValue on the mapped outputs. e.g.

onScroll={Animated.event( [{nativeEvent: {contentOffset: {x: this._scrollX}}}] {listener}, // Optional async listener ) - ... - onPanResponderMove: Animated.event([ + ... + onPanResponderMove: Animated.event([ null, // raw event arg ignored {dx: this._panX}, // gestureState arg ]),

Config is an object that may have the following options:

  • listener: Optional async listener.
  • useNativeDriver: Uses the native driver when true. Default false.

static createAnimatedComponent(Component) #

Make any React component Animatable. Used to create Animated.View, etc.

static attachNativeEvent(viewRef, eventName, argMapping) #

Imperative API to attach an animated value to an event on a view. Prefer using @@ -113,37 +114,37 @@ state to match the animation position with layout.

animate(animation, callback) #

Typically only used internally, but could be used by a custom Animation class.

stopTracking() #

Typically only used internally.

track(tracking) #

Typically only used internally.

class AnimatedValueXY #

    2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular -Animated.Values under the hood.

    Example #

    class DraggableView extends React.Component { - constructor(props) { - super(props); +Animated.Values under the hood.

    Example #

    class DraggableView extends React.Component { + constructor(props) { + super(props); this.state = { pan: new Animated.ValueXY(), // inits to zero }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([null, { + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { dx: this.state.pan.x, // x,y are Animated.Value dy: this.state.pan.y, }]), - onPanResponderRelease: () => { - Animated.spring( + onPanResponderRelease: () => { + Animated.spring( this.state.pan, // Auto-multiplexed {toValue: {x: 0, y: 0}} // Back to zero - ).start(); + ).start(); }, }); } - render() { + render() { return ( - <Animated.View - {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> + <Animated.View + {...this.state.panResponder.panHandlers} + style={this.state.pan.getLayout()}> {this.props.children} - </Animated.View> + </Animated.View> ); } - }

    Methods #

    constructor(valueIn?) #

    setValue(value) #

    setOffset(offset) #

    flattenOffset() #

    extractOffset() #

    resetAnimation(callback?) #

    stopAnimation(callback?) #

    addListener(callback) #

    removeListener(id) #

    removeAllListeners() #

    getLayout() #

    Converts {x, y} into {left, top} for use in style, e.g.

    style={this.state.anim.getLayout()}

    getTranslateTransform() #

    Converts {x, y} into a useable translation transform, e.g.

    style={{ - transform: this.state.anim.getTranslateTransform() + }

    Methods #

    constructor(valueIn?) #

    setValue(value) #

    setOffset(offset) #

    flattenOffset() #

    extractOffset() #

    resetAnimation(callback?) #

    stopAnimation(callback?) #

    addListener(callback) #

    removeListener(id) #

    removeAllListeners() #

    getLayout() #

    Converts {x, y} into {left, top} for use in style, e.g.

    style={this.state.anim.getLayout()}

    getTranslateTransform() #

    Converts {x, y} into a useable translation transform, e.g.

    style={{ + transform: this.state.anim.getTranslateTransform() }}

class AnimatedInterpolation #

    Methods #

    constructor(parent, config) #

    interpolate(config) #

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

← PrevNext →
\ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index a1ccd9595d8..9b729ded823 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,52 +1,52 @@ -Animations
React Native0.45

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Animations #

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

React Native0.46

The Basics

Guides

Guides (iOS)

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: