From 6a74a3d5aee8df77fae15c8550f2eab3a3ea369c Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Fri, 7 Jul 2017 22:07:14 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/activityindicator.html | 7 +- releases/next/docs/datepickerios.html | 4 +- releases/next/docs/direct-manipulation.html | 2 +- releases/next/docs/drawerlayoutandroid.html | 20 +- releases/next/docs/image.html | 29 +-- releases/next/docs/imagestyleproptypes.html | 2 +- releases/next/docs/keyboardavoidingview.html | 2 +- releases/next/docs/layout-props.html | 207 ++++-------------- releases/next/docs/listview.html | 26 +-- releases/next/docs/modal.html | 6 +- releases/next/docs/navigatorios.html | 136 +----------- releases/next/docs/pickerios.html | 2 +- releases/next/docs/progressbarandroid.html | 2 +- releases/next/docs/progressviewios.html | 2 +- releases/next/docs/refreshcontrol.html | 2 +- releases/next/docs/scrollview.html | 79 +++---- releases/next/docs/segmentedcontrolios.html | 10 +- releases/next/docs/shadow-props.html | 5 +- releases/next/docs/slider.html | 10 +- releases/next/docs/switch.html | 4 +- releases/next/docs/tabbarios-item.html | 28 +-- releases/next/docs/text.html | 43 +--- releases/next/docs/textinput.html | 96 ++------ releases/next/docs/textstyleproptypes.html | 31 +-- releases/next/docs/timers.html | 2 +- releases/next/docs/toolbarandroid.html | 17 +- releases/next/docs/touchablehighlight.html | 6 +- .../next/docs/touchablenativefeedback.html | 2 +- releases/next/docs/touchableopacity.html | 4 +- .../next/docs/touchablewithoutfeedback.html | 11 +- releases/next/docs/transforms.html | 17 +- releases/next/docs/view.html | 69 +++--- releases/next/docs/viewproptypes.html | 69 +++--- releases/next/docs/viewstyleproptypes.html | 2 +- releases/next/docs/webview.html | 75 ++----- versions.html | 4 +- 36 files changed, 261 insertions(+), 772 deletions(-) diff --git a/releases/next/docs/activityindicator.html b/releases/next/docs/activityindicator.html index 89381cfb262..57d91d5da7b 100644 --- a/releases/next/docs/activityindicator.html +++ b/releases/next/docs/activityindicator.html @@ -1,8 +1,5 @@ -ActivityIndicator
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Props #

ViewPropTypes props... #

animating?: PropTypes.bool #

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

color?: color #

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

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

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

ioshidesWhenStopped?: PropTypes.bool #

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

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

Next →
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Props #

ViewPropTypes props... #

animating?: bool #

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

color?: color #

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

size?: enum('small', 'large'), number #

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

ioshidesWhenStopped?: bool #

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

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

Next →
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ImageStylePropTypes #

Props #

backfaceVisibility?: ReactPropTypes.oneOf(['visible', 'hidden']) #

backgroundColor?: color #

borderBottomLeftRadius?: ReactPropTypes.number #

borderBottomRightRadius?: ReactPropTypes.number #

borderColor?: color #

borderRadius?: ReactPropTypes.number #

borderTopLeftRadius?: ReactPropTypes.number #

borderTopRightRadius?: ReactPropTypes.number #

borderWidth?: ReactPropTypes.number #

opacity?: ReactPropTypes.number #

overflow?: ReactPropTypes.oneOf(['visible', 'hidden']) #

resizeMode?: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) #

tintColor?: color #

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

androidoverlayColor?: ReactPropTypes.string #

When the image has rounded corners, specifying an overlayColor will +ImageStylePropTypes

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ImageStylePropTypes #

Props #

backfaceVisibility?: enum('visible', 'hidden') #

backgroundColor?: color #

borderBottomLeftRadius?: number #

borderBottomRightRadius?: number #

borderColor?: color #

borderRadius?: number #

borderTopLeftRadius?: number #

borderTopRightRadius?: number #

borderWidth?: number #

opacity?: number #

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

resizeMode?: Object.keys(ImageResizeMode) #

tintColor?: color #

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

androidoverlayColor?: string #

When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: diff --git a/releases/next/docs/keyboardavoidingview.html b/releases/next/docs/keyboardavoidingview.html index b658a5e6690..d5822ae410a 100644 --- a/releases/next/docs/keyboardavoidingview.html +++ b/releases/next/docs/keyboardavoidingview.html @@ -1,5 +1,5 @@ KeyboardAvoidingView

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 #

ViewPropTypes props... #

behavior?: PropTypes.oneOf(['height', 'position', 'padding']) #

contentContainerStyle?: ViewPropTypes.style #

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

keyboardVerticalOffset?: PropTypes.number.isRequired #

This is the distance between the top of the user screen and the react native view, +It can automatically adjust either its position or bottom padding based on the position of the keyboard.

Props #

ViewPropTypes props... #

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

contentContainerStyle?: ViewPropTypes.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: object): #

onKeyboardChange(event: object) #

onLayout(event: ViewLayoutEvent) #

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

Layout Props #

Props #

alignContent?: ReactPropTypes.oneOf([ - 'flex-start', - 'flex-end', - 'center', - 'stretch', - 'space-between', - 'space-around' -]) #

alignContent controls how 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 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?: ReactPropTypes.oneOf([ - '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?: ReactPropTypes.oneOf([ - '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?: ReactPropTypes.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?: ReactPropTypes.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?: ReactPropTypes.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?: ReactPropTypes.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?: ReactPropTypes.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?: ReactPropTypes.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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    bottom?: number, string #

    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?: ReactPropTypes.oneOf([ - 'none', - 'flex', -]) #

    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?: ReactPropTypes.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?: enum('none', 'flex') #

    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 @@ -63,151 +37,67 @@ 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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

    flexDirection?: ReactPropTypes.oneOf([ - '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?: number, string #

    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?: ReactPropTypes.number #

    flexShrink?: ReactPropTypes.number #

    flexWrap?: ReactPropTypes.oneOf([ - '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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

    height sets the height of this component.

    It works similarly to height in CSS, but in React Native you + 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 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?: ReactPropTypes.oneOf([ - '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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    left?: number, string #

    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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    margin?: number, string #

    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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    marginBottom?: number, string #

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

    marginHorizontal?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    marginLeft?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

    marginLeft works like margin-left in CSS. + 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. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left - for more details.

    marginRight?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    marginRight?: number, string #

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

    marginTop?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    marginTop?: number, string #

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

    marginVertical?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    maxHeight?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.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?: 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 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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.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?: 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 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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.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?: 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 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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.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?: 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 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?: ReactPropTypes.oneOf([ - '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 like overflow in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. overflow: visible only works on iOS. On Android, all views will clip - their children.

    padding?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

    Setting padding has the same effect as setting each of + their children.

    padding?: number, string #

    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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    paddingBottom?: number, string #

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

    paddingHorizontal?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    paddingLeft?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

    paddingLeft works like padding-left in CSS. +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. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left -for more details.

    paddingRight?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    paddingRight?: number, string #

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

    paddingTop?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    paddingTop?: number, string #

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

    paddingVertical?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    position?: ReactPropTypes.oneOf([ - 'absolute', - 'relative' -]) #

    position in React Native is similar to regular CSS, but +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 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 @@ -215,24 +105,15 @@ for more details.

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

    right?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    right?: number, string #

    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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.string, -]) #

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

    top?: number, string #

    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?: ReactPropTypes.oneOfType([ - ReactPropTypes.number, - ReactPropTypes.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?: number, string #

    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?: ReactPropTypes.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 @@ -240,11 +121,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?: ReactPropTypes.oneOf([ - '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/listview.html b/releases/next/docs/listview.html index 2f8b723476c..51364ebbe90 100644 --- a/releases/next/docs/listview.html +++ b/releases/next/docs/listview.html @@ -35,42 +35,42 @@ 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?: PropTypes.instanceOf(ListViewDataSource).isRequired #

    An instance of ListView.DataSource to use

    enableEmptySections?: PropTypes.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?: PropTypes.number.isRequired #

    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?: PropTypes.func #

    (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?: PropTypes.func #

    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?: PropTypes.number.isRequired #

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

    pageSize?: PropTypes.number.isRequired #

    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?: PropTypes.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?: PropTypes.func #

    () => 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?: PropTypes.func #

    renderRow?: PropTypes.func.isRequired #

    (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?: PropTypes.func.isRequired #

    (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?: PropTypes.func #

    (sectionData, sectionID) => renderable

    If provided, a header is rendered for this section.

    renderSeparator?: PropTypes.func #

    (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?: PropTypes.number.isRequired #

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

    stickyHeaderIndices?: PropTypes.arrayOf(PropTypes.number).isRequired #

    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.

    stickyHeaderIndices: [number] #

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

    stickySectionHeadersEnabled?: PropTypes.bool #

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

    stickySectionHeadersEnabled?: 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. This property is diff --git a/releases/next/docs/modal.html b/releases/next/docs/modal.html index a2d794c3334..e0692481e47 100644 --- a/releases/next/docs/modal.html +++ b/releases/next/docs/modal.html @@ -44,9 +44,9 @@ then consider using a top-level Navigator.

    </View> ); } -}

    Props #

    animated?: bool #

    Deprecated

    Use the animationType prop instead.

    animationType?: PropTypes.oneOf(['none', 'slide', 'fade']) #

    The animationType prop controls how the modal animates.

    • slide slides in from the bottom
    • fade fades into view
    • none appears without an animation

    Default is set to none.

    onShow?: PropTypes.func #

    The onShow prop allows passing a function that will be called once the modal has been shown.

    transparent?: PropTypes.bool #

    The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

    visible?: PropTypes.bool #

    The visible prop determines whether your modal is visible.

    androidhardwareAccelerated?: PropTypes.bool #

    The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.

    androidonRequestClose?: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

    The onRequestClose callback is called when the user taps the hardware back button.

    iosonOrientationChange?: PropTypes.func #

    The onOrientationChange callback is called when the orientation changes while the modal is being displayed. -The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.

    iospresentationStyle?: PropTypes.oneOf(['fullScreen', 'pageSheet', 'formSheet', 'overFullScreen']) #

    The presentationStyle prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). -See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.

    • fullScreen covers the screen completely
    • pageSheet covers portrait-width view centered (only on larger devices)
    • formSheet covers narrow-width view centered (only on larger devices)
    • overFullScreen covers the screen completely, but allows transparency

    Default is set to overFullScreen or fullScreen depending on transparent property.

    iossupportedOrientations?: PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'])) #

    The supportedOrientations prop allows the modal to be rotated to any of the specified orientations. +}

    Props #

    animated?: bool #

    Deprecated

    Use the animationType prop instead.

    animationType?: enum('none', 'slide', 'fade') #

    The animationType prop controls how the modal animates.

    • slide slides in from the bottom
    • fade fades into view
    • none appears without an animation

    Default is set to none.

    onShow?: function #

    The onShow prop allows passing a function that will be called once the modal has been shown.

    transparent?: bool #

    The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

    visible?: bool #

    The visible prop determines whether your modal is visible.

    androidhardwareAccelerated?: bool #

    The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.

    androidonRequestClose?: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

    The onRequestClose callback is called when the user taps the hardware back button.

    iosonOrientationChange?: function #

    The onOrientationChange callback is called when the orientation changes while the modal is being displayed. +The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.

    iospresentationStyle?: enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') #

    The presentationStyle prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). +See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.

    • fullScreen covers the screen completely
    • pageSheet covers portrait-width view centered (only on larger devices)
    • formSheet covers narrow-width view centered (only on larger devices)
    • overFullScreen covers the screen completely, but allows transparency

    Default is set to overFullScreen or fullScreen depending on transparent property.

    iossupportedOrientations?: [enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')] #

    The supportedOrientations prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. When using presentationStyle of pageSheet or formSheet, this property will be ignored by iOS.

    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 #

    ViewPropTypes props... #

    itemStyle?: itemStylePropType #

    onValueChange?: PropTypes.func #

    selectedValue?: PropTypes.any #

    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 #

    ViewPropTypes props... #

    itemStyle?: itemStylePropType #

    onValueChange?: function #

    selectedValue?: any #

    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 #

    ViewPropTypes props... #

    progress?: PropTypes.number #

    The progress value (between 0 and 1).

    progressImage?: Image.propTypes.source #

    A stretchable image to display as the progress bar.

    progressTintColor?: PropTypes.string #

    The tint color of the progress bar itself.

    progressViewStyle?: PropTypes.oneOf(['default', 'bar']) #

    The progress bar style.

    trackImage?: Image.propTypes.source #

    A stretchable image to display behind the progress bar.

    trackTintColor?: PropTypes.string #

    The tint color of the progress bar track.

    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 #

    ViewPropTypes 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!

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Shadow Props #

    Props #

    iosshadowColor?: color #

    Sets the drop shadow color

    iosshadowOffset?: ReactPropTypes.shape({ - width: ReactPropTypes.number, - height: ReactPropTypes.number, -}) #

    Sets the drop shadow offset

    iosshadowOpacity?: ReactPropTypes.number #

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

    iosshadowRadius?: ReactPropTypes.number #

    Sets the drop shadow blur radius

    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

    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!

    ← PrevNext →
    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 #

    ViewPropTypes props... #

    disabled?: PropTypes.bool #

    If true the user won't be able to move the slider. +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 #

    ViewPropTypes 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?: PropTypes.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?: PropTypes.number #

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

    onSlidingComplete?: PropTypes.func #

    Callback that is called when the user releases the slider, +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 that is called when the user releases the slider, regardless if the value has changed. The current value is passed -as an argument to the callback handler.

    onValueChange?: PropTypes.func #

    Callback continuously called while the user is dragging the slider.

    step?: PropTypes.number #

    Step value of the slider. The value should be +as an argument to the callback handler.

    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?: ViewPropTypes.style #

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

    testID?: PropTypes.string #

    Used to locate this view in UI automation tests.

    value?: PropTypes.number #

    Initial value of the slider. The value should be between minimumValue +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 diff --git a/releases/next/docs/switch.html b/releases/next/docs/switch.html index 79cbb7a348f..a7acf161aef 100644 --- a/releases/next/docs/switch.html +++ b/releases/next/docs/switch.html @@ -2,8 +2,8 @@ updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

    @keyword checkbox -@keyword toggle

    Props #

    ViewPropTypes props... #

    disabled?: PropTypes.bool #

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

    onTintColor?: color #

    Background color when the switch is turned on.

    onValueChange?: PropTypes.func #

    Invoked with the new value when the value changes.

    testID?: PropTypes.string #

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

    thumbTintColor?: color #

    Color of the foreground switch grip.

    tintColor?: color #

    Border color on iOS and background color on Android when the switch is turned off.

    value?: PropTypes.bool #

    The value of the switch. If true the switch will be turned on. +@keyword toggle

    Props #

    ViewPropTypes props... #

    disabled?: bool #

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

    onTintColor?: color #

    Background color when the switch is turned on.

    onValueChange?: function #

    Invoked with the new value when the value changes.

    testID?: string #

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

    thumbTintColor?: color #

    Color of the foreground switch grip.

    tintColor?: color #

    Border color on iOS and background color on Android when the switch is turned off.

    value?: bool #

    The value of the switch. If true the switch will be turned on. Default value is false.

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

    Props #

    ViewPropTypes props... #

    badge?: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.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?: PropTypes.func #

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

    renderAsOriginal?: PropTypes.bool #

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

    selected?: PropTypes.bool #

    It specifies whether the children are visible or not. If you see a +TabBarIOS.Item

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    TabBarIOS.Item #

    Props #

    ViewPropTypes 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?: ViewPropTypes.style #

    React style object.

    systemIcon?: PropTypes.oneOf([ - '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 +icon is defined. If left empty, the icon will be tinted in blue.

    style?: ViewPropTypes.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 using them, the title and selectedIcon will be overridden with the -system ones.

    title?: PropTypes.string #

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

    iosisTVSelectable?: PropTypes.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

    TextStylePropTypes #

    Props #

    color?: color #

    fontFamily?: ReactPropTypes.string #

    fontSize?: ReactPropTypes.number #

    fontStyle?: ReactPropTypes.oneOf(['normal', 'italic']) #

    fontWeight?: ReactPropTypes.oneOf( - ['normal' /*default*/, 'bold', - '100', '200', '300', '400', '500', '600', '700', '800', '900'] -) #

    Specifies font weight. The values 'normal' and 'bold' are supported for +TextStylePropTypes

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    TextStylePropTypes #

    Props #

    color?: color #

    fontFamily?: string #

    fontSize?: number #

    fontStyle?: enum('normal', 'italic') #

    fontWeight?: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') #

    Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, -in that case the closest one is chosen.

    lineHeight?: ReactPropTypes.number #

    textAlign?: ReactPropTypes.oneOf( - ['auto' /*default*/, 'left', 'right', 'center', 'justify'] -) #

    Specifies text alignment. The value 'justify' is only supported on iOS and -fallbacks to left on Android.

    textDecorationLine?: ReactPropTypes.oneOf( - ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] -) #

    textShadowColor?: color #

    textShadowOffset?: ReactPropTypes.shape( - {width: ReactPropTypes.number, height: ReactPropTypes.number} -) #

    textShadowRadius?: ReactPropTypes.number #

    androidincludeFontPadding?: ReactPropTypes.bool #

    Set to false to remove extra font padding intended to make space for certain ascenders / descenders. +in that case the closest one is chosen.

    lineHeight?: number #

    textAlign?: enum('auto', 'left', 'right', 'center', 'justify') #

    Specifies text alignment. The value 'justify' is only supported on iOS and +fallbacks to left on Android.

    textDecorationLine?: enum('none', 'underline', 'line-through', 'underline line-through') #

    textShadowColor?: color #

    textShadowOffset?: {width: number, height: number} #

    textShadowRadius?: number #

    androidincludeFontPadding?: bool #

    Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. -For best results also set textAlignVertical to center. Default is true.

    androidtextAlignVertical?: ReactPropTypes.oneOf( - ['auto' /*default*/, 'top', 'bottom', 'center'] -) #

    iosfontVariant?: ReactPropTypes.arrayOf( - ReactPropTypes.oneOf([ - 'small-caps', - 'oldstyle-nums', - 'lining-nums', - 'tabular-nums', - 'proportional-nums', - ]) -) #

    iosletterSpacing?: ReactPropTypes.number #

    iostextDecorationColor?: color #

    iostextDecorationStyle?: ReactPropTypes.oneOf( - ['solid' /*default*/, 'double', 'dotted','dashed'] -) #

    ioswritingDirection?: ReactPropTypes.oneOf( - ['auto' /*default*/, 'ltr', 'rtl'] -) #

    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 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?: PropTypes.oneOf( - AccessibilityComponentTypes -) #

    accessibilityTraits?: PropTypes.oneOfType([ - PropTypes.oneOf(AccessibilityTraits), - PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)), -]) #

    accessible?: PropTypes.bool #

    delayLongPress?: PropTypes.number #

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

    delayPressIn?: PropTypes.number #

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

    delayPressOut?: PropTypes.number #

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

    disabled?: PropTypes.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?: AccessibilityComponentTypes #

    accessibilityTraits?: AccessibilityTraits, [AccessibilityTraits] #

    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?: PropTypes.func #

    Invoked on mount and layout changes with

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

    onLongPress?: PropTypes.func #

    onPress?: PropTypes.func #

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

    onPressIn?: PropTypes.func #

    onPressOut?: PropTypes.func #

    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 6cf9e617397..f42665b6e99 100644 --- a/releases/next/docs/transforms.html +++ b/releases/next/docs/transforms.html @@ -1,19 +1,4 @@ -Transforms

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Transforms #

    Props #

    decomposedMatrix?: DecomposedMatrixPropType #

    transform?: ReactPropTypes.arrayOf( - ReactPropTypes.oneOfType([ - ReactPropTypes.shape({perspective: ReactPropTypes.number}), - ReactPropTypes.shape({rotate: ReactPropTypes.string}), - ReactPropTypes.shape({rotateX: ReactPropTypes.string}), - ReactPropTypes.shape({rotateY: ReactPropTypes.string}), - ReactPropTypes.shape({rotateZ: ReactPropTypes.string}), - ReactPropTypes.shape({scale: ReactPropTypes.number}), - ReactPropTypes.shape({scaleX: ReactPropTypes.number}), - ReactPropTypes.shape({scaleY: ReactPropTypes.number}), - ReactPropTypes.shape({translateX: ReactPropTypes.number}), - ReactPropTypes.shape({translateY: ReactPropTypes.number}), - ReactPropTypes.shape({skewX: ReactPropTypes.string}), - ReactPropTypes.shape({skewY: ReactPropTypes.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?: [{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

    ViewPropTypes #

    Props #

    accessibilityLabel?: PropTypes.node #

    Overrides the text that's read by the screen reader when the user interacts +ViewPropTypes

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ViewPropTypes #

    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?: PropTypes.bool #

    When true, indicates that the view is an accessibility element. By default, +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.

    nativeID?: PropTypes.string #

    Used to locate this view from native classes.

    This disables the 'layout-only view removal' optimization for this view!

    onAccessibilityTap?: PropTypes.func #

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

    onLayout?: PropTypes.func #

    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.

    nativeID?: string #

    Used to locate this view from native classes.

    This disables the 'layout-only view removal' optimization for this view!

    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?: PropTypes.func #

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

    onMoveShouldSetResponder?: PropTypes.func #

    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?: PropTypes.func #

    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?: PropTypes.func #

    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?: PropTypes.func #

    The user is moving their finger.

    View.props.onResponderMove: (event) => {}, where event is a synthetic touch event as -described above.

    onResponderReject?: PropTypes.func #

    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?: PropTypes.func #

    Fired at the end of the touch.

    View.props.onResponderRelease: (event) => {}, where event is a synthetic touch event as -described above.

    onResponderTerminate?: PropTypes.func #

    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?: PropTypes.func #

    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?: PropTypes.func #

    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?: PropTypes.func #

    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?: PropTypes.oneOf([ - '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; @@ -51,33 +46,24 @@ 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?: PropTypes.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?: stylePropType #

    testID?: PropTypes.string #

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

    This disables the 'layout-only view removal' optimization for this view!

    androidaccessibilityComponentType?: PropTypes.oneOf(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?: PropTypes.oneOf([ - 'none', - 'polite', - 'assertive', -]) #

    Indicates to accessibility services whether the user should be notified +(or one of its superviews).

    style?: stylePropType #

    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?: PropTypes.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?: PropTypes.oneOf([ - '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?: PropTypes.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 @@ -91,22 +77,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?: PropTypes.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?: PropTypes.oneOfType([ - PropTypes.oneOf(AccessibilityTraits), - PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)), -]) #

    Provides additional traits to screen reader. By default no traits are +interaction/animation.

    iosaccessibilityTraits?: AccessibilityTraits, [AccessibilityTraits] #

    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?: PropTypes.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?: PropTypes.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/viewstyleproptypes.html b/releases/next/docs/viewstyleproptypes.html index 3e78b6c282d..53012e2b7a4 100644 --- a/releases/next/docs/viewstyleproptypes.html +++ b/releases/next/docs/viewstyleproptypes.html @@ -1,4 +1,4 @@ -ViewStylePropTypes

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ViewStylePropTypes #

    Props #

    backfaceVisibility?: ReactPropTypes.oneOf(['visible', 'hidden']) #

    backgroundColor?: color #

    borderBottomColor?: color #

    borderBottomLeftRadius?: ReactPropTypes.number #

    borderBottomRightRadius?: ReactPropTypes.number #

    borderBottomWidth?: ReactPropTypes.number #

    borderColor?: color #

    borderLeftColor?: color #

    borderLeftWidth?: ReactPropTypes.number #

    borderRadius?: ReactPropTypes.number #

    borderRightColor?: color #

    borderRightWidth?: ReactPropTypes.number #

    borderStyle?: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) #

    borderTopColor?: color #

    borderTopLeftRadius?: ReactPropTypes.number #

    borderTopRightRadius?: ReactPropTypes.number #

    borderTopWidth?: ReactPropTypes.number #

    borderWidth?: ReactPropTypes.number #

    opacity?: ReactPropTypes.number #

    androidelevation?: ReactPropTypes.number #

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

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ViewStylePropTypes #

    Props #

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

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

    ← PrevNext →
    React Native0.47

    React Native Versions

    React Native follows a monthly release train. Every month, a new branch created off master enters the Release Candidate phase, and the previous Release Candidate branch is released and considered stable.

    If you have an existing project that uses React Native, read the release notes to learn about new features and fixes. You can follow our guide to upgrade your app to the latest version.

    Current version (Stable)

    0.46DocumentationRelease Notes

    This is the version that is configured automatically when you create a new project using react-native init.

    Pre-release versions

    masterDocumentation
    0.47-RCDocumentationRelease Notes

    To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.

    Past versions

    0.45DocumentationRelease Notes
    0.44DocumentationRelease Notes
    0.43DocumentationRelease Notes
    0.42DocumentationRelease Notes
    0.41DocumentationRelease Notes
    0.40DocumentationRelease Notes
    0.39DocumentationRelease Notes
    0.38DocumentationRelease Notes
    0.37DocumentationRelease Notes
    0.36DocumentationRelease Notes
    0.35DocumentationRelease Notes
    0.34DocumentationRelease Notes
    0.33DocumentationRelease Notes
    0.32DocumentationRelease Notes
    0.31DocumentationRelease Notes
    0.30DocumentationRelease Notes
    0.29DocumentationRelease Notes
    0.28DocumentationRelease Notes
    0.27DocumentationRelease Notes
    0.26DocumentationRelease Notes
    0.25DocumentationRelease Notes
    0.24DocumentationRelease Notes
    0.23DocumentationRelease Notes
    0.22DocumentationRelease Notes
    0.21DocumentationRelease Notes
    0.20DocumentationRelease Notes
    0.19DocumentationRelease Notes
    0.18DocumentationRelease Notes

    You can find past versions of React Native on GitHub. The release notes can be useful if you would like to learn when a specific feature or fix was released.

    You can also view the docs for a particular version of React Native by clicking on the Docs link next to the release in this page. You can come back to this page and switch the version of the docs you're reading at any time by clicking on the version number at the top of the page.

    React Nativenext

    React Native Versions

    React Native follows a monthly release train. Every month, a new branch created off master enters the Release Candidate phase, and the previous Release Candidate branch is released and considered stable.

    If you have an existing project that uses React Native, read the release notes to learn about new features and fixes. You can follow our guide to upgrade your app to the latest version.

    Current version (Stable)

    0.46DocumentationRelease Notes

    This is the version that is configured automatically when you create a new project using react-native init.

    Pre-release versions

    masterDocumentation
    0.47-RCDocumentationRelease Notes

    To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.

    Past versions

    0.45DocumentationRelease Notes
    0.44DocumentationRelease Notes
    0.43DocumentationRelease Notes
    0.42DocumentationRelease Notes
    0.41DocumentationRelease Notes
    0.40DocumentationRelease Notes
    0.39DocumentationRelease Notes
    0.38DocumentationRelease Notes
    0.37DocumentationRelease Notes
    0.36DocumentationRelease Notes
    0.35DocumentationRelease Notes
    0.34DocumentationRelease Notes
    0.33DocumentationRelease Notes
    0.32DocumentationRelease Notes
    0.31DocumentationRelease Notes
    0.30DocumentationRelease Notes
    0.29DocumentationRelease Notes
    0.28DocumentationRelease Notes
    0.27DocumentationRelease Notes
    0.26DocumentationRelease Notes
    0.25DocumentationRelease Notes
    0.24DocumentationRelease Notes
    0.23DocumentationRelease Notes
    0.22DocumentationRelease Notes
    0.21DocumentationRelease Notes
    0.20DocumentationRelease Notes
    0.19DocumentationRelease Notes
    0.18DocumentationRelease Notes

    You can find past versions of React Native on GitHub. The release notes can be useful if you would like to learn when a specific feature or fix was released.

    You can also view the docs for a particular version of React Native by clicking on the Docs link next to the release in this page. You can come back to this page and switch the version of the docs you're reading at any time by clicking on the version number at the top of the page.

    \ No newline at end of file