diff --git a/releases/next/docs/activityindicator.html b/releases/next/docs/activityindicator.html index 980634d2b7d..d62c7bbd57a 100644 --- a/releases/next/docs/activityindicator.html +++ b/releases/next/docs/activityindicator.html @@ -1,5 +1,8 @@ -ActivityIndicator – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicator #

Edit on GitHub

Displays a circular loading indicator.

Props #

View props... #

animating bool #

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

color color #

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

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36. -Other sizes can be obtained using a scale transform.

ioshidesWhenStopped bool #

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

Examples #

Edit on GitHub
'use strict'; +ActivityIndicator – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicator #

Edit on GitHub

Displays a circular loading indicator.

Props #

View 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.oneOf([ + 'small', + 'large', +]) #

Size of the indicator. Small has a height of 20, large has a height of 36. +Other sizes can be obtained using a scale transform.

ioshidesWhenStopped PropTypes.bool #

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

Examples #

Edit on GitHub
'use strict'; const React = require('react'); const ReactNative = require('react-native'); diff --git a/releases/next/docs/datepickerios.html b/releases/next/docs/datepickerios.html index 8d76815940b..35df7e3e29e 100644 --- a/releases/next/docs/datepickerios.html +++ b/releases/next/docs/datepickerios.html @@ -2,9 +2,9 @@ a controlled component, so you must hook in to the onDateChange callback and update the date prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.date as the -source of truth.

Props #

View props... #

date Date #

The currently selected date.

maximumDate Date #

Maximum date.

Restricts the range of possible date/time values.

minimumDate Date #

Minimum date.

Restricts the range of possible date/time values.

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

The interval at which minutes can be selected.

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

The date picker mode.

onDateChange function #

Date change handler.

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

Props #

View props... #

date PropTypes.instanceOf(Date).isRequired #

The currently selected date.

maximumDate PropTypes.instanceOf(Date) #

Maximum date.

Restricts the range of possible date/time values.

minimumDate PropTypes.instanceOf(Date) #

Minimum date.

Restricts the range of possible date/time values.

minuteInterval PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]) #

The interval at which minutes can be selected.

mode PropTypes.oneOf(['date', 'time', 'datetime']) #

The date picker mode.

onDateChange PropTypes.func.isRequired #

Date change handler.

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

timeZoneOffsetInMinutes number #

Timezone offset in minutes.

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

timeZoneOffsetInMinutes PropTypes.number #

Timezone offset in minutes.

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

Examples #

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

Example:

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

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

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

drawerLockMode ReactPropTypes.oneOf([ + 'unlocked', + 'locked-closed', + 'locked-open' +]) #

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

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

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

drawerWidth number #

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

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

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

drawerPosition ReactPropTypes.oneOf([ + DrawerConsts.DrawerPosition.Left, + DrawerConsts.DrawerPosition.Right +]) #

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

drawerWidth ReactPropTypes.number #

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

keyboardDismissMode ReactPropTypes.oneOf([ + 'none', // default + 'on-drag', +]) #

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

onDrawerClose function #

Function called whenever the navigation view has been closed.

onDrawerOpen function #

Function called whenever the navigation view has been opened.

onDrawerSlide function #

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

onDrawerStateChanged function #

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

onDrawerClose ReactPropTypes.func #

Function called whenever the navigation view has been closed.

onDrawerOpen ReactPropTypes.func #

Function called whenever the navigation view has been opened.

onDrawerSlide ReactPropTypes.func #

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

onDrawerStateChanged ReactPropTypes.func #

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

renderNavigationView function #

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

statusBarBackgroundColor color #

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

renderNavigationView ReactPropTypes.func.isRequired #

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

statusBarBackgroundColor color #

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

Methods #

openDrawer(0) #

Opens the drawer.

closeDrawer(0) #

Closes the drawer.

Next →
© 2016 Facebook Inc.
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Layout Props #

Edit on GitHub

Props #

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

alignItems aligns children in the cross direction. +Layout Props – React Native | A framework for building native apps using React

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Layout Props #

Edit on GitHub

Props #

alignItems ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) #

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, except the default value is stretch instead of flex-start. See https://css-tricks.com/almanac/properties/a/align-items/ - for more detail.

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

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

alignSelf ReactPropTypes.oneOf([ + 'auto', + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) #

alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS. See https://css-tricks.com/almanac/properties/a/align-self/ - for more detail.

borderBottomWidth number #

borderBottomWidth works like border-bottom-width in CSS. + for more detail.

borderBottomWidth ReactPropTypes.number #

borderBottomWidth works like border-bottom-width in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp -for more details.

borderLeftWidth number #

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

borderLeftWidth ReactPropTypes.number #

borderLeftWidth works like border-left-width in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp -for more details.

borderRightWidth number #

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

borderRightWidth ReactPropTypes.number #

borderRightWidth works like border-right-width in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp -for more details.

borderTopWidth number #

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

borderTopWidth ReactPropTypes.number #

borderTopWidth works like border-top-width in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp -for more details.

borderWidth number #

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

borderWidth ReactPropTypes.number #

borderWidth works like border-width in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp -for more details.

bottom number #

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

bottom ReactPropTypes.number #

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 logical pixel units, rather than percents, ems, or any of that.

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

flex number #

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

flex ReactPropTypes.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 css-layout library at https://github.com/facebook/css-layout .

When flex is a positive number, it makes the component flexible @@ -30,59 +41,76 @@ 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.

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

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

flexDirection ReactPropTypes.oneOf([ + '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://css-tricks.com/almanac/properties/f/flex-direction/ - for more detail.

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

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

flexWrap ReactPropTypes.oneOf([ + '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. See https://css-tricks.com/almanac/properties/f/flex-wrap/ - for more detail.

height number #

height sets the height of this component.

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

height ReactPropTypes.number #

height sets the height of this component.

It works similarly to height in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - See http://www.w3schools.com/cssref/pr_dim_width.asp for more details.

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

justifyContent aligns children in the main direction. + See http://www.w3schools.com/cssref/pr_dim_width.asp for more details.

justifyContent ReactPropTypes.oneOf([ + '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. See https://css-tricks.com/almanac/properties/j/justify-content/ - for more detail.

left number #

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

left ReactPropTypes.number #

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 logical pixel units, rather than percents, ems, or any of that.

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

margin number #

Setting margin has the same effect as setting each of - marginTop, marginLeft, marginBottom, and marginRight.

marginBottom number #

marginBottom works like margin-bottom in CSS. + for more details of how left affects layout.

margin ReactPropTypes.number #

Setting margin has the same effect as setting each of + marginTop, marginLeft, marginBottom, and marginRight.

marginBottom ReactPropTypes.number #

marginBottom works like margin-bottom in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp - for more details.

marginHorizontal number #

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

marginLeft number #

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

marginHorizontal ReactPropTypes.number #

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

marginLeft ReactPropTypes.number #

marginLeft works like margin-left in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp - for more details.

marginRight number #

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

marginRight ReactPropTypes.number #

marginRight works like margin-right in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp - for more details.

marginTop number #

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

marginTop ReactPropTypes.number #

marginTop works like margin-top in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp - for more details.

marginVertical number #

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

maxHeight number #

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

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

maxHeight ReactPropTypes.number #

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 logical pixel units, rather than percents, ems, or any of that.

See http://www.w3schools.com/cssref/pr_dim_max-height.asp - for more details.

maxWidth number #

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

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 logical pixel units, rather than percents, ems, or any of that.

See http://www.w3schools.com/cssref/pr_dim_max-width.asp - for more details.

minHeight number #

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

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 logical pixel units, rather than percents, ems, or any of that.

See http://www.w3schools.com/cssref/pr_dim_min-height.asp - for more details.

minWidth number #

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

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 logical pixel units, rather than percents, ems, or any of that.

See http://www.w3schools.com/cssref/pr_dim_min-width.asp - for more details.

padding number #

padding works like padding in CSS. + for more details.

padding ReactPropTypes.number #

padding works like padding in CSS. It's like setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight to the same thing. See http://www.w3schools.com/css/css_padding.asp - for more details.

paddingBottom number #

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

paddingBottom ReactPropTypes.number #

paddingBottom works like padding-bottom in CSS. See http://www.w3schools.com/cssref/pr_padding-bottom.asp -for more details.

paddingHorizontal number #

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

paddingLeft number #

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

paddingHorizontal ReactPropTypes.number #

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

paddingLeft ReactPropTypes.number #

paddingLeft works like padding-left in CSS. See http://www.w3schools.com/cssref/pr_padding-left.asp -for more details.

paddingRight number #

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

paddingRight ReactPropTypes.number #

paddingRight works like padding-right in CSS. See http://www.w3schools.com/cssref/pr_padding-right.asp -for more details.

paddingTop number #

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

paddingTop ReactPropTypes.number #

paddingTop works like padding-top in CSS. See http://www.w3schools.com/cssref/pr_padding-top.asp -for more details.

paddingVertical number #

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

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

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

paddingVertical ReactPropTypes.number #

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 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 @@ -90,15 +118,15 @@ for more details.

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

right number #

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

right ReactPropTypes.number #

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 logical pixel units, rather than percents, ems, or any of that.

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

top number #

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

top ReactPropTypes.number #

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 logical pixel units, rather than percents, ems, or any of that.

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

width number #

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

width sets the width of this component.

It works similarly to width in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. - See http://www.w3schools.com/cssref/pr_dim_width.asp for more details.

zIndex number #

zIndex controls which components display on top of others. + See http://www.w3schools.com/cssref/pr_dim_width.asp for more details.

zIndex ReactPropTypes.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 diff --git a/releases/next/docs/mapview.html b/releases/next/docs/mapview.html index a22561c7a27..28aa662a8cf 100644 --- a/releases/next/docs/mapview.html +++ b/releases/next/docs/mapview.html @@ -28,14 +28,14 @@ class MapMyRide extends #

Map annotations with title and subtitle.

followUserLocation bool #

If true the map will follow the user's location whenever it changes. Note that this has no effect unless showsUserLocation is enabled. Default value is true.

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

Insets for the map's legal label, originally at bottom left of the map.

mapType enum('standard', 'satellite', 'hybrid') #

The map type to be displayed.

  • standard: Standard road map (default).
  • satellite: Satellite view.
  • hybrid: Satellite view with roads and points of interest overlaid.

maxDelta number #

Maximum size of the area that can be displayed.

minDelta number #

Minimum size of the area that can be displayed.

onAnnotationPress function #

Deprecated. Use annotation onFocus and onBlur instead.

onRegionChange function #

Callback that is called continuously when the user is dragging the map.

onRegionChangeComplete function #

Callback that is called once, when the user is done moving the map.

overlays [{coordinates: [object Object], lineWidth: number, strokeColor: [object Object], fillColor: [object Object], id: string}] #

Map overlays

pitchEnabled bool #

When this property is set to true and a valid camera is associated -with the map, the camera’s pitch angle is used to tilt the plane -of the map.

When this property is set to false, the camera’s pitch +with the map, the camera's pitch angle is used to tilt the plane +of the map.

When this property is set to false, the camera's pitch angle is ignored and the map is always displayed as if the user is looking straight down onto it.

region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} #

The region to be displayed by the map.

The region is defined by the center coordinates and the span of coordinates to display.

rotateEnabled bool #

When this property is set to true and a valid camera is associated with -the map, the camera’s heading angle is used to rotate the plane of the +the map, the camera's heading angle is used to rotate the plane of the map around its center point.

When this property is set to false, the -camera’s heading angle is ignored and the map is always oriented so +camera's heading angle is ignored and the map is always oriented so that true north is situated at the top of the map view

scrollEnabled bool #

If false the user won't be able to change the map region being displayed. Default value is true.

showsCompass bool #

If false, compass won't be displayed on the map. Default value is true.

showsPointsOfInterest bool #

If false points of interest won't be displayed on the map. diff --git a/releases/next/docs/modal.html b/releases/next/docs/modal.html index c1be0ba370e..ef4501cbf55 100644 --- a/releases/next/docs/modal.html +++ b/releases/next/docs/modal.html @@ -45,7 +45,7 @@ class ModalExample extends /View> ); } -}

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

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

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

On the Android platform, this is a required function.

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.

Examples #

Edit on GitHub
'use strict'; +}

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

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

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

On the Android platform, this is a required function.

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.

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); diff --git a/releases/next/docs/progressbarandroid.html b/releases/next/docs/progressbarandroid.html index 45d74f3ee51..b8e8ea6a380 100644 --- a/releases/next/docs/progressbarandroid.html +++ b/releases/next/docs/progressbarandroid.html @@ -13,7 +13,7 @@ that the app is loading or there is some activity in the app.

Example:

/> ); },

Props #

View props... #

color color #

Color of the progress bar.

indeterminate indeterminateType #

If the progress bar will show indeterminate progress. Note that this -can only be false if styleAttr is Horizontal.

progress number #

The progress value (between 0 and 1).

styleAttr STYLE_ATTRIBUTES #

Style of the ProgressBar. One of:

  • Horizontal
  • Normal (default)
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

testID string #

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

Examples #

Edit on GitHub
'use strict'; +can only be false if styleAttr is Horizontal.

progress ReactPropTypes.number #

The progress value (between 0 and 1).

styleAttr ReactPropTypes.oneOf(STYLE_ATTRIBUTES) #

Style of the ProgressBar. One of:

  • Horizontal
  • Normal (default)
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

testID ReactPropTypes.string #

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

Examples #

Edit on GitHub
'use strict'; var ProgressBar = require('ProgressBarAndroid'); var React = require('React'); diff --git a/releases/next/docs/progressviewios.html b/releases/next/docs/progressviewios.html index 266c32a0623..23f652d2839 100644 --- a/releases/next/docs/progressviewios.html +++ b/releases/next/docs/progressviewios.html @@ -1,4 +1,4 @@ -ProgressViewIOS – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ProgressViewIOS #

Edit on GitHub

Use ProgressViewIOS to render a UIProgressView on iOS.

Props #

View props... #

progress number #

The progress value (between 0 and 1).

progressImage Image.propTypes.source #

A stretchable image to display as the progress bar.

progressTintColor string #

The tint color of the progress bar itself.

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

The progress bar style.

trackImage Image.propTypes.source #

A stretchable image to display behind the progress bar.

trackTintColor string #

The tint color of the progress bar track.

Examples #

Edit on GitHub
'use strict'; +ProgressViewIOS – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ProgressViewIOS #

Edit on GitHub

Use ProgressViewIOS to render a UIProgressView on iOS.

Props #

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

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); diff --git a/releases/next/docs/scrollview.html b/releases/next/docs/scrollview.html index 5929651972f..82e5527f190 100644 --- a/releases/next/docs/scrollview.html +++ b/releases/next/docs/scrollview.html @@ -34,7 +34,7 @@ functionality for the ScrollView.

See hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true.

scrollEnabled bool #

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

showsHorizontalScrollIndicator bool #

When true, shows a horizontal scroll indicator.

showsVerticalScrollIndicator bool #

When true, shows a vertical scroll indicator.

style style #

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

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

showsHorizontalScrollIndicator bool #

When true, shows a horizontal scroll indicator.

showsVerticalScrollIndicator bool #

When true, shows a vertical scroll indicator.

style style #

Flexbox...
ShadowPropTypesIOS#style...
Transforms...
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
overflow ReactPropTypes.oneOf(['visible', 'hidden'])
androidelevation ReactPropTypes.number

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

androidendFillColor color #

Sometimes a scrollview takes up more space than its content fills. When this is diff --git a/releases/next/docs/segmentedcontrolios.html b/releases/next/docs/segmentedcontrolios.html index 5c85155c163..17838b5aaf6 100644 --- a/releases/next/docs/segmentedcontrolios.html +++ b/releases/next/docs/segmentedcontrolios.html @@ -7,11 +7,11 @@ selects a value and changes the index, as shown in the example below.

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

Props #

View props... #

enabled bool #

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

momentary bool #

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

onChange function #

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

onValueChange function #

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

selectedIndex number #

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

tintColor string #

Accent color of the control.

values [string] #

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

Examples #

Edit on GitHub
'use strict'; +/>

Props #

View props... #

enabled PropTypes.bool #

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

momentary PropTypes.bool #

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

onChange PropTypes.func #

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

onValueChange PropTypes.func #

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

selectedIndex PropTypes.number #

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

tintColor PropTypes.string #

Accent color of the control.

values PropTypes.arrayOf(PropTypes.string) #

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

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); diff --git a/releases/next/docs/shadow-props.html b/releases/next/docs/shadow-props.html index 6a7ca4e8e21..8a35fac0052 100644 --- a/releases/next/docs/shadow-props.html +++ b/releases/next/docs/shadow-props.html @@ -1,4 +1,6 @@ -Shadow Props – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Shadow Props #

Edit on GitHub

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

© 2016 Facebook Inc.
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Shadow Props #

Edit on GitHub

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

© 2016 Facebook Inc.
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Slider #

Edit on GitHub

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

Props #

View props... #

disabled bool #

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

maximumValue number #

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

minimumValue number #

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

onSlidingComplete function #

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

onValueChange function #

Callback continuously called while the user is dragging the slider.

step number #

Step value of the slider. The value should be +Slider – React Native | A framework for building native apps using React

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Slider #

Edit on GitHub

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

Props #

View props... #

disabled PropTypes.bool #

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

maximumValue PropTypes.number #

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

minimumValue PropTypes.number #

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

onSlidingComplete PropTypes.func #

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

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 between 0 and (maximumValue - minimumValue). Default value is 0.

style View#style #

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

testID string #

Used to locate this view in UI automation tests.

value number #

Initial value of the slider. The value should be between minimumValue +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 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.

iosmaximumTrackImage Image.propTypes.source #

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

iosmaximumTrackTintColor string #

The color used for the track to the right of the button. Overrides the +leftmost pixel of the image will be stretched to fill the track.

iosmaximumTrackTintColor PropTypes.string #

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

iosminimumTrackImage Image.propTypes.source #

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

iosminimumTrackTintColor string #

The color used for the track to the left of the button. Overrides the +rightmost pixel of the image will be stretched to fill the track.

iosminimumTrackTintColor PropTypes.string #

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

iosthumbImage Image.propTypes.source #

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

iostrackImage Image.propTypes.source #

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

Examples #

Edit on GitHub
'use strict'; diff --git a/releases/next/docs/sliderios.html b/releases/next/docs/sliderios.html index 9944640db48..079df7555ab 100644 --- a/releases/next/docs/sliderios.html +++ b/releases/next/docs/sliderios.html @@ -1,15 +1,15 @@ SliderIOS – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

SliderIOS #

Edit on GitHub

Note: SliderIOS is deprecated and will be removed in the future. Use the cross-platform -Slider as a drop-in replacement with the same API.

An iOS-specific component used to select a single value from a range of values.

Props #

View props... #

disabled bool #

If true the user won't be able to move the slider. +Slider as a drop-in replacement with the same API.

An iOS-specific component used to select a single value from a range of values.

Props #

View props... #

disabled PropTypes.bool #

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

maximumTrackImage Image.propTypes.source #

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

maximumTrackTintColor string #

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

maximumValue number #

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

minimumTrackImage Image.propTypes.source #

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

minimumTrackTintColor string #

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

minimumValue number #

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

onSlidingComplete function #

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

onValueChange function #

Callback continuously called while the user is dragging the slider.

step number #

Step value of the slider. The value should be +leftmost pixel of the image will be stretched to fill the track.

maximumTrackTintColor PropTypes.string #

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

maximumValue PropTypes.number #

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

minimumTrackImage Image.propTypes.source #

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

minimumTrackTintColor PropTypes.string #

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

minimumValue PropTypes.number #

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

onSlidingComplete PropTypes.func #

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

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 between 0 and (maximumValue - minimumValue). Default value is 0.

style View#style #

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

thumbImage Image.propTypes.source #

Sets an image for the thumb. It only supports static images.

trackImage Image.propTypes.source #

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

value number #

Initial value of the slider. The value should be between minimumValue +The center pixel of the image will be stretched to fill the track.

value PropTypes.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, e.g. if you don't update the value, the component won't be reset to its initial value.

Examples #

Edit on GitHub
'use strict'; diff --git a/releases/next/docs/text.html b/releases/next/docs/text.html index 36bca569827..8e8d27ae706 100644 --- a/releases/next/docs/text.html +++ b/releases/next/docs/text.html @@ -45,10 +45,25 @@ at the beginning of the line is indicated by an ellipsis glyph. e.g., "...w missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
  • tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
  • clip - Lines are not drawn past the edge of the text container.

    • The default is tail.

    numberOfLines must be set in conjunction with this prop.

    clip is working only for iOS

    numberOfLines number #

    Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines -does not exceed this number.

    This prop is commonly used with lineBreakMode.

    onLayout function #

    Invoked on mount and layout changes with

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

    onLongPress function #

    This function is called on long press.

    e.g., `onLongPress={this.increaseSize}>``

    onPress function #

    This function is called on press.

    e.g., `onPress={() => console.log('1st')}``

    style style #

    View#style...
    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 +does not exceed this number.

    This prop is commonly used with lineBreakMode.

    onLayout function #

    Invoked on mount and layout changes with

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

    onLongPress function #

    This function is called on long press.

    e.g., `onLongPress={this.increaseSize}>``

    onPress function #

    This function is called on press.

    e.g., `onPress={() => console.log('1st')}``

    style style #

    View#style...
    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 most fonts. Not all fonts have a variant for each of the numeric values, -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
    androidtextAlignVertical enum('auto', 'top', 'bottom', 'center')
    iosletterSpacing number
    iostextDecorationColor color
    iostextDecorationStyle enum('solid', 'double', 'dotted', 'dashed')
    ioswritingDirection enum('auto', 'ltr', 'rtl')

    testID string #

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

    androidselectable bool #

    Lets the user select text, to use the native copy and paste functionality.

    iosallowFontScaling bool #

    Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The +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
    androidtextAlignVertical ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +)
    iosletterSpacing ReactPropTypes.number
    iostextDecorationColor color
    iostextDecorationStyle ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +)
    ioswritingDirection ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +)

    testID string #

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

    androidselectable bool #

    Lets the user select text, to use the native copy and paste functionality.

    iosallowFontScaling bool #

    Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The default is true.

    iossuppressHighlighting bool #

    When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.

    Description #

    		Edit on GitHub

    Nested Text #

    Both iOS and Android allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (NSAttributedString on iOS, SpannableString on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.

    import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; diff --git a/releases/next/docs/textinput.html b/releases/next/docs/textinput.html index fba4843df50..e06037de2ec 100644 --- a/releases/next/docs/textinput.html +++ b/releases/next/docs/textinput.html @@ -81,30 +81,76 @@ has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting -underlineColorAndroid to transparent.

    Props #

    View props... #

    autoCapitalize enum('none', 'sentences', 'words', 'characters') #

    Can tell TextInput to automatically capitalize certain characters.

    • characters: all characters.
    • words: first letter of each word.
    • sentences: first letter of each sentence (default).
    • none: don't auto capitalize anything.

    autoCorrect bool #

    If false, disables auto-correct. The default value is true.

    autoFocus bool #

    If true, focuses the input on componentDidMount. -The default value is false.

    blurOnSubmit bool #

    If true, the text field will blur when submitted. +underlineColorAndroid to transparent.

    Props #

    View props... #

    autoCapitalize PropTypes.oneOf([ + 'none', + 'sentences', + 'words', + 'characters', +]) #

    Can tell TextInput to automatically capitalize certain characters.

    • characters: all characters.
    • words: first letter of each word.
    • sentences: first letter of each sentence (default).
    • none: don't auto capitalize anything.

    autoCorrect PropTypes.bool #

    If false, disables auto-correct. The default value is true.

    autoFocus PropTypes.bool #

    If true, focuses the input on componentDidMount. +The default value is false.

    blurOnSubmit PropTypes.bool #

    If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the -onSubmitEditing event instead of inserting a newline into the field.

    defaultValue string #

    Provides an initial value that will change when the user starts typing. +onSubmitEditing event instead of inserting a newline into the field.

    defaultValue PropTypes.string #

    Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening -to events and updating the value prop to keep the controlled state in sync.

    editable bool #

    If false, text is not editable. The default value is true.

    keyboardType enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') #

    Determines which keyboard to open, e.g.numeric.

    The following values work across platforms:

    • default
    • numeric
    • email-address
    • phone-pad

    maxLength number #

    Limits the maximum number of characters that can be entered. Use this -instead of implementing the logic in JS to avoid flicker.

    multiline bool #

    If true, the text input can be multiple lines. -The default value is false.

    onBlur function #

    Callback that is called when the text input is blurred.

    onChange function #

    Callback that is called when the text input's text changes.

    onChangeText function #

    Callback that is called when the text input's text changes. -Changed text is passed as an argument to the callback handler.

    onEndEditing function #

    Callback that is called when text input ends.

    onFocus function #

    Callback that is called when the text input is focused.

    onLayout function #

    Invoked on mount and layout changes with {x, y, width, height}.

    onSelectionChange function #

    Callback that is called when the text input selection is changed.

    onSubmitEditing function #

    Callback that is called when the text input's submit button is pressed. -Invalid if multiline={true} is specified.

    placeholder string #

    The string that will be rendered before text input has been entered.

    placeholderTextColor color #

    The text color of the placeholder string.

    returnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') #

    Determines how the return key should look. On Android you can also use -returnKeyLabel.

    Cross platform

    The following values work across platforms:

    • done
    • go
    • next
    • search
    • send

    Android Only

    The following values work on Android only:

    • none
    • previous

    iOS Only

    The following values work on iOS only:

    • default
    • emergency-call
    • google
    • join
    • route
    • yahoo

    secureTextEntry bool #

    If true, the text input obscures the text entered so that sensitive text -like passwords stay secure. The default value is false.

    selectTextOnFocus bool #

    If true, all text will automatically be selected on focus.

    selectionColor color #

    The highlight (and cursor on iOS) color of the text input.

    style Text#style #

    value string #

    The value to show for the text input. TextInput is a controlled +to events and updating the value prop to keep the controlled state in sync.

    editable PropTypes.bool #

    If false, text is not editable. The default value is true.

    keyboardType PropTypes.oneOf([ + // Cross-platform + 'default', + 'email-address', + 'numeric', + 'phone-pad', + // iOS-only + 'ascii-capable', + 'numbers-and-punctuation', + 'url', + 'number-pad', + 'name-phone-pad', + 'decimal-pad', + 'twitter', + 'web-search', +]) #

    Determines which keyboard to open, e.g.numeric.

    The following values work across platforms:

    • default
    • numeric
    • email-address
    • phone-pad

    maxLength PropTypes.number #

    Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker.

    multiline PropTypes.bool #

    If true, the text input can be multiple lines. +The default value is false.

    onBlur PropTypes.func #

    Callback that is called when the text input is blurred.

    onChange PropTypes.func #

    Callback that is called when the text input's text changes.

    onChangeText PropTypes.func #

    Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler.

    onEndEditing PropTypes.func #

    Callback that is called when text input ends.

    onFocus PropTypes.func #

    Callback that is called when the text input is focused.

    onLayout PropTypes.func #

    Invoked on mount and layout changes with {x, y, width, height}.

    onSelectionChange PropTypes.func #

    Callback that is called when the text input selection is changed.

    onSubmitEditing PropTypes.func #

    Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified.

    placeholder PropTypes.string #

    The string that will be rendered before text input has been entered.

    placeholderTextColor color #

    The text color of the placeholder string.

    returnKeyType PropTypes.oneOf([ + // Cross-platform + 'done', + 'go', + 'next', + 'search', + 'send', + // Android-only + 'none', + 'previous', + // iOS-only + 'default', + 'emergency-call', + 'google', + 'join', + 'route', + 'yahoo', +]) #

    Determines how the return key should look. On Android you can also use +returnKeyLabel.

    Cross platform

    The following values work across platforms:

    • done
    • go
    • next
    • search
    • send

    Android Only

    The following values work on Android only:

    • none
    • previous

    iOS Only

    The following values work on iOS only:

    • default
    • emergency-call
    • google
    • join
    • route
    • yahoo

    secureTextEntry PropTypes.bool #

    If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false.

    selectTextOnFocus PropTypes.bool #

    If true, all text will automatically be selected on focus.

    selectionColor color #

    The highlight (and cursor on iOS) color of the text input.

    style Text#style #

    value PropTypes.string #

    The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent -unwanted edits without flicker.

    androidinlineImageLeft string #

    If defined, the provided image resource will be rendered on the left.

    androidinlineImagePadding number #

    Padding between the inline image, if any, and the text input itself.

    androidnumberOfLines number #

    Sets the number of lines for a TextInput. Use it with multiline set to -true to be able to fill the lines.

    androidreturnKeyLabel string #

    Sets the return key to the label. Use it instead of returnKeyType.

    androidunderlineColorAndroid color #

    The color of the TextInput underline.

    iosclearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') #

    When the clear button should appear on the right side of the text view.

    iosclearTextOnFocus bool #

    If true, clears the text field automatically when editing begins.

    iosenablesReturnKeyAutomatically bool #

    If true, the keyboard disables the return key when there is no text and -automatically enables it when there is text. The default value is false.

    ioskeyboardAppearance enum('default', 'light', 'dark') #

    Determines the color of the keyboard.

    iosonKeyPress function #

    Callback that is called when a key is pressed. +unwanted edits without flicker.

    androidinlineImageLeft PropTypes.string #

    If defined, the provided image resource will be rendered on the left.

    androidinlineImagePadding PropTypes.number #

    Padding between the inline image, if any, and the text input itself.

    androidnumberOfLines PropTypes.number #

    Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines.

    androidreturnKeyLabel PropTypes.string #

    Sets the return key to the label. Use it instead of returnKeyType.

    androidunderlineColorAndroid color #

    The color of the TextInput underline.

    iosclearButtonMode PropTypes.oneOf([ + 'never', + 'while-editing', + 'unless-editing', + 'always', +]) #

    When the clear button should appear on the right side of the text view.

    iosclearTextOnFocus PropTypes.bool #

    If true, clears the text field automatically when editing begins.

    iosenablesReturnKeyAutomatically PropTypes.bool #

    If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false.

    ioskeyboardAppearance PropTypes.oneOf([ + 'default', + 'light', + 'dark', +]) #

    Determines the color of the keyboard.

    iosonKeyPress PropTypes.func #

    Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. -Fires before onChange callbacks.

    iosselectionState DocumentSelectionState #

    An instance of DocumentSelectionState, this is some state that is responsible for +Fires before onChange callbacks.

    iosselectionState PropTypes.instanceOf(DocumentSelectionState) #

    An instance of DocumentSelectionState, this is some state that is responsible for maintaining selection information for a document.

    Some functionality that can be performed with this instance is:

    • blur()
    • focus()
    • update()

    You can reference DocumentSelectionState in vendor/document/selection/DocumentSelectionState.js

    Methods #

    isFocused(0): #

    Returns true if the input is currently focused; false otherwise.

    clear(0) #

    Removes all text from the TextInput.

    Examples #

    IOS #

    		Edit on GitHub
    'use strict'; diff --git a/releases/next/docs/toolbarandroid.html b/releases/next/docs/toolbarandroid.html index df72e22c818..ca44542075e 100644 --- a/releases/next/docs/toolbarandroid.html +++ b/releases/next/docs/toolbarandroid.html @@ -18,20 +18,25 @@ onActionSelected: if (position === 0) { // index of 'Settings' showSettings(); } -}

    Props #

    View props... #

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

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

    Props #

    View props... #

    actions ReactPropTypes.arrayOf(ReactPropTypes.shape({ + title: ReactPropTypes.string.isRequired, + icon: optionalImageSource, + show: ReactPropTypes.oneOf(['always', 'ifRoom', 'never']), + showWithText: ReactPropTypes.bool +})) #

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

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

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

    contentInsetEnd number #

    Sets the content inset for the toolbar ending edge.

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

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

    • contentInsetEnd ReactPropTypes.number #

    Sets the content inset for the toolbar ending edge.

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

    contentInsetStart number #

    Sets the content inset for the toolbar starting edge.

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

    contentInsetStart ReactPropTypes.number #

    Sets the content inset for the toolbar starting edge.

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

    logo optionalImageSource #

    Sets the toolbar logo.

    navIcon optionalImageSource #

    Sets the navigation icon.

    onActionSelected function #

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

    onIconClicked function #

    Callback called when the icon is selected.

    overflowIcon optionalImageSource #

    Sets the overflow icon.

    rtl bool #

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

    logo optionalImageSource #

    Sets the toolbar logo.

    navIcon optionalImageSource #

    Sets the navigation icon.

    onActionSelected ReactPropTypes.func #

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

    onIconClicked ReactPropTypes.func #

    Callback called when the icon is selected.

    overflowIcon optionalImageSource #

    Sets the overflow icon.

    rtl ReactPropTypes.bool #

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

    android:supportsRtl="true"

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

    subtitle string #

    Sets the toolbar subtitle.

    subtitleColor color #

    Sets the toolbar subtitle color.

    testID string #

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

    title string #

    Sets the toolbar title.

    titleColor color #

    Sets the toolbar title color.

    Examples #

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

    subtitle ReactPropTypes.string #

    Sets the toolbar subtitle.

    subtitleColor color #

    Sets the toolbar subtitle color.

    testID ReactPropTypes.string #

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

    title ReactPropTypes.string #

    Sets the toolbar title.

    titleColor color #

    Sets the toolbar title color.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); diff --git a/releases/next/docs/transforms.html b/releases/next/docs/transforms.html index 4fb9e3e5510..1b5d8241922 100644 --- a/releases/next/docs/transforms.html +++ b/releases/next/docs/transforms.html @@ -1,4 +1,19 @@ -Transforms – React Native | A framework for building native apps using React
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Transforms #

    		Edit on GitHub

    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 #

    Next →
    © 2016 Facebook Inc.
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Transforms #

    		Edit on GitHub

    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 #

    Next →
    © 2016 Facebook Inc.
    React Native0.29

    React Native Versions

    React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

    masterDocs
    0.29-rcDocsRelease Notes
    (current) 0.28DocsRelease Notes
    0.27DocsRelease Notes
    0.26DocsRelease Notes
    0.25DocsRelease Notes
    0.24DocsRelease Notes
    0.23DocsRelease Notes
    0.22DocsRelease Notes
    0.21DocsRelease Notes
    0.20DocsRelease Notes
    0.19DocsRelease Notes
    0.18DocsRelease Notes
    © 2016 Facebook Inc.
    React Nativenext

    React Native Versions

    React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

    masterDocs
    0.29-rcDocsRelease Notes
    (current) 0.28DocsRelease Notes
    0.27DocsRelease Notes
    0.26DocsRelease Notes
    0.25DocsRelease Notes
    0.24DocsRelease Notes
    0.23DocsRelease Notes
    0.22DocsRelease Notes
    0.21DocsRelease Notes
    0.20DocsRelease Notes
    0.19DocsRelease Notes
    0.18DocsRelease Notes
    © 2016 Facebook Inc.
    \ No newline at end of file