diff --git a/releases/next/css/react-native.css b/releases/next/css/react-native.css index 6c20eedfb86..5baf207f2e1 100644 --- a/releases/next/css/react-native.css +++ b/releases/next/css/react-native.css @@ -1362,6 +1362,7 @@ div[data-twttr-id] iframe { padding: 3px 10px; } .propType { + font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace; font-weight: normal; font-size: 15px; white-space: pre-wrap; } diff --git a/releases/next/docs/accessibilityinfo.html b/releases/next/docs/accessibilityinfo.html index 0ba486d0645..71b71a013fe 100644 --- a/releases/next/docs/accessibilityinfo.html +++ b/releases/next/docs/accessibilityinfo.html @@ -39,7 +39,7 @@ screen reader as well as to register to be notified when the state of the screen </View> ); } -}

Methods #

static fetch(0) #

Query whether a screen reader is currently enabled. Returns a promise which +}

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 diff --git a/releases/next/docs/activityindicator.html b/releases/next/docs/activityindicator.html index 8dcb3e47f3c..068e25e81c3 100644 --- a/releases/next/docs/activityindicator.html +++ b/releases/next/docs/activityindicator.html @@ -1,5 +1,5 @@ -ActivityIndicator
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ActivityIndicator #

    Displays a circular loading indicator.

    Props #

    View 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'; +ActivityIndicator
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ActivityIndicator #

    Displays a circular loading indicator.

    Props #

    View props... #

    animating?: bool #

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

    color?: [object Object] #

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

    size?: [object Object], [object Object] #

    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'; import { ActivityIndicator, StyleSheet, View } from 'react-native'; diff --git a/releases/next/docs/alertios.html b/releases/next/docs/alertios.html index ed8d6d48474..085a3b13381 100644 --- a/releases/next/docs/alertios.html +++ b/releases/next/docs/alertios.html @@ -7,7 +7,7 @@ message or create a prompt for user input.

    Creating an iOS alert:

    null, 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, message?, callbackOrButtons?, type?) #

    Create and display a popup alert.

    Parameters:
    Name and TypeDescription
    title

    string

    The dialog's title.

    [message]

    string

    An optional message that appears below +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 @@ -19,7 +19,7 @@ cross-platform support if you don't need to create iOS-only prompts.

    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'Install', onPress: () => console.log('Install Pressed')}, ], -);

    static prompt(title, message?, callbackOrButtons?, type?, defaultValue?, keyboardType?) #

    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 +);

    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 be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user diff --git a/releases/next/docs/animated.html b/releases/next/docs/animated.html index a9d96d300a0..d969957736a 100644 --- a/releases/next/docs/animated.html +++ b/releases/next/docs/animated.html @@ -91,22 +91,22 @@ then calls setValue on the mapped outputs. e.g.

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

    Properties #

    Value: AnimatedValue #

    Standard value class for driving animations. Typically initialized with -new Animated.Value(0);

    See also AnimatedValue.

    ValueXY: AnimatedValueXY #

    2D value class for driving 2D animations, such as pan gestures.

    See also AnimatedValueXY.

    Interpolation: AnimatedInterpolation #

    exported to use the Interpolation type in flow

    See also AnimatedInterpolation.

    class AnimatedValue #

      Standard value for driving animations. One Animated.Value can drive + ]),

      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.

    Properties #

    Value: [object Object] #

    Standard value class for driving animations. Typically initialized with +new Animated.Value(0);

    See also AnimatedValue.

    ValueXY: [object Object] #

    2D value class for driving 2D animations, such as pan gestures.

    See also AnimatedValueXY.

    Interpolation: [object Object] #

    exported to use the Interpolation type in flow

    See also AnimatedInterpolation.

    class AnimatedValue #

      Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones.

      Methods #

      constructor(value) #

      setValue(value) #

      Directly set the value. This will stop any animations running on the value and update all the bound properties.

      setOffset(offset) #

      Sets an offset that is applied on top of whatever value is set, whether via setValue, an animation, or Animated.event. Useful for compensating -things like the start of a pan gesture.

      flattenOffset(0) #

      Merges the offset value into the base value and resets the offset to zero. -The final output of the value is unchanged.

      extractOffset(0) #

      Sets the offset value to the base value, and resets the base value to zero. +things like the start of a pan gesture.

      flattenOffset() #

      Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged.

      extractOffset() #

      Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.

      addListener(callback) #

      Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to -synchronously read the value because it might be driven natively.

      removeListener(id) #

      removeAllListeners(0) #

      stopAnimation(callback?) #

      Stops any running animation or tracking. callback is invoked with the +synchronously read the value because it might be driven natively.

      removeListener(id) #

      removeAllListeners() #

      stopAnimation(callback?) #

      Stops any running animation or tracking. callback is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.

      interpolate(config) #

      Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10.

      animate(animation, callback) #

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

      stopTracking(0) #

      Typically only used internally.

      track(tracking) #

      Typically only used internally.

    class AnimatedValueXY #

      2D Value for driving 2D animations, such as pan gestures. Almost identical +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) { @@ -137,7 +137,7 @@ API to normal Animated.Value, but multiplexed. Contains two regula </Animated.View> ); } - }

      Methods #

      constructor(valueIn?) #

      setValue(value) #

      setOffset(offset) #

      flattenOffset(0) #

      extractOffset(0) #

      stopAnimation(callback?) #

      addListener(callback) #

      removeListener(id) #

      removeAllListeners(0) #

      getLayout(0) #

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

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

      getTranslateTransform(0) #

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

      style={{ + }

      Methods #

      constructor(valueIn?) #

      setValue(value) #

      setOffset(offset) #

      flattenOffset() #

      extractOffset() #

      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!

    Examples #

    		Edit on GitHub
    'use strict'; diff --git a/releases/next/docs/appregistry.html b/releases/next/docs/appregistry.html index 6d386c0ef7c..6f3c703e609 100644 --- a/releases/next/docs/appregistry.html +++ b/releases/next/docs/appregistry.html @@ -6,7 +6,7 @@ for the app and then actually run the app when it's ready by invoking AppRegistry.unmountApplicationComponentAtRootTag with the tag that was passed into runApplication. These should always be used as a pair.

    AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are -required.

    Methods #

    static registerConfig(config) #

    static registerComponent(appKey, component, section?) #

    static registerRunnable(appKey, run) #

    static registerSection(appKey, component) #

    static getAppKeys(0) #

    static getSectionKeys(0) #

    static getSections(0) #

    static getRunnable(appKey) #

    static getRegistry(0) #

    static runApplication(appKey, appParameters) #

    static unmountApplicationComponentAtRootTag(rootTag) #

    static registerHeadlessTask(taskKey, task) #

    Register a headless task. A headless task is a bit of code that runs without a UI. +required.

    Methods #

    static registerConfig(config) #

    static registerComponent(appKey, component, section?) #

    static registerRunnable(appKey, run) #

    static registerSection(appKey, component) #

    static getAppKeys() #

    static getSectionKeys() #

    static getSections() #

    static getRunnable(appKey) #

    static getRegistry() #

    static runApplication(appKey, appParameters) #

    static unmountApplicationComponentAtRootTag(rootTag) #

    static registerHeadlessTask(taskKey, task) #

    Register a headless task. A headless task is a bit of code that runs without a UI. @param taskKey the key associated with this task @param task a promise returning function that takes some data passed from the native side as the only argument; when the promise is resolved or rejected the native side is diff --git a/releases/next/docs/appstate.html b/releases/next/docs/appstate.html index 3272df48f77..85d3d69b429 100644 --- a/releases/next/docs/appstate.html +++ b/releases/next/docs/appstate.html @@ -38,7 +38,7 @@ class AppStateExample extends }

    This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active state, and the null -state will happen only momentarily.

    Methods #

    constructor(0) #

    addEventListener(type, handler) #

    Add a handler to AppState changes by listening to the change event type +state will happen only momentarily.

    Methods #

    constructor() #

    addEventListener(type, handler) #

    Add a handler to AppState changes by listening to the change event type and providing the handler

    TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate addEventListener and removeEventListener and just use addListener and listener.remove() directly. That will be a breaking change though, as both diff --git a/releases/next/docs/asyncstorage.html b/releases/next/docs/asyncstorage.html index 555a88f6984..611dbc863ab 100644 --- a/releases/next/docs/asyncstorage.html +++ b/releases/next/docs/asyncstorage.html @@ -18,11 +18,11 @@ method in the API returns a Promise object.

    Persisting data:< } } catch (error) { // Error retrieving data -}

    Methods #

    static getItem(key, callback?) #

    Fetches an item for a key and invokes a callback upon completion. +}

    Methods #

    static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void) #

    Fetches an item for a key and invokes a callback upon completion. Returns a Promise object.

    Parameters:
    Name and TypeDescription
    key

    string

    Key of the item to fetch.

    [callback]

    ?(error: ?Error, result: ?string) => void

    Function that will be called with a result if found or - any error.

    static setItem(key, value, callback?) #

    Sets the value for a key and invokes a callback upon completion. -Returns a Promise object.

    Parameters:
    Name and TypeDescription
    key

    string

    Key of the item to set.

    value

    string

    Value to set for the key.

    [callback]

    ?(error: ?Error) => void

    Function that will be called with any error.

    static removeItem(key, callback?) #

    Removes an item for a key and invokes a callback upon completion. -Returns a Promise object.

    Parameters:
    Name and TypeDescription
    key

    string

    Key of the item to remove.

    [callback]

    ?(error: ?Error) => void

    Function that will be called with any error.

    static mergeItem(key, value, callback?) #

    Merges an existing key value with an input value, assuming both values + any error.

    static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) #

    Sets the value for a key and invokes a callback upon completion. +Returns a Promise object.

    Parameters:
    Name and TypeDescription
    key

    string

    Key of the item to set.

    value

    string

    Value to set for the key.

    [callback]

    ?(error: ?Error) => void

    Function that will be called with any error.

    static removeItem(key: string, callback?: ?(error: ?Error) => void) #

    Removes an item for a key and invokes a callback upon completion. +Returns a Promise object.

    Parameters:
    Name and TypeDescription
    key

    string

    Key of the item to remove.

    [callback]

    ?(error: ?Error) => void

    Function that will be called with any error.

    static mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void) #

    Merges an existing key value with an input value, assuming both values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:
    Name and TypeDescription
    key

    string

    Key of the item to modify.

    value

    string

    New value to merge for the key.

    [callback]

    ?(error: ?Error) => void

    Function that will be called with any error.


    Example:
    let UID123_object = { name: 'Chris', @@ -45,10 +45,10 @@ AsyncStorage. // Console log result: // => {'name':'Chris','age':31,'traits': -// {'shoe_size':10,'hair':'brown','eyes':'blue'}}

    static clear(callback?) #

    Erases all AsyncStorage for all clients, libraries, etc. You probably +// {'shoe_size':10,'hair':'brown','eyes':'blue'}}

    static clear(callback?: ?(error: ?Error) => void) #

    Erases all AsyncStorage for all clients, libraries, etc. You probably don't want to call this; use removeItem or multiRemove to clear only -your app's keys. Returns a Promise object.

    Parameters:
    Name and TypeDescription
    [callback]

    ?(error: ?Error) => void

    Function that will be called with any error.

    static getAllKeys(callback?) #

    Gets all keys known to your app; for all callers, libraries, etc. -Returns a Promise object.

    Parameters:
    Name and TypeDescription
    [callback]

    ?(error: ?Error, keys: ?Array<string>) => void

    Function that will be called the keys found and any error.

    static flushGetRequests() #

    Flushes any pending requests using a single batch call to get the data.

    static multiGet(keys, callback?) #

    This allows you to batch the fetching of items given an array of key +your app's keys. Returns a Promise object.

    Parameters:
    Name and TypeDescription
    [callback]

    ?(error: ?Error) => void

    Function that will be called with any error.

    static getAllKeys(callback?: ?(error: ?Error, keys: ?Array<string>) => void) #

    Gets all keys known to your app; for all callers, libraries, etc. +Returns a Promise object.

    Parameters:
    Name and TypeDescription
    [callback]

    ?(error: ?Error, keys: ?Array<string>) => void

    Function that will be called the keys found and any error.

    static flushGetRequests() #

    Flushes any pending requests using a single batch call to get the data.

    static multiGet(keys: Array<string>, callback?: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void) #

    This allows you to batch the fetching of items given an array of key inputs. Your callback will be invoked with an array of corresponding key-value pairs found:

    multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

    The method returns a Promise object.

    Parameters:
    Name and TypeDescription
    keys

    Array<string>

    Array of key for the items to get.

    [callback]

    ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void

    Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.


    Example:
    AsyncStorage.getAllKeys((err, keys) => { @@ -59,16 +59,16 @@ key-value pairs found:

    let value = store[i][1]; }); }); -});

    static multiSet(keyValuePairs, callback?) #

    Use this as a batch operation for storing multiple key-value pairs. When +});

    static multiSet(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #

    Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:

    multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

    The method returns a Promise object.

    Parameters:
    Name and TypeDescription
    keyValuePairs

    Array<Array<string>>

    Array of key-value array for the items to set.

    [callback]

    ?(errors: ?Array<Error>) => void

    Function that will be called with an array of any - key-specific errors found.

    static multiRemove(keys, callback?) #

    Call this to batch the deletion of all keys in the keys array. Returns + key-specific errors found.

    static multiRemove(keys: Array<string>, callback?: ?(errors: ?Array<Error>) => void) #

    Call this to batch the deletion of all keys in the keys array. Returns a Promise object.

    Parameters:
    Name and TypeDescription
    keys

    Array<string>

    Array of key for the items to delete.

    [callback]

    ?(errors: ?Array<Error>) => void

    Function that will be called an array of any key-specific errors found.


    Example:
    let keys = ['k1', 'k2']; AsyncStorage.multiRemove(keys, (err) => { // keys k1 & k2 removed, if they existed // do most stuff after removal (if you want) -});

    static multiMerge(keyValuePairs, callback?) #

    Batch operation to merge in existing and new values for a given set of +});

    static multiMerge(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #

    Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a Promise object.

    NOTE: This is not supported by all native implementations.

    Parameters:
    Name and TypeDescription
    keyValuePairs

    Array<Array<string>>

    Array of key-value array for the items to merge.

    [callback]

    ?(errors: ?Array<Error>) => void

    Function that will be called with an array of any key-specific errors found.


    Example:
    diff --git a/releases/next/docs/backandroid.html b/releases/next/docs/backandroid.html index 5f5e155d3a9..33858414ab2 100644 --- a/releases/next/docs/backandroid.html +++ b/releases/next/docs/backandroid.html @@ -10,7 +10,7 @@ and if one subscription returns true then subscriptions registered earlier will return true; } return false; -});

    Methods #

    static exitApp(0) #

    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 (Android)

    components

    APIs

    Clipboard #

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

    Methods #

    static getString(0) #

    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 (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'); diff --git a/releases/next/docs/datepickerandroid.html b/releases/next/docs/datepickerandroid.html index 2aa29b47cfe..27a2d99eb66 100644 --- a/releases/next/docs/datepickerandroid.html +++ b/releases/next/docs/datepickerandroid.html @@ -13,7 +13,7 @@ day if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being DatePickerAndroid.dismissedAction and all the other keys being undefined. Always check whether the action before reading the values.

    Note the native date picker dialog has some UI glitches on Android 4 and lower -when using the minDate and maxDate options.

    static dateSetAction(0) #

    A date has been selected.

    static dismissedAction(0) #

    The dialog has been dismissed.

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

    Examples #

    		Edit on GitHub
    'use strict'; +when using the minDate and maxDate options.

    static dateSetAction() #

    A date has been selected.

    static dismissedAction() #

    The dialog has been dismissed.

    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'); diff --git a/releases/next/docs/datepickerios.html b/releases/next/docs/datepickerios.html index 5dac97e72c0..d5216537577 100644 --- a/releases/next/docs/datepickerios.html +++ b/releases/next/docs/datepickerios.html @@ -2,9 +2,9 @@ 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 -source of truth.

    Props #

    View props... #

    date Date #

    The currently selected date.

    maximumDate Date #

    Maximum date.

    Restricts the range of possible date/time values.

    minimumDate Date #

    Minimum date.

    Restricts the range of possible date/time values.

    minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #

    The interval at which minutes can be selected.

    mode enum('date', 'time', 'datetime') #

    The date picker mode.

    onDateChange function #

    Date change handler.

    This is called when the user changes the date or time in the UI. +source of truth.

    Props #

    View props... #

    date: Date #

    The currently selected date.

    maximumDate?: Date #

    Maximum date.

    Restricts the range of possible date/time values.

    minimumDate?: Date #

    Minimum date.

    Restricts the range of possible date/time values.

    minuteInterval?: enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #

    The interval at which minutes can be selected.

    mode?: enum('date', 'time', 'datetime') #

    The date picker mode.

    onDateChange: function #

    Date change handler.

    This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new -date and time.

    timeZoneOffsetInMinutes number #

    Timezone offset in minutes.

    By default, the date picker will use the device's timezone. With this +date and time.

    timeZoneOffsetInMinutes?: number #

    Timezone offset in minutes.

    By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 * 60.

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

    Examples #

    		Edit on GitHub
    'use strict'; diff --git a/releases/next/docs/drawerlayoutandroid.html b/releases/next/docs/drawerlayoutandroid.html index b8e3de531d7..3f72db7b17f 100644 --- a/releases/next/docs/drawerlayoutandroid.html +++ b/releases/next/docs/drawerlayoutandroid.html @@ -20,24 +20,24 @@ be set by the drawerWidth prop.

    Example:

    /View> </DrawerLayoutAndroid> ); -},

    Props #

    View props... #

    drawerBackgroundColor color #

    Specifies the background color of the drawer. The default value is white. +},

    Props #

    View props... #

    drawerBackgroundColor?: [object Object] #

    Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:

    return ( <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)"> </DrawerLayoutAndroid> -);

    drawerLockMode enum('unlocked', 'locked-closed', 'locked-open') #

    Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +);

    drawerLockMode?: enum('unlocked', 'locked-closed', 'locked-open') #

    Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. - locked-closed, meaning that the drawer will stay closed and not respond to gestures. - locked-open, meaning that the drawer will stay opened and not respond to gestures. -The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

    drawerPosition enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) #

    Specifies the side of the screen from which the drawer will slide in.

    drawerWidth number #

    Specifies the width of the drawer, more precisely the width of the view that be pulled in -from the edge of the window.

    keyboardDismissMode enum('none', 'on-drag') #

    Determines whether the keyboard gets dismissed in response to a drag. +The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

    drawerPosition?: enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) #

    Specifies the side of the screen from which the drawer will slide in.

    drawerWidth?: number #

    Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window.

    keyboardDismissMode?: enum('none', 'on-drag') #

    Determines whether the keyboard gets dismissed in response to a drag. - 'none' (the default), drags do not dismiss the keyboard. - - 'on-drag', the keyboard is dismissed when a drag begins.

    onDrawerClose function #

    Function called whenever the navigation view has been closed.

    onDrawerOpen function #

    Function called whenever the navigation view has been opened.

    onDrawerSlide function #

    Function called whenever there is an interaction with the navigation view.

    onDrawerStateChanged function #

    Function called when the drawer state has changed. The drawer can be in 3 states: + - 'on-drag', the keyboard is dismissed when a drag begins.

    onDrawerClose?: function #

    Function called whenever the navigation view has been closed.

    onDrawerOpen?: function #

    Function called whenever the navigation view has been opened.

    onDrawerSlide?: function #

    Function called whenever there is an interaction with the navigation view.

    onDrawerStateChanged?: function #

    Function called when the drawer state has changed. The drawer can be in 3 states: - idle, meaning there is no interaction with the navigation view happening at the time - dragging, meaning there is currently an interaction with the navigation view - settling, meaning that there was an interaction with the navigation view, and the -navigation view is now finishing its closing or opening animation

    renderNavigationView function #

    The navigation view that will be rendered to the side of the screen and can be pulled in.

    statusBarBackgroundColor color #

    Make the drawer take the entire screen and draw the background of the +navigation view is now finishing its closing or opening animation

    renderNavigationView: function #

    The navigation view that will be rendered to the side of the screen and can be pulled in.

    statusBarBackgroundColor?: [object Object] #

    Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an -effect on API 21+.

    Methods #

    openDrawer(0) #

    Opens the drawer.

    closeDrawer(0) #

    Closes the drawer.

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    KeyboardAvoidingView #

    It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. -It can automatically adjust either its position or bottom padding based on the position of the keyboard.

    Props #

    View props... #

    behavior enum('height', 'position', 'padding') #

    contentContainerStyle View#style #

    The style of the content container(View) when behavior is 'position'.

    keyboardVerticalOffset number #

    This is the distance between the top of the user screen and the react native view, -may be non-zero in some use cases.

    Methods #

    relativeKeyboardHeight(keyboardFrame): #

    onKeyboardChange(event) #

    onLayout(event) #

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

    Examples #

    		Edit on GitHub
    'use strict'; +It can automatically adjust either its position or bottom padding based on the position of the keyboard.

    Props #

    View props... #

    behavior?: enum('height', 'position', 'padding') #

    contentContainerStyle?: [object Object] #

    The style of the content container(View) when behavior is 'position'.

    keyboardVerticalOffset: number #

    This is the distance between the top of the user screen and the react native view, +may be non-zero in some use cases.

    Methods #

    relativeKeyboardHeight(keyboardFrame: object): #

    onKeyboardChange(event: object) #

    onLayout(event: object) #

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

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('React'); const ReactNative = require('react-native'); diff --git a/releases/next/docs/layout-props.html b/releases/next/docs/layout-props.html index 4740e313135..ad0b762cd8a 100644 --- a/releases/next/docs/layout-props.html +++ b/releases/next/docs/layout-props.html @@ -1,34 +1,34 @@ -Layout Props
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Layout Props #

    Props #

    alignContent enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') #

    alignContent controls how a rows align in the cross direction, +Layout Props

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Layout Props #

    Props #

    alignContent?: enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') #

    alignContent controls how a rows align in the cross direction, overriding the alignContent of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content - for more details.

    alignItems enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') #

    alignItems aligns children in the cross direction. + for more details.

    alignItems?: enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') #

    alignItems aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally. It works like align-items in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items - for more details.

    alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') #

    alignSelf controls how a child aligns in the cross direction, + for more details.

    alignSelf?: enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') #

    alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self - for more details.

    aspectRatio number #

    Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a + for more details.

    aspectRatio?: number #

    Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in react native and not CSS.

    • On a node with a set width/height aspect ratio control the size of the unset dimension
    • On a node with a set flex basis aspect ratio controls the size of the node in the cross axis if unset
    • On a node with a measure function aspect ratio works as though the measure function measures the flex basis
    • On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis -if unset
    • Aspect ratio takes min/max dimensions into account

    borderBottomWidth number #

    borderBottomWidth works like border-bottom-width in CSS. +if unset

  • Aspect ratio takes min/max dimensions into account

    • borderBottomWidth?: number #

    borderBottomWidth works like border-bottom-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width -for more details.

    borderLeftWidth number #

    borderLeftWidth works like border-left-width in CSS. +for more details.

    borderLeftWidth?: number #

    borderLeftWidth works like border-left-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width -for more details.

    borderRightWidth number #

    borderRightWidth works like border-right-width in CSS. +for more details.

    borderRightWidth?: number #

    borderRightWidth works like border-right-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width -for more details.

    borderTopWidth number #

    borderTopWidth works like border-top-width in CSS. +for more details.

    borderTopWidth?: number #

    borderTopWidth works like border-top-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width -for more details.

    borderWidth number #

    borderWidth works like border-width in CSS. +for more details.

    borderWidth?: number #

    borderWidth works like border-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width -for more details.

    bottom number, string #

    bottom is the number of logical pixels to offset the bottom edge of +for more details.

    bottom?: [object Object], [object Object] #

    bottom is the number of logical pixels to offset the bottom edge of this component.

    It works similarly to bottom in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom - for more details of how bottom affects layout.

    display string #

    display sets the display type of this component.

    It works similarly to display in CSS, but only support 'flex' and 'none'. - 'flex' is the default.

    flex number #

    In React Native flex does not work the same way that it does in CSS. + for more details of how bottom affects layout.

    display?: string #

    display sets the display type of this component.

    It works similarly to display in CSS, but only support 'flex' and 'none'. + 'flex' is the default.

    flex?: number #

    In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga library at https://github.com/facebook/yoga

    When flex is a positive number, it makes the component flexible @@ -37,64 +37,64 @@ for more details.

    flex set to 1.

    When flex is 0, the component is sized according to width and height and it is inflexible.

    When flex is -1, the component is normally sized according width and height. However, if there's not enough space, - the component will shrink to its minWidth and minHeight.

    flexGrow, flexShrink, and flexBasis work the same as in CSS.

    flexBasis number, string #

    flexDirection enum('row', 'row-reverse', 'column', 'column-reverse') #

    flexDirection controls which directions children of a container go. + the component will shrink to its minWidth and minHeight.

    flexGrow, flexShrink, and flexBasis work the same as in CSS.

    flexBasis?: [object Object], [object Object] #

    flexDirection?: enum('row', 'row-reverse', 'column', 'column-reverse') #

    flexDirection controls which directions children of a container go. row goes left to right, column goes top to bottom, and you may be able to guess what the other two do. It works like flex-direction in CSS, except the default is column. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction - for more details.

    flexGrow number #

    flexShrink number #

    flexWrap enum('wrap', 'nowrap') #

    flexWrap controls whether children can wrap around after they + for more details.

    flexGrow?: number #

    flexShrink?: number #

    flexWrap?: enum('wrap', 'nowrap') #

    flexWrap controls whether children can wrap around after they hit the end of a flex container. It works like flex-wrap in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap - for more details.

    height number, string #

    height sets the height of this component.

    It works similarly to height in CSS, but in React Native you + for more details.

    height?: [object Object], [object Object] #

    height sets the height of this component.

    It works similarly to height in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. - See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.

    justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

    justifyContent aligns children in the main direction. + See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.

    justifyContent?: enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

    justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically. It works like justify-content in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content - for more details.

    left number, string #

    left is the number of logical pixels to offset the left edge of + for more details.

    left?: [object Object], [object Object] #

    left is the number of logical pixels to offset the left edge of this component.

    It works similarly to left in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/left - for more details of how left affects layout.

    margin number, string #

    Setting margin has the same effect as setting each of + for more details of how left affects layout.

    margin?: [object Object], [object Object] #

    Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin - for more details.

    marginBottom number, string #

    marginBottom works like margin-bottom in CSS. + for more details.

    marginBottom?: [object Object], [object Object] #

    marginBottom works like margin-bottom in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom - for more details.

    marginHorizontal number, string #

    Setting marginHorizontal has the same effect as setting - both marginLeft and marginRight.

    marginLeft number, string #

    marginLeft works like margin-left in CSS. + for more details.

    marginHorizontal?: [object Object], [object Object] #

    Setting marginHorizontal has the same effect as setting + both marginLeft and marginRight.

    marginLeft?: [object Object], [object Object] #

    marginLeft works like margin-left in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left - for more details.

    marginRight number, string #

    marginRight works like margin-right in CSS. + for more details.

    marginRight?: [object Object], [object Object] #

    marginRight works like margin-right in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right - for more details.

    marginTop number, string #

    marginTop works like margin-top in CSS. + for more details.

    marginTop?: [object Object], [object Object] #

    marginTop works like margin-top in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top - for more details.

    marginVertical number, string #

    Setting marginVertical has the same effect as setting both - marginTop and marginBottom.

    maxHeight number, string #

    maxHeight is the maximum height for this component, in logical pixels.

    It works similarly to max-height in CSS, but in React Native you + for more details.

    marginVertical?: [object Object], [object Object] #

    Setting marginVertical has the same effect as setting both + marginTop and marginBottom.

    maxHeight?: [object Object], [object Object] #

    maxHeight is the maximum height for this component, in logical pixels.

    It works similarly to max-height in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height - for more details.

    maxWidth number, string #

    maxWidth is the maximum width for this component, in logical pixels.

    It works similarly to max-width in CSS, but in React Native you + for more details.

    maxWidth?: [object Object], [object Object] #

    maxWidth is the maximum width for this component, in logical pixels.

    It works similarly to max-width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width - for more details.

    minHeight number, string #

    minHeight is the minimum height for this component, in logical pixels.

    It works similarly to min-height in CSS, but in React Native you + for more details.

    minHeight?: [object Object], [object Object] #

    minHeight is the minimum height for this component, in logical pixels.

    It works similarly to min-height in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height - for more details.

    minWidth number, string #

    minWidth is the minimum width for this component, in logical pixels.

    It works similarly to min-width in CSS, but in React Native you + for more details.

    minWidth?: [object Object], [object Object] #

    minWidth is the minimum width for this component, in logical pixels.

    It works similarly to min-width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width - for more details.

    overflow enum('visible', 'hidden', 'scroll') #

    overflow controls how a children are measured and displayed. + for more details.

    overflow?: enum('visible', 'hidden', 'scroll') #

    overflow controls how a children are measured and displayed. overflow: hidden causes views to be clipped while overflow: scroll causes views to be measured independently of their parents main axis.It works likeoverflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow - for more details.

    padding number, string #

    Setting padding has the same effect as setting each of + for more details.

    padding?: [object Object], [object Object] #

    Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding - for more details.

    paddingBottom number, string #

    paddingBottom works like padding-bottom in CSS. + for more details.

    paddingBottom?: [object Object], [object Object] #

    paddingBottom works like padding-bottom in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom -for more details.

    paddingHorizontal number, string #

    Setting paddingHorizontal is like setting both of - paddingLeft and paddingRight.

    paddingLeft number, string #

    paddingLeft works like padding-left in CSS. +for more details.

    paddingHorizontal?: [object Object], [object Object] #

    Setting paddingHorizontal is like setting both of + paddingLeft and paddingRight.

    paddingLeft?: [object Object], [object Object] #

    paddingLeft works like padding-left in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left -for more details.

    paddingRight number, string #

    paddingRight works like padding-right in CSS. +for more details.

    paddingRight?: [object Object], [object Object] #

    paddingRight works like padding-right in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right -for more details.

    paddingTop number, string #

    paddingTop works like padding-top in CSS. +for more details.

    paddingTop?: [object Object], [object Object] #

    paddingTop works like padding-top in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top -for more details.

    paddingVertical number, string #

    Setting paddingVertical is like setting both of - paddingTop and paddingBottom.

    position enum('absolute', 'relative') #

    position in React Native is similar to regular CSS, but +for more details.

    paddingVertical?: [object Object], [object Object] #

    Setting paddingVertical is like setting both of + paddingTop and paddingBottom.

    position?: enum('absolute', 'relative') #

    position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.

    If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute @@ -102,15 +102,15 @@ for more details.

    See https://github.com/facebook/yoga for more details on how position differs between React Native - and CSS.

    right number, string #

    right is the number of logical pixels to offset the right edge of + and CSS.

    right?: [object Object], [object Object] #

    right is the number of logical pixels to offset the right edge of this component.

    It works similarly to right in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/right - for more details of how right affects layout.

    top number, string #

    top is the number of logical pixels to offset the top edge of + for more details of how right affects layout.

    top?: [object Object], [object Object] #

    top is the number of logical pixels to offset the top edge of this component.

    It works similarly to top in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/top - for more details of how top affects layout.

    width number, string #

    width sets the width of this component.

    It works similarly to width in CSS, but in React Native you + for more details of how top affects layout.

    width?: [object Object], [object Object] #

    width sets the width of this component.

    It works similarly to width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. - See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.

    zIndex number #

    zIndex controls which components display on top of others. + See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.

    zIndex?: number #

    zIndex controls which components display on top of others. Normally, you don't use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if you have animations or custom @@ -118,7 +118,7 @@ for more details.

    zIndex will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for - more details.

    iosdirection enum('inherit', 'ltr', 'rtl') #

    direction specifies the directional flow of the user interface. + more details.

    iosdirection?: enum('inherit', 'ltr', 'rtl') #

    direction specifies the directional flow of the user interface. The default is inherit, except for root node which will have value based on the current locale. See https://facebook.github.io/yoga/docs/rtl/ diff --git a/releases/next/docs/layoutanimation.html b/releases/next/docs/layoutanimation.html index 11b36ea8faf..e5349f52119 100644 --- a/releases/next/docs/layoutanimation.html +++ b/releases/next/docs/layoutanimation.html @@ -2,7 +2,7 @@ next layout happens.

    A common way to use this API is to call it before calling setState.

    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);

    Methods #

    static configureNext(config, onAnimationDidEnd?) #

    Schedules an animation to happen on the next layout.

    @param config Specifies animation properties:

    • duration in milliseconds
    • create, config for animating in new views (see Anim type)
    • update, config for animating views that have been updated (see Anim type)

    @param onAnimationDidEnd Called when the animation finished. Only supported on iOS. -@param onError Called on error. Only supported on iOS.

    static create(duration, type, creationProp) #

    Helper for creating a config for configureNext.

    Properties #

    Types: CallExpression #

    Properties: CallExpression #

    configChecker: CallExpression #

    Presets: ObjectExpression #

    easeInEaseOut: CallExpression #

    linear: CallExpression #

    spring: CallExpression #

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

    Examples #

    		Edit on GitHub
    'use strict'; +@param onError Called on error. Only supported on iOS.

    static create(duration, type, creationProp) #

    Helper for creating a config for configureNext.

    Properties #

    Types: [object Object] #

    Properties: [object Object] #

    configChecker: [object Object] #

    Presets: [object Object] #

    easeInEaseOut: [object Object] #

    linear: [object Object] #

    spring: [object Object] #

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

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); diff --git a/releases/next/docs/linking.html b/releases/next/docs/linking.html index 705e5854a07..657b571fedb 100644 --- a/releases/next/docs/linking.html +++ b/releases/next/docs/linking.html @@ -46,11 +46,11 @@ execution you'll need to add the following lines to you *AppDelegate. } else { return Linking.openURL(url); } -}).catch(err => console.error('An error occurred', err));

    Methods #

    constructor(0) #

    addEventListener(type, handler) #

    Add a handler to Linking changes by listening to the url event type +}).catch(err => console.error('An error occurred', err));

    Methods #

    constructor() #

    addEventListener(type, handler) #

    Add a handler to Linking changes by listening to the url event type and providing the handler

    removeEventListener(type, handler) #

    Remove a handler by passing the url event type and the handler

    openURL(url) #

    Try to open the given url with any of the installed apps.

    You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps.

    NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.

    NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

    canOpenURL(url) #

    Determine whether or not an installed app can handle a given URL.

    NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

    NOTE: As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes key -inside Info.plist or canOpenURL will always return false.

    @param URL the URL to open

    getInitialURL(0) #

    If the app launch was triggered by an app link, +inside Info.plist or canOpenURL will always return false.

    @param URL the URL to open

    getInitialURL() #

    If the app launch was triggered by an app link, it will give the link url, otherwise it will give null

    NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); diff --git a/releases/next/docs/listview.html b/releases/next/docs/listview.html index f471a6d43df..f3baf05b8a5 100644 --- a/releases/next/docs/listview.html +++ b/releases/next/docs/listview.html @@ -31,45 +31,45 @@ data source tells the ListView if it needs to re-render a row because the source data has changed - see ListViewDataSource for more details.

  • Rate-limited row rendering - By default, only one row is rendered per event-loop (customizable with the pageSize prop). This breaks up the work into smaller chunks to reduce the chance of dropping frames while -rendering rows.

    • Props #

    ScrollView props... #

    dataSource ListViewDataSource #

    An instance of ListView.DataSource to use

    enableEmptySections bool #

    Flag indicating whether empty section headers should be rendered. In the future release +rendering rows.

    Props #

    ScrollView props... #

    dataSource: ListViewDataSource #

    An instance of ListView.DataSource to use

    enableEmptySections?: bool #

    Flag indicating whether empty section headers should be rendered. In the future release empty section headers will be rendered by default, and the flag will be deprecated. -If empty sections are not desired to be rendered their indices should be excluded from sectionID object.

    initialListSize number #

    How many rows to render on initial component mount. Use this to make +If empty sections are not desired to be rendered their indices should be excluded from sectionID object.

    initialListSize: number #

    How many rows to render on initial component mount. Use this to make it so that the first screen worth of data appears at one time instead of -over the course of multiple frames.

    onChangeVisibleRows function #

    (visibleRows, changedRows) => void

    Called when the set of visible rows changes. visibleRows maps +over the course of multiple frames.

    onChangeVisibleRows?: function #

    (visibleRows, changedRows) => void

    Called when the set of visible rows changes. visibleRows maps { sectionID: { rowID: true }} for all the visible rows, and changedRows maps { sectionID: { rowID: true | false }} for the rows that have changed their visibility, with true indicating visible, and -false indicating the view has moved out of view.

    onEndReached function #

    Called when all rows have been rendered and the list has been scrolled +false indicating the view has moved out of view.

    onEndReached?: function #

    Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom. The native scroll -event is provided.

    onEndReachedThreshold number #

    Threshold in pixels (virtual, not physical) for calling onEndReached.

    pageSize number #

    Number of rows to render per event loop. Note: if your 'rows' are actually +event is provided.

    onEndReachedThreshold: number #

    Threshold in pixels (virtual, not physical) for calling onEndReached.

    pageSize: number #

    Number of rows to render per event loop. Note: if your 'rows' are actually cells, i.e. they don't span the full width of your view (as in the ListViewGridLayoutExample), you should set the pageSize to be a multiple of the number of cells per row, otherwise you're likely to see gaps at -the edge of the ListView as new pages are loaded.

    removeClippedSubviews bool #

    A performance optimization for improving scroll perf of +the edge of the ListView as new pages are loaded.

    removeClippedSubviews?: bool #

    A performance optimization for improving scroll perf of large lists, used in conjunction with overflow: 'hidden' on the row -containers. This is enabled by default.

    renderFooter function #

    () => renderable

    The header and footer are always rendered (if these props are provided) +containers. This is enabled by default.

    renderFooter?: function #

    () => renderable

    The header and footer are always rendered (if these props are provided) on every render pass. If they are expensive to re-render, wrap them in StaticContainer or other mechanism as appropriate. Footer is always -at the bottom of the list, and header at the top, on every render pass.

    renderHeader function #

    renderRow function #

    (rowData, sectionID, rowID, highlightRow) => renderable

    Takes a data entry from the data source and its ids and should return +at the bottom of the list, and header at the top, on every render pass.

    renderHeader?: function #

    renderRow: function #

    (rowData, sectionID, rowID, highlightRow) => renderable

    Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the row. By default the data is exactly what was put into the data source, but it's also possible to provide custom extractors. ListView can be notified when a row is being highlighted by calling highlightRow(sectionID, rowID). This sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you to control the separators above and below the highlighted row. The highlighted -state of a row can be reset by calling highlightRow(null).

    renderScrollComponent function #

    (props) => renderable

    A function that returns the scrollable component in which the list rows -are rendered. Defaults to returning a ScrollView with the given props.

    renderSectionHeader function #

    (sectionData, sectionID) => renderable

    If provided, a header is rendered for this section.

    renderSeparator function #

    (sectionID, rowID, adjacentRowHighlighted) => renderable

    If provided, a renderable component to be rendered as the separator +state of a row can be reset by calling highlightRow(null).

    renderScrollComponent: function #

    (props) => renderable

    A function that returns the scrollable component in which the list rows +are rendered. Defaults to returning a ScrollView with the given props.

    renderSectionHeader?: function #

    (sectionData, sectionID) => renderable

    If provided, a header is rendered for this section.

    renderSeparator?: function #

    (sectionID, rowID, adjacentRowHighlighted) => renderable

    If provided, a renderable component to be rendered as the separator below each row but not the last row if there is a section header below. Take a sectionID and rowID of the row above and whether its adjacent row -is highlighted.

    scrollRenderAheadDistance number #

    How early to start rendering rows before they come on screen, in -pixels.

    iosstickyHeaderIndices [number] #

    An array of child indices determining which children get docked to the +is highlighted.

    scrollRenderAheadDistance: number #

    How early to start rendering rows before they come on screen, in +pixels.

    iosstickyHeaderIndices: [object Object] #

    An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing stickyHeaderIndices={[0]} will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction -with horizontal={true}.

    iosstickySectionHeadersEnabled bool #

    Makes the sections headers sticky. The sticky behavior means that it +with horizontal={true}.

    iosstickySectionHeadersEnabled?: bool #

    Makes the sections headers sticky. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it -is pushed off the screen by the next section header.

    Methods #

    getMetrics(0) #

    Exports some data, e.g. for perf investigations or analytics.

    scrollTo(...args) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    See ScrollView#scrollTo.

    scrollToEnd(options?) #

    If this is a vertical ListView scrolls to the bottom. +is pushed off the screen by the next section header.

    Methods #

    getMetrics() #

    Exports some data, e.g. for perf investigations or analytics.

    scrollTo(...args: Array) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    See ScrollView#scrollTo.

    scrollToEnd(options?: object) #

    If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.

    Use scrollToEnd({animated: true}) for smooth animated scrolling, scrollToEnd({animated: false}) for immediate scrolling. If no options are passed, animated defaults to true.

    See ScrollView#scrollToEnd.

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

    Examples #

    		Edit on GitHub
    'use strict'; diff --git a/releases/next/docs/listviewdatasource.html b/releases/next/docs/listviewdatasource.html index 7a59beb500e..7cda4a9a548 100644 --- a/releases/next/docs/listviewdatasource.html +++ b/releases/next/docs/listviewdatasource.html @@ -36,9 +36,9 @@ this function as the dataBlob.

    sectionIdentities are. If you don't care about sections you should safely be able to use cloneWithRows.

    sectionIdentities is an array of identifiers for sections. ie. ['s1', 's2', ...]. If not provided, it's assumed that the -keys of dataBlob are the section identities.

    Note: this returns a new object!

    getRowCount(0) #

    getRowAndSectionCount(0) #

    rowShouldUpdate(sectionIndex, rowIndex) #

    Returns if the row is dirtied and needs to be rerendered

    getRowData(sectionIndex, rowIndex) #

    Gets the data required to render the row.

    getRowIDForFlatIndex(index) #

    Gets the rowID at index provided if the dataSource arrays were flattened, +keys of dataBlob are the section identities.

    Note: this returns a new object!

    getRowCount() #

    getRowAndSectionCount() #

    rowShouldUpdate(sectionIndex, rowIndex) #

    Returns if the row is dirtied and needs to be rerendered

    getRowData(sectionIndex, rowIndex) #

    Gets the data required to render the row.

    getRowIDForFlatIndex(index) #

    Gets the rowID at index provided if the dataSource arrays were flattened, or null of out of range indexes.

    getSectionIDForFlatIndex(index) #

    Gets the sectionID at index provided if the dataSource arrays were flattened, -or null for out of range indexes.

    getSectionLengths(0) #

    Returns an array containing the number of rows in each section

    sectionHeaderShouldUpdate(sectionIndex) #

    Returns if the section header is dirtied and needs to be rerendered

    getSectionHeaderData(sectionIndex) #

    Gets the data required to render the section header

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    PickerIOS #

    Props #

    View props... #

    itemStyle itemStylePropType #

    onValueChange function #

    selectedValue any #

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

    Examples #

    		Edit on GitHub
    'use strict'; +PickerIOS
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    PickerIOS #

    Props #

    View props... #

    itemStyle?: itemStylePropType #

    onValueChange?: function #

    selectedValue?: any #

    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'); diff --git a/releases/next/docs/pixelratio.html b/releases/next/docs/pixelratio.html index a05e845d9e0..a73ef954ac4 100644 --- a/releases/next/docs/pixelratio.html +++ b/releases/next/docs/pixelratio.html @@ -4,14 +4,14 @@ by the pixel ratio.

    : PixelRatio.getPixelSizeForLayoutSize(200), height: PixelRatio.getPixelSizeForLayoutSize(100), }); -<Image source={image} style={{width: 200, height: 100}} />

    Methods #

    static get(0) #

    Returns the device pixel density. Some examples:

    • PixelRatio.get() === 1
      • mdpi Android devices (160 dpi)
    • PixelRatio.get() === 1.5
      • hdpi Android devices (240 dpi)
    • PixelRatio.get() === 2
      • iPhone 4, 4S
      • iPhone 5, 5c, 5s
      • iPhone 6
      • xhdpi Android devices (320 dpi)
    • PixelRatio.get() === 3
      • iPhone 6 plus
      • xxhdpi Android devices (480 dpi)
    • PixelRatio.get() === 3.5
      • Nexus 6

    static getFontScale(0) #

    Returns the scaling factor for font sizes. This is the ratio that is used to calculate the +<Image source={image} style={{width: 200, height: 100}} />

    Methods #

    static get() #

    Returns the device pixel density. Some examples:

    • PixelRatio.get() === 1
      • mdpi Android devices (160 dpi)
    • PixelRatio.get() === 1.5
      • hdpi Android devices (240 dpi)
    • PixelRatio.get() === 2
      • iPhone 4, 4S
      • iPhone 5, 5c, 5s
      • iPhone 6
      • xhdpi Android devices (320 dpi)
    • PixelRatio.get() === 3
      • iPhone 6 plus
      • xxhdpi Android devices (480 dpi)
    • PixelRatio.get() === 3.5
      • Nexus 6

    static getFontScale() #

    Returns the scaling factor for font sizes. This is the ratio that is used to calculate the absolute font size, so any elements that heavily depend on that should use this to do calculations.

    If a font scale is not set, this returns the device pixel ratio.

    Currently this is only implemented on Android and reflects the user preference set in Settings > Display > Font size, on iOS it will always return the default pixel ratio. @platform android

    static getPixelSizeForLayoutSize(layoutSize) #

    Converts a layout size (dp) to pixel size (px).

    Guaranteed to return an integer number.

    static roundToNearestPixel(layoutSize) #

    Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, which corresponds to -exactly (8.33 * 3) = 25 pixels.

    static startDetecting(0) #

    // No-op for iOS, but used on the web. Should not be documented.

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

    Description #

    Pixel Grid Snapping #

    In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iPhone 4 or 750×1334 for iPhone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.

    In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

    We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

    In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ProgressViewIOS #

    Use ProgressViewIOS to render a UIProgressView on iOS.

    Props #

    View props... #

    progress number #

    The progress value (between 0 and 1).

    progressImage Image.propTypes.source #

    A stretchable image to display as the progress bar.

    progressTintColor string #

    The tint color of the progress bar itself.

    progressViewStyle enum('default', 'bar') #

    The progress bar style.

    trackImage Image.propTypes.source #

    A stretchable image to display behind the progress bar.

    trackTintColor string #

    The tint color of the progress bar track.

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

    Examples #

    		Edit on GitHub
    'use strict'; +ProgressViewIOS
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ProgressViewIOS #

    Use ProgressViewIOS to render a UIProgressView on iOS.

    Props #

    View props... #

    progress?: number #

    The progress value (between 0 and 1).

    progressImage?: Image.propTypes.source #

    A stretchable image to display as the progress bar.

    progressTintColor?: string #

    The tint color of the progress bar itself.

    progressViewStyle?: enum('default', 'bar') #

    The progress bar style.

    trackImage?: Image.propTypes.source #

    A stretchable image to display behind the progress bar.

    trackTintColor?: string #

    The tint color of the progress bar track.

    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'); diff --git a/releases/next/docs/pushnotificationios.html b/releases/next/docs/pushnotificationios.html index f993ac9eda4..1477b1230c6 100644 --- a/releases/next/docs/pushnotificationios.html +++ b/releases/next/docs/pushnotificationios.html @@ -26,7 +26,7 @@ and your server-side system. To get an idea, - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { [RCTPushNotificationManager didReceiveLocalNotification:notification]; - }

    Methods #

    =(NewData, NoData, ResultFailed, }, static, (, :) #

    static scheduleLocalNotification(details) #

    Schedules the localNotification for future presentation.

    details is an object containing:

    • fireDate : The date and time when the system should deliver the notification.
    • alertBody : The message displayed in the notification alert.
    • alertAction : The "action" displayed beneath an actionable notification. Defaults to "view";
    • soundName : The sound played when the notification is fired (optional).
    • category : The category of this notification, required for actionable notifications (optional).
    • userInfo : An optional object containing additional notification data.
    • applicationIconBadgeNumber (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge.
    • repeatInterval : The interval to repeat as a string. Possible values: minute, hour, day, week, month, year.

    static cancelAllLocalNotifications(0) #

    Cancels all scheduled localNotifications

    static setApplicationIconBadgeNumber(number) #

    Sets the badge number for the app icon on the home screen

    static getApplicationIconBadgeNumber(callback) #

    Gets the current badge number for the app icon on the home screen

    static cancelLocalNotifications(userInfo) #

    Cancel local notifications.

    Optionally restricts the set of canceled notifications to those + }

    Methods #

    =(NewData, NoData, ResultFailed, }, static, (, :) #

    static scheduleLocalNotification(details) #

    Schedules the localNotification for future presentation.

    details is an object containing:

    • fireDate : The date and time when the system should deliver the notification.
    • alertBody : The message displayed in the notification alert.
    • alertAction : The "action" displayed beneath an actionable notification. Defaults to "view";
    • soundName : The sound played when the notification is fired (optional).
    • category : The category of this notification, required for actionable notifications (optional).
    • userInfo : An optional object containing additional notification data.
    • applicationIconBadgeNumber (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge.
    • repeatInterval : The interval to repeat as a string. Possible values: minute, hour, day, week, month, year.

    static cancelAllLocalNotifications() #

    Cancels all scheduled localNotifications

    static setApplicationIconBadgeNumber(number) #

    Sets the badge number for the app icon on the home screen

    static getApplicationIconBadgeNumber(callback) #

    Gets the current badge number for the app icon on the home screen

    static cancelLocalNotifications(userInfo) #

    Cancel local notifications.

    Optionally restricts the set of canceled notifications to those notifications whose userInfo fields match the corresponding fields in the userInfo argument.

    static getScheduledLocalNotifications(callback) #

    Gets the local notifications that are currently scheduled.

    static addEventListener(type, handler) #

    Attaches a listener to remote or local notification events while the app is running in the foreground or the background.

    Valid events are:

    • notification : Fired when a remote notification is received. The @@ -43,11 +43,11 @@ permissions. The following permissions are supported:

      • alert
      • badge
      • sound

      If a map is provided to the method, only the permissions with truthy values will be requested.

      This method returns a promise that will resolve when the user accepts, rejects, or if the permissions were previously rejected. The promise -resolves to the current state of the permission.

    static abandonPermissions(0) #

    Unregister for all remote notifications received via Apple Push Notification service.

    You should call this method in rare circumstances only, such as when a new version of +resolves to the current state of the permission.

    static abandonPermissions() #

    Unregister for all remote notifications received via Apple Push Notification service.

    You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register.

    static checkPermissions(callback) #

    See what push permissions are currently enabled. callback will be -invoked with a permissions object:

    • alert :boolean
    • badge :boolean
    • sound :boolean

    static getInitialNotification(0) #

    This method returns a promise that resolves to either the notification +invoked with a permissions object:

    • alert :boolean
    • badge :boolean
    • sound :boolean

    static getInitialNotification() #

    This method returns a promise that resolves to either the notification object if the app was launched by a push notification, or null otherwise.

    constructor(nativeNotif) #

    You will never need to instantiate PushNotificationIOS yourself. Listening to the notification event and invoking getInitialNotification is sufficient

    finish(fetchResult) #

    This method is available for remote notifications that have been received via: @@ -56,7 +56,7 @@ Listening to the notification event and invoking calling this block, pass in the fetch result value that best describes the results of your operation. You must call this handler and should do so as soon as possible. For a list of possible values, see PushNotificationIOS.FetchResult.

    If you do not call this method your background remote notifications could -be throttled, to read more about it see the above documentation link.

    getMessage(0) #

    An alias for getAlert to get the notification's main message string

    getSound(0) #

    Gets the sound string from the aps object

    getAlert(0) #

    Gets the notification's main message from the aps object

    getBadgeCount(0) #

    Gets the badge count number from the aps object

    getData(0) #

    Gets the data object on the notif

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

    Examples #

    		Edit on GitHub
    'use strict'; +be throttled, to read more about it see the above documentation link.

    getMessage() #

    An alias for getAlert to get the notification's main message string

    getSound() #

    Gets the sound string from the aps object

    getAlert() #

    Gets the notification's main message from the aps object

    getBadgeCount() #

    Gets the badge count number from the aps object

    getData() #

    Gets the data object on the notif

    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'); diff --git a/releases/next/docs/refreshcontrol.html b/releases/next/docs/refreshcontrol.html index 000adcb000b..37f7b6a4978 100644 --- a/releases/next/docs/refreshcontrol.html +++ b/releases/next/docs/refreshcontrol.html @@ -32,7 +32,7 @@ triggers an onRefresh event.

    } ... }

    Note: refreshing is a controlled prop, this is why it needs to be set to true -in the onRefresh function otherwise the refresh indicator will stop immediately.

    Props #

    View props... #

    onRefresh function #

    Called when the view starts refreshing.

    refreshing bool #

    Whether the view should be indicating an active refresh.

    androidcolors [color] #

    The colors (at least one) that will be used to draw the refresh indicator.

    androidenabled bool #

    Whether the pull to refresh functionality is enabled.

    androidprogressBackgroundColor color #

    The background color of the refresh indicator.

    androidprogressViewOffset number #

    Progress view top offset

    androidsize enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) #

    Size of the refresh indicator, see RefreshControl.SIZE.

    iostintColor color #

    The color of the refresh indicator.

    iostitle string #

    The title displayed under the refresh indicator.

    iostitleColor color #

    Title color.

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

    Examples #

    		Edit on GitHub
    'use strict'; +in the onRefresh function otherwise the refresh indicator will stop immediately.

    Props #

    View props... #

    onRefresh?: function #

    Called when the view starts refreshing.

    refreshing: bool #

    Whether the view should be indicating an active refresh.

    androidcolors?: [object Object] #

    The colors (at least one) that will be used to draw the refresh indicator.

    androidenabled?: bool #

    Whether the pull to refresh functionality is enabled.

    androidprogressBackgroundColor?: [object Object] #

    The background color of the refresh indicator.

    androidprogressViewOffset?: number #

    Progress view top offset

    androidsize?: enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) #

    Size of the refresh indicator, see RefreshControl.SIZE.

    iostintColor?: [object Object] #

    The color of the refresh indicator.

    iostitle?: string #

    The title displayed under the refresh indicator.

    iostitleColor?: [object Object] #

    Title color.

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

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); diff --git a/releases/next/docs/scrollview.html b/releases/next/docs/scrollview.html index c6806564a83..bbffda8ff63 100644 --- a/releases/next/docs/scrollview.html +++ b/releases/next/docs/scrollview.html @@ -16,7 +16,7 @@ which may not even be shown, will contribute to slow rendering of your screen and increased memory usage.

    This is where ListView comes into play. ListView renders items lazily, just when they are about to appear. This laziness comes at cost of a more complicated API, which is worth it unless you are rendering a small fixed -set of items.

    Props #

    View props... #

    contentContainerStyle StyleSheetPropType(ViewStylePropTypes) #

    These styles will be applied to the scroll view content container which +set of items.

    Props #

    View props... #

    contentContainerStyle?: StyleSheetPropType(ViewStylePropTypes) #

    These styles will be applied to the scroll view content container which wraps all of the child views. Example:

    return ( <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView> @@ -26,65 +26,65 @@ wraps all of the child views. Example:

    return ( contentContainer: { paddingVertical: 20 } - });

    horizontal bool #

    When true, the scroll view's children are arranged horizontally in a row -instead of vertically in a column. The default value is false.

    keyboardDismissMode enum('none', 'interactive', 'on-drag') #

    Determines whether the keyboard gets dismissed in response to a drag. + });

    horizontal?: bool #

    When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false.

    keyboardDismissMode?: enum('none', 'interactive', 'on-drag') #

    Determines whether the keyboard gets dismissed in response to a drag. - 'none' (the default), drags do not dismiss the keyboard. - 'on-drag', the keyboard is dismissed when a drag begins. - 'interactive', the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. - On android this is not supported and it will have the same behavior as 'none'.

    keyboardShouldPersistTaps enum('always', 'never', 'handled', false, true) #

    Determines when the keyboard should stay visible after a tap.

    • 'never' (the default), tapping outside of the focused text input when the keyboard + On android this is not supported and it will have the same behavior as 'none'.

    keyboardShouldPersistTaps?: enum('always', 'never', 'handled', false, true) #

    Determines when the keyboard should stay visible after a tap.

    • 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.
    • 'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
    • 'handled', the keyboard will not dismiss automatically when the tap was handled by -a children, (or captured by an ancestor).
    • false, deprecated, use 'never' instead
    • true, deprecated, use 'always' instead

    onContentSizeChange function #

    Called when scrollable content view of the ScrollView changes.

    Handler function is passed the content width and content height as parameters: (contentWidth, contentHeight)

    It's implemented using onLayout handler attached to the content container -which this ScrollView renders.

    onScroll function #

    Fires at most once per frame during scrolling. The frequency of the -events can be controlled using the scrollEventThrottle prop.

    pagingEnabled bool #

    When true, the scroll view stops on multiples of the scroll view's size +a children, (or captured by an ancestor).

  • false, deprecated, use 'never' instead
  • true, deprecated, use 'always' instead

    • onContentSizeChange?: function #

    Called when scrollable content view of the ScrollView changes.

    Handler function is passed the content width and content height as parameters: (contentWidth, contentHeight)

    It's implemented using onLayout handler attached to the content container +which this ScrollView renders.

    onScroll?: function #

    Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the scrollEventThrottle prop.

    pagingEnabled?: bool #

    When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default -value is false.

    refreshControl element #

    A RefreshControl component, used to provide pull-to-refresh +value is false.

    refreshControl?: element #

    A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. Only works for vertical ScrollViews -(horizontal prop must be false).

    See RefreshControl.

    removeClippedSubviews bool #

    Experimental: When true, offscreen child views (whose overflow value is +(horizontal prop must be false).

    See RefreshControl.

    removeClippedSubviews?: bool #

    Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is -true.

    scrollEnabled bool #

    When false, the content does not scroll. -The default value is true.

    showsHorizontalScrollIndicator bool #

    When true, shows a horizontal scroll indicator. -The default value is true.

    showsVerticalScrollIndicator bool #

    When true, shows a vertical scroll indicator. -The default value is true.

    style style #

    Layout Props...
    Shadow Props...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor color
    borderBottomColor color
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderBottomWidth number
    borderColor color
    borderLeftColor color
    borderLeftWidth number
    borderRadius number
    borderRightColor color
    borderRightWidth number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderTopColor color
    borderTopLeftRadius number
    borderTopRightRadius number
    borderTopWidth number
    borderWidth number
    opacity number
    androidelevation number

    (Android-only) Sets the elevation of a view, using Android's underlying +true.

    scrollEnabled?: bool #

    When false, the content does not scroll. +The default value is true.

    showsHorizontalScrollIndicator?: bool #

    When true, shows a horizontal scroll indicator. +The default value is true.

    showsVerticalScrollIndicator?: bool #

    When true, shows a vertical scroll indicator. +The default value is true.

    style?: style #

    Layout Props...
    Shadow Props...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor [object Object]
    borderBottomColor [object Object]
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderBottomWidth number
    borderColor [object Object]
    borderLeftColor [object Object]
    borderLeftWidth number
    borderRadius number
    borderRightColor [object Object]
    borderRightWidth number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderTopColor [object Object]
    borderTopLeftRadius number
    borderTopRightRadius number
    borderTopWidth number
    borderWidth number
    opacity number
    androidelevation number

    (Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. -Only supported on Android 5.0+, has no effect on earlier versions.

    androidendFillColor color #

    Sometimes a scrollview takes up more space than its content fills. When this is +Only supported on Android 5.0+, has no effect on earlier versions.

    androidendFillColor?: [object Object] #

    Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization -that is not needed in the general case.

    androidoverScrollMode enum('auto', 'always', 'never') #

    Used to override default value of overScroll mode.

    Possible values:

    • 'auto' - Default value, allow a user to over-scroll -this view only if the content is large enough to meaningfully scroll.
    • 'always' - Always allow a user to over-scroll this view.
    • 'never' - Never allow a user to over-scroll this view.

    androidscrollPerfTag string #

    Tag used to log scroll performance on this scroll view. Will force +that is not needed in the general case.

    androidoverScrollMode?: enum('auto', 'always', 'never') #

    Used to override default value of overScroll mode.

    Possible values:

    • 'auto' - Default value, allow a user to over-scroll +this view only if the content is large enough to meaningfully scroll.
    • 'always' - Always allow a user to over-scroll this view.
    • 'never' - Never allow a user to over-scroll this view.

    androidscrollPerfTag?: string #

    Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native -FpsListener for it to be useful.

    iosalwaysBounceHorizontal bool #

    When true, the scroll view bounces horizontally when it reaches the end +FpsListener for it to be useful.

    iosalwaysBounceHorizontal?: bool #

    When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default -value is true when horizontal={true} and false otherwise.

    iosalwaysBounceVertical bool #

    When true, the scroll view bounces vertically when it reaches the end +value is true when horizontal={true} and false otherwise.

    iosalwaysBounceVertical?: bool #

    When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default -value is false when horizontal={true} and true otherwise.

    iosautomaticallyAdjustContentInsets bool #

    Controls whether iOS should automatically adjust the content inset +value is false when horizontal={true} and true otherwise.

    iosautomaticallyAdjustContentInsets?: bool #

    Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or -tab bar/ toolbar. The default value is true.

    iosbounces bool #

    When true, the scroll view bounces when it reaches the end of the +tab bar/ toolbar. The default value is true.

    iosbounces?: bool #

    When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if -the alwaysBounce* props are true. The default value is true.

    iosbouncesZoom bool #

    When true, gestures can drive zoom past min/max and the zoom will animate +the alwaysBounce* props are true. The default value is true.

    iosbouncesZoom?: bool #

    When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed -the limits.

    ioscanCancelContentTouches bool #

    When false, once tracking starts, won't try to drag if the touch moves. -The default value is true.

    ioscenterContent bool #

    When true, the scroll view automatically centers the content when the +the limits.

    ioscanCancelContentTouches?: bool #

    When false, once tracking starts, won't try to drag if the touch moves. +The default value is true.

    ioscenterContent?: bool #

    When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default -value is false.

    ioscontentInset {top: number, left: number, bottom: number, right: number} #

    The amount by which the scroll view content is inset from the edges -of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.

    ioscontentOffset PointPropType #

    Used to manually set the starting scroll offset. -The default value is {x: 0, y: 0}.

    iosdecelerationRate enum('fast', 'normal'), number #

    A floating-point number that determines how quickly the scroll view +value is false.

    ioscontentInset?: {top: number, left: number, bottom: number, right: number} #

    The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.

    ioscontentOffset?: PointPropType #

    Used to manually set the starting scroll offset. +The default value is {x: 0, y: 0}.

    iosdecelerationRate?: [object Object], [object Object] #

    A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts "normal" and "fast" which match the underlying iOS settings for UIScrollViewDecelerationRateNormal and UIScrollViewDecelerationRateFast respectively. - normal: 0.998 (the default) - - fast: 0.99

    iosdirectionalLockEnabled bool #

    When true, the ScrollView will try to lock to only vertical or horizontal -scrolling while dragging. The default value is false.

    iosindicatorStyle enum('default', 'black', 'white') #

    The style of the scroll indicators. + - fast: 0.99

    iosdirectionalLockEnabled?: bool #

    When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false.

    iosindicatorStyle?: enum('default', 'black', 'white') #

    The style of the scroll indicators. - default (the default), same as black. - black, scroll indicator is black. This style is good against a white content background. - - white, scroll indicator is white. This style is good against a black content background.

    iosmaximumZoomScale number #

    The maximum allowed zoom scale. The default value is 1.0.

    iosminimumZoomScale number #

    The minimum allowed zoom scale. The default value is 1.0.

    iosonScrollAnimationEnd function #

    Called when a scrolling animation ends.

    iosscrollEventThrottle number #

    This controls how often the scroll event will be fired while scrolling + - white, scroll indicator is white. This style is good against a black content background.

    iosmaximumZoomScale?: number #

    The maximum allowed zoom scale. The default value is 1.0.

    iosminimumZoomScale?: number #

    The minimum allowed zoom scale. The default value is 1.0.

    iosonScrollAnimationEnd?: function #

    Called when a scrolling animation ends.

    iosscrollEventThrottle?: number #

    This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. @@ -92,23 +92,23 @@ You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in -the scroll event being sent only once each time the view is scrolled.

    iosscrollIndicatorInsets {top: number, left: number, bottom: number, right: number} #

    The amount by which the scroll view indicators are inset from the edges +the scroll event being sent only once each time the view is scrolled.

    iosscrollIndicatorInsets?: {top: number, left: number, bottom: number, right: number} #

    The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as -the contentInset. Defaults to {0, 0, 0, 0}.

    iosscrollsToTop bool #

    When true, the scroll view scrolls to top when the status bar is tapped. -The default value is true.

    iossnapToAlignment enum('start', 'center', 'end') #

    When snapToInterval is set, snapToAlignment will define the relationship +the contentInset. Defaults to {0, 0, 0, 0}.

    iosscrollsToTop?: bool #

    When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true.

    iossnapToAlignment?: enum('start', 'center', 'end') #

    When snapToInterval is set, snapToAlignment will define the relationship of the snapping to the scroll view. - start (the default) will align the snap at the left (horizontal) or top (vertical) - center will align the snap in the center - - end will align the snap at the right (horizontal) or bottom (vertical)

    iossnapToInterval number #

    When set, causes the scroll view to stop at multiples of the value of + - end will align the snap at the right (horizontal) or bottom (vertical)

    iossnapToInterval?: number #

    When set, causes the scroll view to stop at multiples of the value of snapToInterval. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination -with snapToAlignment.

    iosstickyHeaderIndices [number] #

    An array of child indices determining which children get docked to the +with snapToAlignment.

    iosstickyHeaderIndices?: [object Object] #

    An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing stickyHeaderIndices={[0]} will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction -with horizontal={true}.

    ioszoomScale number #

    The current scale of the scroll view content. The default value is 1.0.

    Methods #

    scrollTo(y?, x?, animated?) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    Example:

    scrollTo({x: 0; y: 0; animated: true})

    Note: The weird function signature is due to the fact that, for historical reasons, +with horizontal={true}.

    ioszoomScale?: number #

    The current scale of the scroll view content. The default value is 1.0.

    Methods #

    scrollTo(y?: number, object, x?: number, animated?: boolean) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    Example:

    scrollTo({x: 0; y: 0; animated: true})

    Note: The weird function signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. -This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.

    scrollToEnd(options?) #

    If this is a vertical ScrollView scrolls to the bottom. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.

    scrollToEnd(options?: object) #

    If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.

    Use scrollToEnd({animated: true}) for smooth animated scrolling, scrollToEnd({animated: false}) for immediate scrolling. If no options are passed, animated defaults to true.

    scrollWithoutAnimationTo(y, x) #

    Deprecated, use scrollTo instead.

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

    Examples #

    		Edit on GitHub
    'use strict'; diff --git a/releases/next/docs/segmentedcontrolios.html b/releases/next/docs/segmentedcontrolios.html index 9c1b5775c8d..0f476883ef0 100644 --- a/releases/next/docs/segmentedcontrolios.html +++ b/releases/next/docs/segmentedcontrolios.html @@ -7,11 +7,11 @@ selects a value and changes the index, as shown in the example below.

    ={(event) => { this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); }} -/>

    Props #

    View props... #

    enabled bool #

    If false the user won't be able to interact with the control. -Default value is true.

    momentary bool #

    If true, then selecting a segment won't persist visually. -The onValueChange callback will still work as expected.

    onChange function #

    Callback that is called when the user taps a segment; -passes the event as an argument

    onValueChange function #

    Callback that is called when the user taps a segment; -passes the segment's value as an argument

    selectedIndex number #

    The index in props.values of the segment to be (pre)selected.

    tintColor string #

    Accent color of the control.

    values [string] #

    The labels for the control's segment buttons, in order.

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

    Examples #

    		Edit on GitHub
    'use strict'; +/>

    Props #

    View props... #

    enabled?: bool #

    If false the user won't be able to interact with the control. +Default value is true.

    momentary?: bool #

    If true, then selecting a segment won't persist visually. +The onValueChange callback will still work as expected.

    onChange?: function #

    Callback that is called when the user taps a segment; +passes the event as an argument

    onValueChange?: function #

    Callback that is called when the user taps a segment; +passes the segment's value as an argument

    selectedIndex?: number #

    The index in props.values of the segment to be (pre)selected.

    tintColor?: string #

    Accent color of the control.

    values?: [object Object] #

    The labels for the control's segment buttons, in order.

    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'); diff --git a/releases/next/docs/shadow-props.html b/releases/next/docs/shadow-props.html index e7f19895f51..e6e2fd16c1f 100644 --- a/releases/next/docs/shadow-props.html +++ b/releases/next/docs/shadow-props.html @@ -1,4 +1,4 @@ -Shadow Props
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Shadow Props #

    Props #

    iosshadowColor color #

    Sets the drop shadow color

    iosshadowOffset {width: number, height: number} #

    Sets the drop shadow offset

    iosshadowOpacity number #

    Sets the drop shadow opacity (multiplied by the color's alpha component)

    iosshadowRadius number #

    Sets the drop shadow blur radius

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

    ← Prev
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Shadow Props #

    Props #

    iosshadowColor?: [object Object] #

    Sets the drop shadow color

    iosshadowOffset?: {width: [object Object], height: [object Object]} #

    Sets the drop shadow offset

    iosshadowOpacity?: number #

    Sets the drop shadow opacity (multiplied by the color's alpha component)

    iosshadowRadius?: number #

    Sets the drop shadow blur radius

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

    ← Prev
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Share #

    Methods #

    static share(content, options) #

    Open a dialog to share text content.

    In iOS, Returns a Promise which will be invoked an object containing action, activityType. If the user dismissed the dialog, the Promise will still be resolved with action being Share.dismissedAction -and all the other keys being undefined.

    In Android, Returns a Promise which always be resolved with action being Share.sharedAction.

    Content #

    • message - a message to share
    • title - title of the message

    iOS #

    • url - an URL to share

    At least one of URL and message is required.

    Options #

    iOS #

    • excludedActivityTypes
    • tintColor

    Android #

    • dialogTitle

    static sharedAction(0) #

    The content was successfully shared.

    static dismissedAction(0) #

    The dialog has been dismissed. +and all the other keys being undefined.

    In Android, Returns a Promise which always be resolved with action being Share.sharedAction.

    Content #

    • message - a message to share
    • title - title of the message

    iOS #

    • url - an URL to share

    At least one of URL and message is required.

    Options #

    iOS #

    • excludedActivityTypes
    • tintColor

    Android #

    • dialogTitle

    static sharedAction() #

    The content was successfully shared.

    static dismissedAction() #

    The dialog has been dismissed. @platform ios

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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); diff --git a/releases/next/docs/slider.html b/releases/next/docs/slider.html index fac3a98ec10..522c9015867 100644 --- a/releases/next/docs/slider.html +++ b/releases/next/docs/slider.html @@ -1,16 +1,16 @@ -Slider
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Slider #

    A component used to select a single value from a range of values.

    Props #

    View props... #

    disabled bool #

    If true the user won't be able to move the slider. -Default value is false.

    maximumTrackTintColor color #

    The color used for the track to the right of the button. -Overrides the default blue gradient image on iOS.

    maximumValue number #

    Initial maximum value of the slider. Default value is 1.

    minimumTrackTintColor color #

    The color used for the track to the left of the button. -Overrides the default blue gradient image on iOS.

    minimumValue number #

    Initial minimum value of the slider. Default value is 0.

    onSlidingComplete function #

    Callback called when the user finishes changing the value (e.g. when -the slider is released).

    onValueChange function #

    Callback continuously called while the user is dragging the slider.

    step number #

    Step value of the slider. The value should be +Slider

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Slider #

    A component used to select a single value from a range of values.

    Props #

    View props... #

    disabled?: bool #

    If true the user won't be able to move the slider. +Default value is false.

    maximumTrackTintColor?: [object Object] #

    The color used for the track to the right of the button. +Overrides the default blue gradient image on iOS.

    maximumValue?: number #

    Initial maximum value of the slider. Default value is 1.

    minimumTrackTintColor?: [object Object] #

    The color used for the track to the left of the button. +Overrides the default blue gradient image on iOS.

    minimumValue?: number #

    Initial minimum value of the slider. Default value is 0.

    onSlidingComplete?: function #

    Callback called when the user finishes changing the value (e.g. when +the slider is released).

    onValueChange?: function #

    Callback continuously called while the user is dragging the slider.

    step?: number #

    Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). -Default value is 0.

    style View#style #

    Used to style and layout the Slider. See StyleSheet.js and -ViewStylePropTypes.js for more info.

    testID string #

    Used to locate this view in UI automation tests.

    value number #

    Initial value of the slider. The value should be between minimumValue +Default value is 0.

    style?: [object Object] #

    Used to style and layout the Slider. See StyleSheet.js and +ViewStylePropTypes.js for more info.

    testID?: string #

    Used to locate this view in UI automation tests.

    value?: number #

    Initial value of the slider. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0.

    This is not a controlled component, you don't need to update the -value during dragging.

    androidthumbTintColor color #

    Color of the foreground switch grip.

    iosmaximumTrackImage Image.propTypes.source #

    Assigns a maximum track image. Only static images are supported. The -leftmost pixel of the image will be stretched to fill the track.

    iosminimumTrackImage Image.propTypes.source #

    Assigns a minimum track image. Only static images are supported. The -rightmost pixel of the image will be stretched to fill the track.

    iosthumbImage Image.propTypes.source #

    Sets an image for the thumb. Only static images are supported.

    iostrackImage Image.propTypes.source #

    Assigns a single image for the track. Only static images are supported. +value during dragging.

    androidthumbTintColor?: [object Object] #

    Color of the foreground switch grip.

    iosmaximumTrackImage?: Image.propTypes.source #

    Assigns a maximum track image. Only static images are supported. The +leftmost pixel of the image will be stretched to fill the track.

    iosminimumTrackImage?: Image.propTypes.source #

    Assigns a minimum track image. Only static images are supported. The +rightmost pixel of the image will be stretched to fill the track.

    iosthumbImage?: Image.propTypes.source #

    Sets an image for the thumb. Only static images are supported.

    iostrackImage?: Image.propTypes.source #

    Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track.

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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); diff --git a/releases/next/docs/snapshotviewios.html b/releases/next/docs/snapshotviewios.html index e39bbc483b2..79284a60821 100644 --- a/releases/next/docs/snapshotviewios.html +++ b/releases/next/docs/snapshotviewios.html @@ -1,4 +1,4 @@ -SnapshotViewIOS
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    SnapshotViewIOS #

    Props #

    View props... #

    onSnapshotReady function #

    testIdentifier string #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    SnapshotViewIOS #

    Props #

    View props... #

    onSnapshotReady?: Function #

    testIdentifier?: string #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Systrace #

    Methods #

    static setEnabled(enabled) #

    static beginEvent(profileName?, args?) #

    beginEvent/endEvent for starting and then ending a profile within the same call stack frame

    static endEvent(0) #

    static beginAsyncEvent(profileName?) #

    beginAsyncEvent/endAsyncEvent for starting and then ending a profile where the end can either +Systrace

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Systrace #

    Methods #

    static setEnabled(enabled) #

    static beginEvent(profileName?, args?) #

    beginEvent/endEvent for starting and then ending a profile within the same call stack frame

    static endEvent() #

    static beginAsyncEvent(profileName?) #

    beginAsyncEvent/endAsyncEvent for starting and then ending a profile where the end can either occur on another thread or out of the current stack frame, eg await the returned cookie variable should be used as input into the endAsyncEvent call to end the profile

    static endAsyncEvent(profileName?, cookie?) #

    static counterEvent(profileName?, value?) #

    counterEvent registers the value to the profileName on the systrace timeline

    static attachToRelayProfiler(relayProfiler) #

    Relay profiles use await calls, so likely occur out of current stack frame -therefore async variant of profiling is used

    static swizzleJSON(0) #

    This is not called by default due to perf overhead but it's useful +therefore async variant of profiling is used

    static swizzleJSON() #

    This is not called by default due to perf overhead but it's useful if you want to find traces which spend too much time in JSON.

    static measureMethods(object, objectName, methodNames) #

    Measures multiple methods of a class. For example, you can do: Systrace.measureMethods(JSON, 'JSON', ['parse', 'stringify']);

    @param object @param objectName diff --git a/releases/next/docs/tabbarios-item.html b/releases/next/docs/tabbarios-item.html index f9347b3ee7d..cfa82701238 100644 --- a/releases/next/docs/tabbarios-item.html +++ b/releases/next/docs/tabbarios-item.html @@ -1,11 +1,11 @@ -TabBarIOS.Item

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    TabBarIOS.Item #

    Props #

    View props... #

    badge string, number #

    Little red bubble that sits at the top right of the icon.

    badgeColor color #

    Background color for the badge. Available since iOS 10.

    icon Image.propTypes.source #

    A custom icon for the tab. It is ignored when a system icon is defined.

    onPress function #

    Callback when this tab is being selected, you should change the state of your -component to set selected={true}.

    renderAsOriginal bool #

    If set to true it renders the image as original, -it defaults to being displayed as a template

    selected bool #

    It specifies whether the children are visible or not. If you see a -blank content, you probably forgot to add a selected one.

    selectedIcon Image.propTypes.source #

    A custom icon when the tab is selected. It is ignored when a system -icon is defined. If left empty, the icon will be tinted in blue.

    style View#style #

    React style object.

    systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') #

    Items comes with a few predefined system icons. Note that if you are +TabBarIOS.Item

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    TabBarIOS.Item #

    Props #

    View props... #

    badge?: [object Object], [object Object] #

    Little red bubble that sits at the top right of the icon.

    badgeColor?: [object Object] #

    Background color for the badge. Available since iOS 10.

    icon?: Image.propTypes.source #

    A custom icon for the tab. It is ignored when a system icon is defined.

    onPress?: function #

    Callback when this tab is being selected, you should change the state of your +component to set selected={true}.

    renderAsOriginal?: bool #

    If set to true it renders the image as original, +it defaults to being displayed as a template

    selected?: bool #

    It specifies whether the children are visible or not. If you see a +blank content, you probably forgot to add a selected one.

    selectedIcon?: Image.propTypes.source #

    A custom icon when the tab is selected. It is ignored when a system +icon is defined. If left empty, the icon will be tinted in blue.

    style?: [object Object] #

    React style object.

    systemIcon?: enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') #

    Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overridden with the -system ones.

    title string #

    Text that appears under the icon. It is ignored when a system icon -is defined.

    iosisTVSelectable bool #

    (Apple TV only)* When set to true, this view will be focusable +system ones.

    title?: string #

    Text that appears under the icon. It is ignored when a system icon +is defined.

    iosisTVSelectable?: bool #

    (Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote.

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    TabBarIOS #

    Props #

    View props... #

    barTintColor color #

    Background color of the tab bar

    itemPositioning enum('fill', 'center', 'auto') #

    Specifies tab bar item positioning. Available values are: +TabBarIOS

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    TabBarIOS #

    Props #

    View props... #

    barTintColor?: $FlowFixMe #

    Background color of the tab bar

    itemPositioning?: [object Object] | [object Object] | [object Object] #

    Specifies tab bar item positioning. Available values are: - fill - distributes items across the entire width of the tab bar - center - centers item in the available tab bar space - auto (default) - distributes items dynamically according to the user interface idiom. In a horizontally compact environment (e.g. iPhone 5) this value defaults to fill, in a horizontally regular one (e.g. iPad) -it defaults to center.

    style View#style #

    tintColor color #

    Color of the currently selected tab icon

    translucent bool #

    A Boolean value that indicates whether the tab bar is translucent

    unselectedItemTintColor color #

    Color of unselected tab icons. Available since iOS 10.

    unselectedTintColor color #

    Color of text on unselected tabs

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

    Examples #

    		Edit on GitHub
    'use strict'; +it defaults to center.

    style?: $FlowFixMe #

    tintColor?: $FlowFixMe #

    Color of the currently selected tab icon

    translucent?: boolean #

    A Boolean value that indicates whether the tab bar is translucent

    unselectedItemTintColor?: $FlowFixMe #

    Color of unselected tab icons. Available since iOS 10.

    unselectedTintColor?: $FlowFixMe #

    Color of text on unselected tabs

    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'); diff --git a/releases/next/docs/testing.html b/releases/next/docs/testing.html index 347206b4a92..be292e884f3 100644 --- a/releases/next/docs/testing.html +++ b/releases/next/docs/testing.html @@ -1,8 +1,14 @@ -Testing
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Testing #

    Running Tests and Contributing #

    This document is about running tests on React Native itself. If you're interested in testing a React Native app, check out the React Native Tutorial on the Jest website.

    The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run with the Travis and CircleCI continuous integration systems, which will automatically annotate pull requests with the test results.

    Whenever you are fixing a bug or adding new functionality to React Native, you should add a test that covers it. Depending on the change you're making, there are different types of tests that may be appropriate.

    Jest Tests #

    Jest tests are JavaScript-only tests run on the command line with node. You can run the existing React Native jest tests with:

    $ cd react-native -$ npm test

    It's a good idea to add a Jest test when you are working on a change that only modifies JavaScript code.

    The tests themselves live in the __tests__ directories of the files they test. See TouchableHighlight-test.js for a basic example.

    Android Unit Tests #

    The Android unit tests do not run in an emulator. They just use a normal Java installation. You do need to install Java 8. In particular, the default OS X Java install is insufficient.

    You also need to install the Buck build tool.

    To run the Android unit tests:

    $ cd react-native -$ ./scripts/run-android-local-unit-tests.sh

    It's a good idea to add an Android unit test whenever you are working on code that can be tested by Java code alone. The Android unit tests live under ReactAndroid/src/tests, so you can browse through that directory for good examples of tests.

    Android Integration Tests #

    To run the integration tests, you need to install the Android NDK. See Prerequisites.

    You also need to install the Buck build tool.

    We recommend running the Android integration tests in an emulator, although you can also use a real Android device. It's a good idea to keep the emulator running with a visible window. That way if your tests stall, you can look at the emulator to debug.

    Some devices and some emulator configurations may not work with the tests. We do maintain an emulator configuration that works, as the standard for testing. To run this emulator config:

    $ cd react-native +Testing
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Testing #

    This document is about running tests on React Native itself. If you're interested in testing a React Native app, check out the React Native Tutorial on the Jest website.

    Running Tests and Contributing #

    The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run with the Travis and CircleCI continuous integration systems, which will automatically annotate pull requests with the test results.

    Whenever you are fixing a bug or adding new functionality to React Native, you should add a test that covers it. Depending on the change you're making, there are different types of tests that may be appropriate.

    JavaScript Tests #

    Jest #

    Jest tests are JavaScript-only tests run on the command line with node. You can run the existing React Native jest tests with:

    $ cd react-native +$ npm test

    It's a good idea to add a Jest test when you are working on a change that only modifies JavaScript code.

    The tests themselves live in the __tests__ directories of the files they test. See TouchableHighlight-test.js for a basic example.

    Flow #

    You should also make sure your code passes Flow tests. These can be run using:

    $ cd react-native +$ npm run flow

    Android #

    Unit Tests #

    The Android unit tests do not run in an emulator. They just use a normal Java installation. The default macOS Java install is insufficient, you may need to install Java 8 (JDK8). You can type javac -version in a terminal to see what version you have:

    $ javac -version +javac 1.8.0_111

    The version string 1.8.x_xxx corresponds to JDK 8.

    You also need to install the Buck build tool.

    To run the Android unit tests:

    $ cd react-native +$ ./scripts/run-android-local-unit-tests.sh

    It's a good idea to add an Android unit test whenever you are working on code that can be tested by Java code alone. The Android unit tests live under ReactAndroid/src/tests, so you can browse through that directory for good examples of tests.

    Integration Tests #

    To run the integration tests, you need to install the Android NDK. See Prerequisites.

    You also need to install the Buck build tool.

    We recommend running the Android integration tests in an emulator, although you can also use a real Android device. It's a good idea to keep the emulator running with a visible window. That way if your tests stall, you can look at the emulator to debug.

    Some devices and some emulator configurations may not work with the tests. We do maintain an emulator configuration that works, as the standard for testing. To run this emulator config:

    $ cd react-native $ ./scripts/run-android-emulator.sh

    Once you have an emulator running, to run the integration tests:

    $ cd react-native -$ ./scripts/run-android-local-integration-tests.sh

    The integration tests should only take a few minutes to run on a modern developer machine.

    It's a good idea to add an Android integration test whenever you are working on code that needs both JavaScript and Java to be tested in conjunction. The Android integration tests live under ReactAndroid/src/androidTest, so you can browse through that directory for good examples of tests.

    iOS Integration Tests #

    React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are RCTTestRunner and RCTTestModule. RCTTestRunner sets up the ReactNative environment and provides facilities to run the tests as XCTestCases in Xcode (runTest:module is the simplest method). RCTTestModule is exported to JS as NativeModules.TestModule. The tests themselves are written in JS, and must call TestModule.markTestCompleted() when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with runTest:module:initialProps:expectErrorRegex: or runTest:module:initialProps:expectErrorBlock: which will expect an error to be thrown and verify the error matches the provided criteria. See IntegrationTestHarnessTest.js, UIExplorerIntegrationTests.m, and IntegrationTestsApp.js for example usage and integration points.

    You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.

    iOS Screenshot/Snapshot Tests #

    A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using TestModule.verifySnapshot(), using the FBSnapshotTestCase library behind the scenes. Reference images are recorded by setting recordMode = YES on the RCTTestRunner, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See SimpleSnapshotTest for a basic example.

    If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to _runner.recordMode = YES; in UIExplorer/UIExplorerSnapshotTests.m, re-run the failing tests, then flip record back to NO and submit/update your PR and wait to see if the Travis build passes.

    ← PrevNext →

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

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ToastAndroid #

    This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters:

    1. String message: A string with the text to toast
    2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG

    There is also a function showWithGravity to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.

    Basic usage:

    ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); -ToastAndroid.showWithGravity('All Your Base Are Belong To Us', ToastAndroid.SHORT, ToastAndroid.CENTER);

    Methods #

    static show(message, duration) #

    static showWithGravity(message, duration, gravity) #

    Properties #

    SHORT: MemberExpression #

    // Toast duration constants

    LONG: MemberExpression #

    TOP: MemberExpression #

    // Toast gravity constants

    BOTTOM: MemberExpression #

    CENTER: MemberExpression #

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

    Examples #

    		Edit on GitHub
    'use strict'; +ToastAndroid.showWithGravity('All Your Base Are Belong To Us', ToastAndroid.SHORT, ToastAndroid.CENTER);

    Methods #

    static show(message, duration) #

    static showWithGravity(message, duration, gravity) #

    Properties #

    SHORT: [object Object] #

    // Toast duration constants

    LONG: [object Object] #

    TOP: [object Object] #

    // Toast gravity constants

    BOTTOM: [object Object] #

    CENTER: [object Object] #

    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'); diff --git a/releases/next/docs/toolbarandroid.html b/releases/next/docs/toolbarandroid.html index 18955f515be..fba804cfa84 100644 --- a/releases/next/docs/toolbarandroid.html +++ b/releases/next/docs/toolbarandroid.html @@ -18,20 +18,20 @@ onActionSelected: if (position === 0) { // index of 'Settings' showSettings(); } -}

    Props #

    View props... #

    actions [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] #

    Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +}

    Props #

    View props... #

    actions?: [object Object] #

    Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu.

    This property takes an array of objects, where each object has the following keys:

    • title: required, the title of this action
    • icon: the icon for this action, e.g. require('./some_icon.png')
    • show: when to show this action as an icon or hide it in the overflow menu: always, -ifRoom or never
    • showWithText: boolean, whether to show text alongside the icon or not

    contentInsetEnd number #

    Sets the content inset for the toolbar ending edge.

    The content inset affects the valid area for Toolbar content other than +ifRoom or never

  • showWithText: boolean, whether to show text alongside the icon or not

    • contentInsetEnd?: number #

    Sets the content inset for the toolbar ending edge.

    The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content -along well-known gridlines.

    contentInsetStart number #

    Sets the content inset for the toolbar starting edge.

    The content inset affects the valid area for Toolbar content other than +along well-known gridlines.

    contentInsetStart?: number #

    Sets the content inset for the toolbar starting edge.

    The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content -along well-known gridlines.

    logo optionalImageSource #

    Sets the toolbar logo.

    navIcon optionalImageSource #

    Sets the navigation icon.

    onActionSelected function #

    Callback that is called when an action is selected. The only argument that is passed to the -callback is the position of the action in the actions array.

    onIconClicked function #

    Callback called when the icon is selected.

    overflowIcon optionalImageSource #

    Sets the overflow icon.

    rtl bool #

    Used to set the toolbar direction to RTL. +along well-known gridlines.

    logo?: optionalImageSource #

    Sets the toolbar logo.

    navIcon?: optionalImageSource #

    Sets the navigation icon.

    onActionSelected?: function #

    Callback that is called when an action is selected. The only argument that is passed to the +callback is the position of the action in the actions array.

    onIconClicked?: function #

    Callback called when the icon is selected.

    overflowIcon?: optionalImageSource #

    Sets the overflow icon.

    rtl?: bool #

    Used to set the toolbar direction to RTL. In addition to this property you need to add

    android:supportsRtl="true"

    to your application AndroidManifest.xml and then call setLayoutDirection(LayoutDirection.RTL) in your MainActivity -onCreate method.

    subtitle string #

    Sets the toolbar subtitle.

    subtitleColor color #

    Sets the toolbar subtitle color.

    testID string #

    Used to locate this view in end-to-end tests.

    title string #

    Sets the toolbar title.

    titleColor color #

    Sets the toolbar title color.

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

    Examples #

    		Edit on GitHub
    'use strict'; +onCreate method.

    subtitle?: string #

    Sets the toolbar subtitle.

    subtitleColor?: [object Object] #

    Sets the toolbar subtitle color.

    testID?: string #

    Used to locate this view in end-to-end tests.

    title?: string #

    Sets the toolbar title.

    titleColor?: [object Object] #

    Sets the toolbar title color.

    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'); diff --git a/releases/next/docs/touchablehighlight.html b/releases/next/docs/touchablehighlight.html index 7c0e409e1f1..c5dbb6f466e 100644 --- a/releases/next/docs/touchablehighlight.html +++ b/releases/next/docs/touchablehighlight.html @@ -13,9 +13,9 @@ If you wish to have several child components, wrap them in a View.

    Example /> </TouchableHighlight> ); -},

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is -active.

    onHideUnderlay function #

    Called immediately after the underlay is hidden

    onShowUnderlay function #

    Called immediately after the underlay is shown

    style View#style #

    underlayColor color #

    The color of the underlay that will show through when the touch is -active.

    ioshasTVPreferredFocus bool #

    (Apple TV only) TV preferred focus (see documentation for the View component).

    iostvParallaxProperties object #

    (Apple TV only) Object with properties to control Apple TV parallax effects.

    enabled: If true, parallax effects are enabled. Defaults to true. +},

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity?: number #

    Determines what the opacity of the wrapped view should be when touch is +active.

    onHideUnderlay?: function #

    Called immediately after the underlay is hidden

    onShowUnderlay?: function #

    Called immediately after the underlay is shown

    style?: [object Object] #

    underlayColor?: [object Object] #

    The color of the underlay that will show through when the touch is +active.

    ioshasTVPreferredFocus?: bool #

    (Apple TV only) TV preferred focus (see documentation for the View component).

    iostvParallaxProperties?: object #

    (Apple TV only) Object with properties to control Apple TV parallax effects.

    enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. diff --git a/releases/next/docs/touchablenativefeedback.html b/releases/next/docs/touchablenativefeedback.html index abb62de0641..d55cde61d19 100644 --- a/releases/next/docs/touchablenativefeedback.html +++ b/releases/next/docs/touchablenativefeedback.html @@ -13,21 +13,21 @@ RCTView node with some additional properties set.

    Background drawable of n </View> </TouchableNativeFeedback> ); -},

    Props #

    TouchableWithoutFeedback props... #

    background backgroundPropType #

    Determines the type of background drawable that's going to be used to +},

    Props #

    TouchableWithoutFeedback props... #

    background?: backgroundPropType #

    Determines the type of background drawable that's going to be used to display feedback. It takes an object with type property and extra data depending on the type. It's recommended to use one of the static -methods to generate that dictionary.

    useForeground bool #

    Set to true to add the ripple effect to the foreground of the view, instead of the +methods to generate that dictionary.

    useForeground?: bool #

    Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.

    Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and -fallback to background.

    Methods #

    static SelectableBackground(0) #

    Creates an object that represents android theme's default background for -selectable elements (?android:attr/selectableItemBackground).

    static SelectableBackgroundBorderless(0) #

    Creates an object that represent android theme's default background for borderless +fallback to background.

    Methods #

    static SelectableBackground() #

    Creates an object that represents android theme's default background for +selectable elements (?android:attr/selectableItemBackground).

    static SelectableBackgroundBorderless() #

    Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). -Available on android API level 21+.

    static Ripple(color, borderless) #

    Creates an object that represents ripple drawable with specified color (as a +Available on android API level 21+.

    static Ripple(color: string, borderless: boolean) #

    Creates an object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android -API level 21+.

    Parameters:
    Name and TypeDescription
    color

    string

    The ripple color

    borderless

    boolean

    If the ripple can render outside it's bounds

    static canUseNativeForeground(0) #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    TouchableWithoutFeedback #

    Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched.

    TouchableWithoutFeedback supports only one child. -If you wish to have several child components, wrap them in a View.

    Props #

    accessibilityComponentType View.AccessibilityComponentType #

    accessibilityTraits View.AccessibilityTraits, [object Object] #

    accessible bool #

    delayLongPress number #

    Delay in ms, from onPressIn, before onLongPress is called.

    delayPressIn number #

    Delay in ms, from the start of the touch, before onPressIn is called.

    delayPressOut number #

    Delay in ms, from the release of the touch, before onPressOut is called.

    disabled bool #

    If true, disable all interactions for this component.

    hitSlop {top: number, left: number, bottom: number, right: number} #

    This defines how far your touch can start away from the button. This is +If you wish to have several child components, wrap them in a View.

    Props #

    accessibilityComponentType?: View.AccessibilityComponentType #

    accessibilityTraits?: [object Object], [object Object] #

    accessible?: bool #

    delayLongPress?: number #

    Delay in ms, from onPressIn, before onLongPress is called.

    delayPressIn?: number #

    Delay in ms, from the start of the touch, before onPressIn is called.

    delayPressOut?: number #

    Delay in ms, from the release of the touch, before onPressOut is called.

    disabled?: bool #

    If true, disable all interactions for this component.

    hitSlop?: {top: number, left: number, bottom: number, right: number} #

    This defines how far your touch can start away from the button. This is added to pressRetentionOffset when moving off of the button. NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping -views.

    onLayout function #

    Invoked on mount and layout changes with

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

    onLongPress function #

    onPress function #

    Called when the touch is released, but not if cancelled (e.g. by a scroll -that steals the responder lock).

    onPressIn function #

    onPressOut function #

    pressRetentionOffset {top: number, left: number, bottom: number, right: number} #

    When the scroll view is disabled, this defines how far your touch may +views.

    onLayout?: function #

    Invoked on mount and layout changes with

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

    onLongPress?: function #

    onPress?: function #

    Called when the touch is released, but not if cancelled (e.g. by a scroll +that steals the responder lock).

    onPressIn?: function #

    onPressOut?: function #

    pressRetentionOffset?: {top: number, left: number, bottom: number, right: number} #

    When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view diff --git a/releases/next/docs/transforms.html b/releases/next/docs/transforms.html index 80c93a96a09..8e59af24b26 100644 --- a/releases/next/docs/transforms.html +++ b/releases/next/docs/transforms.html @@ -1,4 +1,4 @@ -Transforms

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Transforms #

    Props #

    decomposedMatrix DecomposedMatrixPropType #

    transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] #

    transformMatrix TransformMatrixPropType #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Transforms #

    Props #

    decomposedMatrix?: DecomposedMatrixPropType #

    transform?: [object Object] #

    transformMatrix?: TransformMatrixPropType #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Vibration #

    Methods #

    static vibrate(pattern, repeat) #

    static cancel(0) #

    Stop vibration

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

    Examples #

    		Edit on GitHub
    'use strict'; +Vibration
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Vibration #

    Methods #

    static vibrate(pattern, repeat) #

    static cancel() #

    Stop vibration

    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'); diff --git a/releases/next/docs/vibrationios.html b/releases/next/docs/vibrationios.html index 1701c01ece7..7d2d7be37b0 100644 --- a/releases/next/docs/vibrationios.html +++ b/releases/next/docs/vibrationios.html @@ -1,7 +1,7 @@ VibrationIOS
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    VibrationIOS #

    NOTE: VibrationIOS is being deprecated. Use Vibration instead.

    The Vibration API is exposed at VibrationIOS.vibrate(). On iOS, calling this function will trigger a one second vibration. The vibration is asynchronous so this method will return immediately.

    There will be no effect on devices that do not support Vibration, eg. the iOS -simulator.

    Vibration patterns are currently unsupported.

    Methods #

    static vibrate(0) #

    @deprecated

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

    Examples #

    		Edit on GitHub
    'use strict'; +simulator.

    Vibration patterns are currently unsupported.

    Methods #

    static vibrate() #

    @deprecated

    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'); diff --git a/releases/next/docs/view.html b/releases/next/docs/view.html index 2a36405974d..dcfe3dcbba3 100644 --- a/releases/next/docs/view.html +++ b/releases/next/docs/view.html @@ -16,37 +16,37 @@ padding.

    class } }

    Views are designed to be used with StyleSheet for clarity and performance, although inline styles are also supported.

    Synthetic Touch Events #

    For View responder props (e.g., onResponderMove), the synthetic touch event passed to them -are of 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.

    Props #

    accessibilityLabel node #

    Overrides the text that's read by the screen reader when the user interacts +are of 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.

    Props #

    accessibilityLabel?: node #

    Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the -children and accumulating all the Text nodes separated by space.

    accessible bool #

    When true, indicates that the view is an accessibility element. By default, -all the touchable elements are accessible.

    hitSlop {top: number, left: number, bottom: number, right: number} #

    This defines how far a touch event can start away from the view. +children and accumulating all the Text nodes separated by space.

    accessible?: bool #

    When true, indicates that the view is an accessibility element. By default, +all the touchable elements are accessible.

    hitSlop?: {top: number, left: number, bottom: number, right: number} #

    This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels.

    For example, if a touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}

    The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping -views.

    onAccessibilityTap function #

    When accessible is true, the system will try to invoke this function -when the user performs accessibility tap gesture.

    onLayout function #

    Invoked on mount and layout changes with:

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

    This event is fired immediately once the layout has been calculated, but +views.

    onAccessibilityTap?: function #

    When accessible is true, the system will try to invoke this function +when the user performs accessibility tap gesture.

    onLayout?: function #

    Invoked on mount and layout changes with:

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

    This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the -event is received, especially if a layout animation is in progress.

    onMagicTap function #

    When accessible is true, the system will invoke this function when the -user performs the magic tap gesture.

    onMoveShouldSetResponder function #

    Does this view want to "claim" touch responsiveness? This is called for every touch move on +event is received, especially if a layout animation is in progress.

    onMagicTap?: function #

    When accessible is true, the system will invoke this function when the +user performs the magic tap gesture.

    onMoveShouldSetResponder?: function #

    Does this view want to "claim" touch responsiveness? This is called for every touch move on the View when it is not the responder.

    View.props.onMoveShouldSetResponder: (event) => [true | false], where event is a -synthetic touch event as described above.

    onMoveShouldSetResponderCapture function #

    If a parent View wants to prevent a child View from becoming responder on a move, +synthetic touch event as described above.

    onMoveShouldSetResponderCapture?: function #

    If a parent View wants to prevent a child View from becoming responder on a move, it should have this handler which returns true.

    View.props.onMoveShouldSetResponderCapture: (event) => [true | false], where event is a -synthetic touch event as described above.

    onResponderGrant function #

    The View is now responding for touch events. This is the time to highlight and show the user +synthetic touch event as described above.

    onResponderGrant?: function #

    The View is now responding for touch events. This is the time to highlight and show the user what is happening.

    View.props.onResponderGrant: (event) => {}, where event is a synthetic touch event as -described above.

    onResponderMove function #

    The user is moving their finger.

    View.props.onResponderMove: (event) => {}, where event is a synthetic touch event as -described above.

    onResponderReject function #

    Another responder is already active and will not release it to that View asking to be +described above.

    onResponderMove?: function #

    The user is moving their finger.

    View.props.onResponderMove: (event) => {}, where event is a synthetic touch event as +described above.

    onResponderReject?: function #

    Another responder is already active and will not release it to that View asking to be the responder.

    View.props.onResponderReject: (event) => {}, where event is a synthetic touch event as -described above.

    onResponderRelease function #

    Fired at the end of the touch.

    View.props.onResponderRelease: (event) => {}, where event is a synthetic touch event as -described above.

    onResponderTerminate function #

    The responder has been taken from the View. Might be taken by other views after a call to +described above.

    onResponderRelease?: function #

    Fired at the end of the touch.

    View.props.onResponderRelease: (event) => {}, where event is a synthetic touch event as +described above.

    onResponderTerminate?: function #

    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 (e.g., happens with control center/ notification center on iOS)

    View.props.onResponderTerminate: (event) => {}, where event is a synthetic touch event as -described above.

    onResponderTerminationRequest function #

    Some other View wants to become responder and is asking this View to release its +described above.

    onResponderTerminationRequest?: function #

    Some other View wants to become responder and is asking this View to release its responder. Returning true allows its release.

    View.props.onResponderTerminationRequest: (event) => {}, where event is a synthetic touch -event as described above.

    onStartShouldSetResponder function #

    Does this view want to become responder on the start of a touch?

    View.props.onStartShouldSetResponder: (event) => [true | false], where event is a -synthetic touch event as described above.

    onStartShouldSetResponderCapture function #

    If a parent View wants to prevent a child View from becoming responder on a touch start, +event as described above.

    onStartShouldSetResponder?: function #

    Does this view want to become responder on the start of a touch?

    View.props.onStartShouldSetResponder: (event) => [true | false], where event is a +synthetic touch event as described above.

    onStartShouldSetResponderCapture?: function #

    If a parent View wants to prevent a child View from becoming responder on a touch start, it should have this handler which returns true.

    View.props.onStartShouldSetResponderCapture: (event) => [true | false], where event is a -synthetic touch event as described above.

    pointerEvents enum('box-none', 'none', 'box-only', 'auto') #

    Controls whether the View can be the target of touch events.

    • 'auto': The View can be the target of touch events.
    • 'none': The View is never the target of touch events.
    • 'box-none': The View is never the target of touch events but it's +synthetic touch event as described above.

    pointerEvents?: enum('box-none', 'none', 'box-only', 'auto') #

    Controls whether the View can be the target of touch events.

    • 'auto': The View can be the target of touch events.
    • 'none': The View is never the target of touch events.
    • 'box-none': The View is never the target of touch events but it's subviews can be. It behaves like if the view had the following classes in CSS:
      .box-none { pointer-events: none; @@ -64,27 +64,27 @@ in CSS:
      .< already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an -implementation detail of the platform.

    removeClippedSubviews bool #

    This is a special performance property exposed by RCTView and is useful +implementation detail of the platform.

    removeClippedSubviews?: bool #

    This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view -(or one of its superviews).

    style style #

    Layout Props...
    Shadow Props...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor color
    borderBottomColor color
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderBottomWidth number
    borderColor color
    borderLeftColor color
    borderLeftWidth number
    borderRadius number
    borderRightColor color
    borderRightWidth number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderTopColor color
    borderTopLeftRadius number
    borderTopRightRadius number
    borderTopWidth number
    borderWidth number
    opacity number
    androidelevation number

    (Android-only) Sets the elevation of a view, using Android's underlying +(or one of its superviews).

    style?: style #

    Layout Props...
    Shadow Props...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor [object Object]
    borderBottomColor [object Object]
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderBottomWidth number
    borderColor [object Object]
    borderLeftColor [object Object]
    borderLeftWidth number
    borderRadius number
    borderRightColor [object Object]
    borderRightWidth number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderTopColor [object Object]
    borderTopLeftRadius number
    borderTopRightRadius number
    borderTopWidth number
    borderWidth number
    opacity number
    androidelevation number

    (Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. -Only supported on Android 5.0+, has no effect on earlier versions.

    testID string #

    Used to locate this view in end-to-end tests.

    This disables the 'layout-only view removal' optimization for this view!

    androidaccessibilityComponentType AccessibilityComponentTypes #

    Indicates to accessibility services to treat UI component like a -native one. Works for Android only.

    Possible values are one of:

    • 'none'
    • 'button'
    • 'radiobutton_checked'
    • 'radiobutton_unchecked'

    androidaccessibilityLiveRegion enum('none', 'polite', 'assertive') #

    Indicates to accessibility services whether the user should be notified +Only supported on Android 5.0+, has no effect on earlier versions.

    testID?: string #

    Used to locate this view in end-to-end tests.

    This disables the 'layout-only view removal' optimization for this view!

    androidaccessibilityComponentType?: AccessibilityComponentTypes #

    Indicates to accessibility services to treat UI component like a +native one. Works for Android only.

    Possible values are one of:

    • 'none'
    • 'button'
    • 'radiobutton_checked'
    • 'radiobutton_unchecked'

    androidaccessibilityLiveRegion?: enum('none', 'polite', 'assertive') #

    Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:

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

    See the Android View docs -for reference.

    androidcollapsable bool #

    Views that are only used to layout their children or otherwise don't draw +for reference.

    androidcollapsable?: bool #

    Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and -ensure that this View exists in the native view hierarchy.

    androidimportantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') #

    Controls how view is important for accessibility which is if it +ensure that this View exists in the native view hierarchy.

    androidimportantForAccessibility?: enum('auto', 'yes', 'no', 'no-hide-descendants') #

    Controls how view is important for accessibility which is if it fires accessibility events and if it is reported to accessibility services that query the screen. Works for Android only.

    Possible values:

    • 'auto' - The system determines whether the view is important for accessibility - default (recommended).
    • 'yes' - The view is important for accessibility.
    • 'no' - The view is not important for accessibility.
    • 'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views.

    See the Android importantForAccessibility docs -for reference.

    androidneedsOffscreenAlphaCompositing bool #

    Whether this View needs to rendered offscreen and composited with an alpha +for reference.

    androidneedsOffscreenAlphaCompositing?: bool #

    Whether this View needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior. The default (false) falls back to drawing the component and its children with an alpha applied to the paint used to draw each element instead of rendering the full @@ -98,19 +98,19 @@ animation, consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame). If that property is enabled, this View will be rendered off-screen once, saved in a hardware texture, and then composited onto the screen with an alpha -each frame without having to switch rendering targets on the GPU.

    androidrenderToHardwareTextureAndroid bool #

    Whether this View should render itself (and all of its children) into a +each frame without having to switch rendering targets on the GPU.

    androidrenderToHardwareTextureAndroid?: bool #

    Whether this View should render itself (and all of its children) into a single hardware texture on the GPU.

    On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the -interaction/animation.

    iosaccessibilityTraits AccessibilityTraits, [object Object] #

    Provides additional traits to screen reader. By default no traits are +interaction/animation.

    iosaccessibilityTraits?: [object Object], [object Object] #

    Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

    You can provide one trait or an array of many traits.

    Possible values for AccessibilityTraits are:

    • 'none' - The element has no traits.
    • 'button' - The element should be treated as a button.
    • 'link' - The element should be treated as a link.
    • 'header' - The element is a header that divides content into sections.
    • 'search' - The element should be treated as a search field.
    • 'image' - The element should be treated as an image.
    • 'selected' - The element is selected.
    • 'plays' - The element plays sound.
    • 'key' - The element should be treated like a keyboard key.
    • 'text' - The element should be treated as text.
    • 'summary' - The element provides app summary information.
    • 'disabled' - The element is disabled.
    • 'frequentUpdates' - The element frequently changes its value.
    • 'startsMedia' - The element starts a media session.
    • 'adjustable' - The element allows adjustment over a range of values.
    • 'allowsDirectInteraction' - The element allows direct touch interaction for VoiceOver users.
    • 'pageTurn' - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

    See the Accessibility guide -for more information.

    iosaccessibilityViewIsModal bool #

    A value indicating whether VoiceOver should ignore the elements +for more information.

    iosaccessibilityViewIsModal?: bool #

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

    See the Accessibility guide -for more information.

    iosshouldRasterizeIOS bool #

    Whether this View should be rendered as a bitmap before compositing.

    On iOS, this is useful for animations and interactions that do not +for more information.

    iosshouldRasterizeIOS?: bool #

    Whether this View should be rendered as a bitmap before compositing.

    On iOS, this is useful for animations and interactions that do not modify this component's dimensions nor its children; for example, when translating the position of a static view, rasterization allows the renderer to reuse a cached bitmap of a static view and quickly composite diff --git a/releases/next/docs/viewpagerandroid.html b/releases/next/docs/viewpagerandroid.html index 850cf31e6ff..a4c5c4da638 100644 --- a/releases/next/docs/viewpagerandroid.html +++ b/releases/next/docs/viewpagerandroid.html @@ -25,25 +25,25 @@ child.

    Example:

    render: 'center', padding: 20, } -}

    Props #

    View props... #

    initialPage number #

    Index of initial page that should be selected. Use setPage method to -update the page, and onPageSelected to monitor page changes

    keyboardDismissMode enum('none', 'on-drag') #

    Determines whether the keyboard gets dismissed in response to a drag. +}

    Props #

    View props... #

    initialPage?: number #

    Index of initial page that should be selected. Use setPage method to +update the page, and onPageSelected to monitor page changes

    keyboardDismissMode?: [object Object] | [object Object] #

    Determines whether the keyboard gets dismissed in response to a drag. - 'none' (the default), drags do not dismiss the keyboard. - - 'on-drag', the keyboard is dismissed when a drag begins.

    onPageScroll function #

    Executed when transitioning between pages (ether because of animation for + - 'on-drag', the keyboard is dismissed when a drag begins.

    onPageScroll?: Function #

    Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The event.nativeEvent object for this callback will carry following data: - position - index of first page from the left that is currently visible - offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is - visible, and x fraction of the next page is visible.

    onPageScrollStateChanged function #

    Function called when the page scrolling state has changed. + visible, and x fraction of the next page is visible.

    onPageScrollStateChanged?: Function #

    Function called when the page scrolling state has changed. The page scrolling state can be in 3 states: - idle, meaning there is no interaction with the page scroller happening at the time - dragging, meaning there is currently an interaction with the page scroller - settling, meaning that there was an interaction with the page scroller, and the - page scroller is now finishing it's closing or opening animation

    onPageSelected function #

    This callback will be called once ViewPager finish navigating to selected page + page scroller is now finishing it's closing or opening animation

    onPageSelected?: Function #

    This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The event.nativeEvent object passed to this callback will have following fields: - - position - index of page that has been selected

    pageMargin number #

    Blank space to show between pages. This is only visible while scrolling, pages are still -edge-to-edge.

    scrollEnabled bool #

    When false, the content does not scroll. + - position - index of page that has been selected

    pageMargin?: number #

    Blank space to show between pages. This is only visible while scrolling, pages are still +edge-to-edge.

    scrollEnabled?: boolean #

    When false, the content does not scroll. The default value is true.

    Type Definitions #

    ViewPagerScrollState #

    Type:
    $Enum

    Constants:
    ValueDescription
    idle
    dragging
    settling

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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); diff --git a/releases/next/docs/webview.html b/releases/next/docs/webview.html index 82f3c00bff0..27b36d97d1e 100644 --- a/releases/next/docs/webview.html +++ b/releases/next/docs/webview.html @@ -11,32 +11,32 @@ class MyWeb extends ); } }

    You can use this component to navigate back and forth in the web view's -history and configure various properties for the web content.

    Props #

    View props... #

    automaticallyAdjustContentInsets bool #

    Controls whether to adjust the content inset for web views that are +history and configure various properties for the web content.

    Props #

    View props... #

    automaticallyAdjustContentInsets?: bool #

    Controls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value -is true.

    contentInset {top: number, left: number, bottom: number, right: number} #

    The amount by which the web view content is inset from the edges of -the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.

    html string #

    Deprecated

    Use the source prop instead.

    injectedJavaScript string #

    Set this to provide JavaScript that will be injected into the web page -when the view loads.

    mediaPlaybackRequiresUserAction bool #

    Boolean that determines whether HTML5 audio and video requires the user -to tap them before they start playing. The default value is true.

    onError function #

    Function that is invoked when the WebView load fails.

    onLoad function #

    Function that is invoked when the WebView has finished loading.

    onLoadEnd function #

    Function that is invoked when the WebView load succeeds or fails.

    onLoadStart function #

    Function that is invoked when the WebView starts loading.

    onMessage function #

    A function that is invoked when the webview calls window.postMessage. +is true.

    contentInset?: {top: number, left: number, bottom: number, right: number} #

    The amount by which the web view content is inset from the edges of +the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.

    html?: string #

    Deprecated

    Use the source prop instead.

    injectedJavaScript?: string #

    Set this to provide JavaScript that will be injected into the web page +when the view loads.

    mediaPlaybackRequiresUserAction?: bool #

    Boolean that determines whether HTML5 audio and video requires the user +to tap them before they start playing. The default value is true.

    onError?: function #

    Function that is invoked when the WebView load fails.

    onLoad?: function #

    Function that is invoked when the WebView has finished loading.

    onLoadEnd?: function #

    Function that is invoked when the WebView load succeeds or fails.

    onLoadStart?: function #

    Function that is invoked when the WebView starts loading.

    onMessage?: function #

    A function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.

    window.postMessage accepts one argument, data, which will be available on the event object, event.nativeEvent.data. data -must be a string.

    onNavigationStateChange function #

    Function that is invoked when the WebView loading starts or ends.

    renderError function #

    Function that returns a view to show if there's an error.

    renderLoading function #

    Function that returns a loading indicator.

    scalesPageToFit bool #

    Boolean that controls whether the web content is scaled to fit +must be a string.

    onNavigationStateChange?: function #

    Function that is invoked when the WebView loading starts or ends.

    renderError?: function #

    Function that returns a view to show if there's an error.

    renderLoading?: function #

    Function that returns a loading indicator.

    scalesPageToFit?: bool #

    Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value -is true.

    source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number #

    Loads static html or a uri (with optional headers) in the WebView.

    startInLoadingState bool #

    Boolean value that forces the WebView to show the loading view -on the first load.

    style View#style #

    The style to apply to the WebView.

    url string #

    Deprecated

    Use the source prop instead.

    androiddomStorageEnabled bool #

    Boolean value to control whether DOM Storage is enabled. Used only in -Android.

    androidjavaScriptEnabled bool #

    Boolean value to enable JavaScript in the WebView. Used on Android only -as JavaScript is enabled by default on iOS. The default value is true.

    androiduserAgent string #

    Sets the user-agent for the WebView.

    iosallowsInlineMediaPlayback bool #

    Boolean that determines whether HTML5 videos play inline or use the +is true.

    source?: [object Object], [object Object], [object Object] #

    Loads static html or a uri (with optional headers) in the WebView.

    startInLoadingState?: bool #

    Boolean value that forces the WebView to show the loading view +on the first load.

    style?: [object Object] #

    The style to apply to the WebView.

    url?: string #

    Deprecated

    Use the source prop instead.

    androiddomStorageEnabled?: bool #

    Boolean value to control whether DOM Storage is enabled. Used only in +Android.

    androidjavaScriptEnabled?: bool #

    Boolean value to enable JavaScript in the WebView. Used on Android only +as JavaScript is enabled by default on iOS. The default value is true.

    androiduserAgent?: string #

    Sets the user-agent for the WebView.

    iosallowsInlineMediaPlayback?: bool #

    Boolean that determines whether HTML5 videos play inline or use the native full-screen controller. The default value is false.

    NOTE : In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML -document must also include the webkit-playsinline attribute.

    iosbounces bool #

    Boolean value that determines whether the web view bounces -when it reaches the edge of the content. The default value is true.

    iosdataDetectorTypes enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), [object Object] #

    Determines the types of data converted to clickable URLs in the web view’s content. -By default only phone numbers are detected.

    You can provide one type or an array of many types.

    Possible values for dataDetectorTypes are:

    • 'phoneNumber'
    • 'link'
    • 'address'
    • 'calendarEvent'
    • 'none'
    • 'all'

    iosdecelerationRate ScrollView.propTypes.decelerationRate #

    A floating-point number that determines how quickly the scroll view +document must also include the webkit-playsinline attribute.

    iosbounces?: bool #

    Boolean value that determines whether the web view bounces +when it reaches the edge of the content. The default value is true.

    iosdataDetectorTypes?: [object Object], [object Object] #

    Determines the types of data converted to clickable URLs in the web view’s content. +By default only phone numbers are detected.

    You can provide one type or an array of many types.

    Possible values for dataDetectorTypes are:

    • 'phoneNumber'
    • 'link'
    • 'address'
    • 'calendarEvent'
    • 'none'
    • 'all'

    iosdecelerationRate?: ScrollView.propTypes.decelerationRate #

    A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use the string shortcuts "normal" and "fast" which match the underlying iOS settings for UIScrollViewDecelerationRateNormal and -UIScrollViewDecelerationRateFast respectively:

    • normal: 0.998
    • fast: 0.99 (the default for iOS web view)

    iosonShouldStartLoadWithRequest function #

    Function that allows custom handling of any web view requests. Return +UIScrollViewDecelerationRateFast respectively:

    • normal: 0.998
    • fast: 0.99 (the default for iOS web view)

    iosonShouldStartLoadWithRequest?: function #

    Function that allows custom handling of any web view requests. Return true from the function to continue loading the request and false -to stop loading.

    iosscrollEnabled bool #

    Boolean value that determines whether scrolling is enabled in the +to stop loading.

    iosscrollEnabled?: bool #

    Boolean value that determines whether scrolling is enabled in the WebView. The default value is true.

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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); diff --git a/releases/next/img/AndroidAVDConfiguration.png b/releases/next/img/AndroidAVDConfiguration.png new file mode 100644 index 00000000000..ef5e3e8b25c Binary files /dev/null and b/releases/next/img/AndroidAVDConfiguration.png differ diff --git a/releases/next/img/AndroidSDKManager.png b/releases/next/img/AndroidSDKManager.png new file mode 100644 index 00000000000..eca03a0bfb6 Binary files /dev/null and b/releases/next/img/AndroidSDKManager.png differ diff --git a/releases/next/img/AndroidSuccess.png b/releases/next/img/AndroidSuccess.png new file mode 100644 index 00000000000..bd10f089756 Binary files /dev/null and b/releases/next/img/AndroidSuccess.png differ diff --git a/releases/next/img/XcodeCommandLineTools.png b/releases/next/img/XcodeCommandLineTools.png new file mode 100644 index 00000000000..e19d3a9f794 Binary files /dev/null and b/releases/next/img/XcodeCommandLineTools.png differ diff --git a/releases/next/img/iOSSuccess.png b/releases/next/img/iOSSuccess.png new file mode 100644 index 00000000000..457824f4ee5 Binary files /dev/null and b/releases/next/img/iOSSuccess.png differ