From eb0df1df1f52df07d3bd9013096bbcfc33b15a00 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Fri, 7 Aug 2015 17:43:15 +0000 Subject: [PATCH] update website --- css/react-native.css | 9 +++ docs/activityindicatorios.html | 2 +- docs/datepickerios.html | 4 +- docs/flexbox.html | 2 +- docs/image.html | 27 +++------ docs/listview.html | 40 ++++++------- docs/mapview.html | 24 ++++---- docs/navigator.html | 14 ++--- docs/navigatorios.html | 6 +- docs/scrollview.html | 94 ++++++++++++------------------ docs/segmentedcontrolios.html | 10 ++-- docs/sliderios.html | 10 ++-- docs/switchios.html | 6 +- docs/tabbarios-item.html | 10 ++-- docs/tabbarios.html | 2 +- docs/text.html | 5 +- docs/textinput.html | 36 +++++------- docs/touchablehighlight.html | 4 +- docs/touchablewithoutfeedback.html | 2 +- docs/view.html | 20 +++---- docs/webview.html | 4 +- 21 files changed, 149 insertions(+), 182 deletions(-) diff --git a/css/react-native.css b/css/react-native.css index 902d2a4a47d..cee9a1307c4 100644 --- a/css/react-native.css +++ b/css/react-native.css @@ -967,6 +967,15 @@ div[data-twttr-id] iframe { font-size: 13px; } +.platform { + background-color: hsl(198, 100%, 87%); + border-radius: 5px; + margin-right: 5px; + padding: 0 5px; + font-size: 13px; + font-weight: normal; +} + .edit-github { font-size: 15px; font-weight: normal; diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index c98e05230e4..f791f1d75c7 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Edit on GitHubProps #

animating bool #

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

color string #

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

hidesWhenStopped bool #

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

onLayout function #

Invoked on mount and layout changes with

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

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

Size of the indicator. Small has a height of 20, large has a height of 36.

Edit on GitHubExamples #

'use strict'; +ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Edit on GitHubProps #

animating bool #

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

color string #

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

hidesWhenStopped bool #

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

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

Size of the indicator. Small has a height of 20, large has a height of 36.

onLayout function #

Invoked on mount and layout changes with

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 63ac326e916..51146d7004f 100644 --- a/docs/datepickerios.html +++ b/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.

Edit on GitHubProps #

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.

Edit on GitHubProps #

date Date #

The currently selected date.

onDateChange function #

Date change handler.

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

timeZoneOffsetInMinutes number #

Timezone offset in minutes.

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

maximumDate Date #

Maximum date.

Restricts the range of possible date/time values.

minimumDate Date #

Minimum date.

Restricts the range of possible date/time values.

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

The date picker mode.

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

The interval at which minutes can be selected.

timeZoneOffsetInMinutes number #

Timezone offset in minutes.

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

Edit on GitHubExamples #

'use strict'; diff --git a/docs/flexbox.html b/docs/flexbox.html index 391fe319310..b0d2426c4fa 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -Flexbox – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Flexbox

Edit on GitHubProps #

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

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

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

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

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

height number #

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

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

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

right number #

top number #

width number #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Flexbox

Edit on GitHubProps #

paddingTop number #

width number #

top number #

left number #

right number #

bottom number #

margin number #

marginVertical number #

marginHorizontal number #

marginTop number #

marginBottom number #

marginLeft number #

marginRight number #

padding number #

paddingVertical number #

paddingHorizontal number #

height number #

paddingBottom number #

paddingLeft number #

paddingRight number #

borderWidth number #

borderTopWidth number #

borderRightWidth number #

borderBottomWidth number #

borderLeftWidth number #

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

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

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

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

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

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

flex number #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

MapView

Edit on GitHubProps #

annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] #

Map annotations with title/subtitle.

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

Insets for the map's legal label, originally at bottom left of the map. -See EdgeInsetsPropType.js for more information.

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 overlayed

maxDelta number #

Maximum size of area that can be displayed.

minDelta number #

Minimum size of area that can be displayed.

onAnnotationPress function #

Callback that is called once, when the user is clicked on a annotation.

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.

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 -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 +MapView – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

components

apis

Polyfills

MapView

Edit on GitHubProps #

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.

style View#style #

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

zoomEnabled bool #

If false the user won't be able to pinch/zoom the map. +Default value is true.

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

showsUserLocation bool #

If true the app will ask for the user's location and focus on it. +that true north is situated at the top of the map view

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 +angle is ignored and the map is always displayed as if the user +is looking straight down onto it.

scrollEnabled bool #

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

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 overlayed

showsUserLocation bool #

If true the app will ask for the user's location and focus on it. Default value is false.

NOTE: You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going -to fail silently!

style View#style #

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

zoomEnabled bool #

If false the user won't be able to pinch/zoom the map. -Default value is true.

Edit on GitHubExamples #

'use strict'; +to fail silently!

annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] #

Map annotations with title/subtitle.

maxDelta number #

Maximum size of area that can be displayed.

minDelta number #

Minimum size of area that can be displayed.

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

Insets for the map's legal label, originally at bottom left of the map. +See EdgeInsetsPropType.js for more information.

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.

onAnnotationPress function #

Callback that is called once, when the user is clicked on a annotation.

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/navigator.html b/docs/navigator.html index 5e5ff3c669b..39c9dfa63b5 100644 --- a/docs/navigator.html +++ b/docs/navigator.html @@ -30,18 +30,18 @@ on it to trigger navigation:

  • getCurrentRoutes() - return route. All scenes after it will be unmounted
  • popToTop() - Pop to the first scene in the stack, unmounting every other scene

Edit on GitHubProps #

configureScene function #

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

(route) => Navigator.SceneConfigs.FloatFromRight

initialRoute object #

Specify a route to start on. A route is an object that the navigator +configuration object

(route) => Navigator.SceneConfigs.FloatFromRight

renderScene function #

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

(route, navigator) => + <MySceneComponent title={route.title} />

initialRoute object #

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

initialRouteStack [object] #

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

navigationBar node #

Optionally provide a navigation bar that persists across scene -transitions

navigator object #

Optionally provide the navigator object from a parent Navigator

onDidFocus function #

@deprecated +initialRoute

onWillFocus function #

@deprecated +Use navigationContext.addListener('willfocus', callback) instead.

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

onDidFocus function #

@deprecated Use navigationContext.addListener('didfocus', callback) instead.

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

onWillFocus function #

@deprecated -Use navigationContext.addListener('willfocus', callback) instead.

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

renderScene function #

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

(route, navigator) => - <MySceneComponent title={route.title} />

sceneStyle View#style #

Styles to apply to the container of each scene

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

SegmentedControlIOS

Use SegmentedControlIOS to render a UISegmentedControl iOS.

Edit on GitHubProps #

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.

Edit on GitHubExamples #

'use strict'; +SegmentedControlIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

SegmentedControlIOS

Use SegmentedControlIOS to render a UISegmentedControl iOS.

Edit on GitHubProps #

values [string] #

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

selectedIndex number #

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

onValueChange function #

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

onChange function #

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

enabled bool #

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

tintColor string #

Accent color of the control.

momentary bool #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/sliderios.html b/docs/sliderios.html index 96905c5b91f..c7779fe8832 100644 --- a/docs/sliderios.html +++ b/docs/sliderios.html @@ -1,11 +1,11 @@ -SliderIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

SliderIOS

Edit on GitHubProps #

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.

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.

style View#style #

Used to style and layout the Slider. See StyleSheet.js and +SliderIOS – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

components

apis

Polyfills

SliderIOS

Edit on GitHubProps #

style View#style #

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

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

Edit on GitHubExamples #

'use strict'; +the value, the component won't be reset to its inital value.

minimumValue number #

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

maximumValue number #

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

minimumTrackTintColor string #

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

maximumTrackTintColor string #

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

onValueChange function #

Callback continuously called while the user is dragging the slider.

onSlidingComplete function #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/switchios.html b/docs/switchios.html index 8b7cfd18b10..e18da1af938 100644 --- a/docs/switchios.html +++ b/docs/switchios.html @@ -2,9 +2,9 @@ a controlled component, so you must hook in to the onValueChange callback and update the value prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.value as the -source of truth.

Edit on GitHubProps #

disabled bool #

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

onTintColor string #

Background color when the switch is turned on.

onValueChange function #

Callback that is called when the user toggles the switch.

thumbTintColor string #

Background color for the switch round button.

tintColor string #

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

Edit on GitHubExamples #

'use strict'; +source of truth.

Edit on GitHubProps #

value bool #

The value of the switch, if true the switch will be turned on. +Default value is false.

disabled bool #

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

onValueChange function #

Callback that is called when the user toggles the switch.

onTintColor string #

Background color when the switch is turned on.

thumbTintColor string #

Background color for the switch round button.

tintColor string #

Background color when the switch is turned off.

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/tabbarios-item.html b/docs/tabbarios-item.html index 450187f9f3e..a7887de59c5 100644 --- a/docs/tabbarios-item.html +++ b/docs/tabbarios-item.html @@ -1,9 +1,9 @@ -TabBarIOS.Item – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS.Item

Edit on GitHubProps #

badge string, number #

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

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

selected bool #

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

selectedIcon Image.propTypes.source #

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

style View#style #

React style object.

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

Items comes with a few predefined system icons. Note that if you are +TabBarIOS.Item – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS.Item

Edit on GitHubProps #

badge string, number #

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

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 overriden with the -system ones.

title string #

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

icon Image.propTypes.source #

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

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.

onPress function #

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

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.

style View#style #

React style object.

title string #

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

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS

Edit on GitHubProps #

barTintColor string #

Background color of the tab bar

style View#style #

tintColor string #

Color of the currently selected tab icon

translucent bool #

A Boolean value that indicates whether the tab bar is translucent

Edit on GitHubExamples #

'use strict'; +TabBarIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS

Edit on GitHubProps #

style View#style #

tintColor string #

Color of the currently selected tab icon

barTintColor string #

Background color of the tab bar

translucent bool #

A Boolean value that indicates whether the tab bar is translucent

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/text.html b/docs/text.html index 8852f0d73d9..a4697a28aab 100644 --- a/docs/text.html +++ b/docs/text.html @@ -25,9 +25,8 @@ each other on account of the literal newlines:

}, };

Edit on GitHubProps #

numberOfLines number #

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

onLayout function #

Invoked on mount and layout changes with

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

onPress function #

This function is called on press.

style style #

View#style...
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing number
lineHeight number
textAlign enum("auto", 'left', 'right', 'center', 'justify')
textDecorationColor string
textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
writingDirection enum("auto", 'ltr', 'rtl')

suppressHighlighting bool #

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

testID string #

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

Edit on GitHubDescription #

Nested Text #

In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. 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.

<Text style={{fontWeight: 'bold'}}> +does not exceed this number.

onLayout function #

Invoked on mount and layout changes with

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

onPress function #

This function is called on press.

style style #

View#style...
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing number
lineHeight number
textAlign enum("auto", 'left', 'right', 'center', 'justify')
textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
textDecorationColor string
writingDirection enum("auto", 'ltr', 'rtl')

testID string #

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

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.

Edit on GitHubDescription #

Nested Text #

In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. 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.

<Text style={{fontWeight: 'bold'}}> I am bold <Text style={{color: 'red'}}> and red diff --git a/docs/textinput.html b/docs/textinput.html index 8c817b85d22..dcc6ff0e7c2 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -14,36 +14,26 @@ example:

<TextInput children: true, };

var notMultiline = { onSubmitEditing: true, - };

Edit on GitHubProps #

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.

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

When the clear button should appear on the right side of the text view -@platform ios

clearTextOnFocus bool #

If true, clears the text field automatically when editing begins -@platform ios

defaultValue string #

Provides an initial value that will change when the user starts typing. -Useful for simple use-cases where you don't 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. -@platform ios

enablesReturnKeyAutomatically 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. -@platform ios

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

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

The following values work across platforms: + };

Edit on GitHubProps #

onEndEditing function #

Callback that is called when text input ends.

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

autoFocus bool #

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

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

Set the position of the cursor from where editing will begin. +@platorm android

testID string #

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

style Text#style #

Styles

keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-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

maxLength number #

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

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

onSubmitEditing function #

Callback that is called when the text input's submit button is pressed.

placeholder string #

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

placeholderTextColor string #

The text color of the placeholder string

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

Determines how the return key should look. -@platform ios

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 -@platform ios

selectionState DocumentSelectionState #

See DocumentSelectionState.js, some state that is responsible for -maintaining selection information for a document -@platform ios

style Text#style #

Styles

testID string #

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

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

Set the position of the cursor from where editing will begin. -@platorm android

textAlignVertical enum('top', 'center', 'bottom') #

Aligns text vertically within the TextInput. -@platform android

underlineColorAndroid string #

The color of the textInput underline. -@platform android

value string #

The value to show for the text input. TextInput is a controlled +- email-address

defaultValue string #

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

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

Edit on GitHubExamples #

'use strict'; +unwanted edits without flicker.

secureTextEntry bool #

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

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

onFocus function #

Callback that is called when the text input is focused

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.

autoCorrect bool #

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

onSubmitEditing function #

Callback that is called when the text input's submit button is pressed.

onLayout function #

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

placeholder string #

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

placeholderTextColor string #

The text color of the placeholder string

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.

iosselectionState DocumentSelectionState #

See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document

iosmaxLength number #

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

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

Determines how the return key should look.

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

iosselectTextOnFocus bool #

If true, all text will automatically be selected on focus

ioseditable bool #

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

androidtextAlignVertical enum('top', 'center', 'bottom') #

Aligns text vertically within the TextInput.

androidunderlineColorAndroid string #

The color of the textInput underline.

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index a9b9aa272bc..842ee38fcf9 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -13,8 +13,8 @@ backgroundColor of the wrapped view isn't explicitly set to an opaque color </TouchableHighlight> ); },

Edit on GitHubProps #

TouchableWithoutFeedback props... #

activeOpacity number #

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

onHideUnderlay function #

Called immediately after the underlay is hidden

onShowUnderlay function #

Called immediately after the underlay is shown

style View#style #

underlayColor string #

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

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

TouchableWithoutFeedback

Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native".

Edit on GitHubProps #

accessible bool #

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

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.

onLongPress function #

onPress function #

onPressIn function #

onPressOut function #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

WebView

Edit on GitHubProps #

automaticallyAdjustContentInsets bool #

bounces bool #

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

html string #

injectedJavaScript string #

Sets the JS to be injected when the webpage loads.

javaScriptEnabledAndroid bool #

Used for android only, JS is enabled by default for WebView on iOS

onNavigationStateChange function #

renderError function #

renderLoading function #

scalesPageToFit bool #

Used for iOS only, sets whether the webpage scales to fit the view and the -user can change the scale

scrollEnabled bool #

startInLoadingState bool #

style View#style #

url string #

Edit on GitHubExamples #

'use strict'; +WebView – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

WebView

Edit on GitHubProps #

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

url string #

renderError function #

renderLoading function #

bounces bool #

scrollEnabled bool #

automaticallyAdjustContentInsets bool #

html string #

onNavigationStateChange function #

startInLoadingState bool #

style View#style #

javaScriptEnabledAndroid bool #

Used for android only, JS is enabled by default for WebView on iOS

injectedJavaScript string #

Sets the JS to be injected when the webpage loads.

scalesPageToFit bool #

Used for iOS only, sets whether the webpage scales to fit the view and the +user can change the scale

Edit on GitHubExamples #

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