diff --git a/docs/listview.html b/docs/listview.html index 31430940387..3e028803302 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -48,7 +48,8 @@ is exactly what was put into the data source, but it's also possible to provide custom extractors. ListView can be notified when a row is being highlighted by calling highlightRow function. The separators above and below will be hidden when a row is highlighted. The highlighted state of -a row can be reset by calling highlightRow(null).

renderSectionHeader function #

(sectionData, sectionID) => renderable

If provided, a sticky header is rendered for this section. The sticky +a row can be reset by calling highlightRow(null).

renderScrollComponent function #

(props) => renderable

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

renderSectionHeader function #

(sectionData, sectionID) => renderable

If provided, a sticky header is rendered for this section. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it is pushed off the screen by the next section diff --git a/docs/segmentedcontrolios.html b/docs/segmentedcontrolios.html index 99d0dcef0b4..f4203bf1fc8 100644 --- a/docs/segmentedcontrolios.html +++ b/docs/segmentedcontrolios.html @@ -107,7 +107,7 @@ passes the segment's value as an argument

_onChange(event) { this.setState({ - selectedIndex: event.nativeEvent.selectedIndex, + selectedIndex: event.nativeEvent.selectedSegmentIndex, }); }, diff --git a/docs/tabbarios.html b/docs/tabbarios.html index 709e8adc224..1eed81dae33 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -11,9 +11,11 @@ var TabBarExample = React.createClass({ statics: { title: '<TabBarIOS>', - description: 'Tab-based navigation.' + description: 'Tab-based navigation.', }, + displayName: 'TabBarExample', + getInitialState: function() { return { selectedTab: 'redTab', diff --git a/docs/text.html b/docs/text.html index 6bf8957b3d5..db12e2375b5 100644 --- a/docs/text.html +++ b/docs/text.html @@ -27,7 +27,7 @@ each other on account of the literal newlines:

onLayout function #

Invoked on mount and layout changes with

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

onPress function #

This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with -suppressHighlighting).

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')
writingDirection enum("auto", 'ltr', 'rtl')

suppressHighlighting bool #

When true, no visual change is made when text is pressed down. By +suppressHighlighting).

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.

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'}}> I am bold <Text style={{color: 'red'}}> @@ -246,6 +246,44 @@ exports.examples /View> ); }, +}, { + title: 'Text Decoration', + render: function() { + return ( + <View> + <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'solid'}}> + Solid underline + </Text> + <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}> + Double underline with custom color + </Text> + <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}> + Dashed underline with custom color + </Text> + <Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}> + Dotted underline with custom color + </Text> + <Text style={{textDecorationLine: 'none'}}> + None textDecoration + </Text> + <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}> + Solid line-through + </Text> + <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}> + Double line-through with custom color + </Text> + <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}> + Dashed line-through with custom color + </Text> + <Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}> + Dotted line-through with custom color + </Text> + <Text style={{textDecorationLine: 'underline line-through'}}> + Both underline and line-through + </Text> + </View> + ); + }, }, { title: 'Nested', description: 'Nested text components will inherit the styles of their ' + diff --git a/docs/view.html b/docs/view.html index 4ce5c371ee2..a2530d5453c 100644 --- a/docs/view.html +++ b/docs/view.html @@ -13,7 +13,8 @@ performance, although inline styles are also supported.

accessibilityTraits AccessibilityTraits, [AccessibilityTraits] #

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element

accessible bool #

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

onAcccessibilityTap function #

When accessible is true, the system will try to invoke this function +all the touchable elements are accessible.

collapsible bool #

When false, indicates that the view should not be collapsed, even if it is +layout-only. Defaults to true.

onAcccessibilityTap function #

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

onLayout function #

Invoked on mount and layout changes with

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

onMagicTap function #

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

onMoveShouldSetResponder function #

For most touch interactions, you'll simply want to wrap your component in TouchableHighlight or TouchableOpacity. Check out Touchable.js, diff --git a/docs/webview.html b/docs/webview.html index d075b4cb712..90e5f4dfa72 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React

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 #

injectedJavascriptIOS string #

Used for iOS only, 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 +React Native | A framework for building native apps using React

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'; var React = require('react-native');