diff --git a/docs/image.html b/docs/image.html index 67f08f73972..f354a68bc1c 100644 --- a/docs/image.html +++ b/docs/image.html @@ -21,7 +21,7 @@ rounded buttons, shadows, and other resizable assets. More info on network.

resizeMode enum('cover', 'contain', 'stretch') #

Determines how to resize the image when the frame doesn't match the raw image dimensions.

source {uri: string} #

uri is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image -resource (which should be wrapped in the required('image!name') function).

style style #

Flexbox...
backgroundColor string
borderColor string
borderRadius number
borderWidth number
opacity number
resizeMode Object.keys(ImageResizeMode)
tintColor string

testID string #

A unique identifier for this element to be used in UI Automation +resource (which should be wrapped in the required('image!name') function).

style style #

Flexbox...
TransformPropTypes#style...
backgroundColor string
borderColor string
borderRadius number
borderWidth number
opacity number
resizeMode Object.keys(ImageResizeMode)
tintColor string

testID string #

A unique identifier for this element to be used in UI Automation testing scripts.

Edit on GitHubDescription #

Displaying images is a fascinating subject; React Native uses some cool tricks to make it a better experience.

No Automatic Sizing #

If you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.

In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.

Background Image via Nesting #

A common feature request from developers familiar with the web is background-image. To handle this use case, simply create a normal <Image> component and add whatever children to it you would like to layer on top of it.

return ( <Image source={...}> <Text>Inside</Text> diff --git a/docs/navigator.html b/docs/navigator.html index 367d936930f..580b241b984 100644 --- a/docs/navigator.html +++ b/docs/navigator.html @@ -41,10 +41,12 @@ deepest active navigator.

Navigation context objects contain the following route. All scenes after it will be unmounted

  • popToTop() - Pop to the first scene in the stack, unmounting every other scene

    • Edit on GitHubProps #

    configureScene function #

    Optional function that allows configuration about scene animations and gestures. Will be invoked with the route and should return a scene -configuration object

    (route) => Navigator.SceneConfigs.FloatFromRight

    initialRoute object #

    Provide a single "route" to start on. A route is an arbitrary object -that the navigator will use to identify each scene before rendering. -Either initialRoute or initialRouteStack is required.

    initialRouteStack [object] #

    Provide a set of routes to initially mount the scenes for. Required if no -initialRoute is provided

    navigationBar node #

    Optionally provide a navigation bar that persists across scene +configuration object

    (route) => Navigator.SceneConfigs.FloatFromRight

    initialRoute object #

    Specify a route to start on. A route is an object that the navigator +will use to identify each scene to render. initialRoute must be +a route in the initialRouteStack if both props are provided. The +initialRoute will default to the last item in the initialRouteStack.

    initialRouteStack [object] #

    Provide a set of routes to initially mount. Required if no initialRoute +is provided. Otherwise, it will default to an array containing only the +initialRoute

    navigationBar node #

    Optionally provide a navigation bar that persists across scene transitions

    navigator object #

    Optionally provide the navigator object from a parent Navigator

    onDidFocus function #

    Will be called with the new route of each scene after the transition is complete or after the initial mounting

    onItemRef function #

    Will be called with (ref, indexInStack) when the scene ref changes

    onWillFocus function #

    Will emit the target route upon mounting and before each nav transition

    renderScene function #

    Required function which renders the scene for a given route. Will be invoked with the route and the navigator object

    (route, navigator) => diff --git a/docs/scrollview.html b/docs/scrollview.html index 33872e7e632..03060e1f75e 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -46,7 +46,7 @@ The default value is true.

    style style #

    Flexbox...
    backgroundColor string
    borderBottomColor string
    borderColor string
    borderLeftColor string
    borderRadius number
    borderRightColor string
    borderTopColor string
    opacity number
    overflow enum('visible', 'hidden')
    shadowColor string
    shadowOffset {width: number, height: number}
    shadowOpacity number
    shadowRadius number
    transform [object]
    transformMatrix [number]

    zoomScale number #

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

    Edit on GitHubExamples #

    'use strict'; +with horizontal={true}.

    style style #

    Flexbox...
    TransformPropTypes#style...
    backgroundColor string
    borderBottomColor string
    borderColor string
    borderLeftColor string
    borderRadius number
    borderRightColor string
    borderTopColor string
    opacity number
    overflow enum('visible', 'hidden')
    shadowColor string
    shadowOffset {width: number, height: number}
    shadowOpacity number
    shadowRadius number

    zoomScale number #

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

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/view.html b/docs/view.html index 7c5f836da85..b7bed078996 100644 --- a/docs/view.html +++ b/docs/view.html @@ -41,7 +41,7 @@ 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.

    style style #

    Flexbox...
    backgroundColor string
    borderBottomColor string
    borderColor string
    borderLeftColor string
    borderRadius number
    borderRightColor string
    borderTopColor string
    opacity number
    overflow enum('visible', 'hidden')
    shadowColor string
    shadowOffset {width: number, height: number}
    shadowOpacity number
    shadowRadius number
    transform [object]
    transformMatrix [number]

    testID string #

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

    Edit on GitHubExamples #

    'use strict'; +interaction/animation.

    style style #

    Flexbox...
    TransformPropTypes#style...
    backgroundColor string
    borderBottomColor string
    borderColor string
    borderLeftColor string
    borderRadius number
    borderRightColor string
    borderTopColor string
    opacity number
    overflow enum('visible', 'hidden')
    shadowColor string
    shadowOffset {width: number, height: number}
    shadowOpacity number
    shadowRadius number

    testID string #

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

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var {