diff --git a/docs/scrollview.html b/docs/scrollview.html index 847ef8cb735..a5c186386ee 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -52,7 +52,7 @@ The default value is true.

style style #

Flexbox...
Transforms...
backgroundColor string
borderBottomColor string
borderBottomLeftRadius number
borderBottomRightRadius number
borderColor string
borderLeftColor string
borderRadius number
borderRightColor string
borderTopColor string
borderTopLeftRadius number
borderTopRightRadius number
opacity number
overflow enum('visible', 'hidden')
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number

zoomScale number #

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

Edit on GitHubExamples #

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

style style #

Flexbox...
Transforms...
backgroundColor string
borderBottomColor string
borderBottomLeftRadius number
borderBottomRightRadius number
borderColor string
borderLeftColor string
borderRadius number
borderRightColor string
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor string
borderTopLeftRadius number
borderTopRightRadius number
opacity number
overflow enum('visible', 'hidden')
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number

zoomScale number #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/view.html b/docs/view.html index 293f937b586..4ce5c371ee2 100644 --- a/docs/view.html +++ b/docs/view.html @@ -44,14 +44,16 @@ view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the -interaction/animation.

style style #

Flexbox...
Transforms...
backgroundColor string
borderBottomColor string
borderBottomLeftRadius number
borderBottomRightRadius number
borderColor string
borderLeftColor string
borderRadius number
borderRightColor string
borderTopColor string
borderTopLeftRadius number
borderTopRightRadius number
opacity number
overflow enum('visible', 'hidden')
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number

testID string #

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

Edit on GitHubExamples #

'use strict'; +interaction/animation.

style style #

Flexbox...
Transforms...
backgroundColor string
borderBottomColor string
borderBottomLeftRadius number
borderBottomRightRadius number
borderColor string
borderLeftColor string
borderRadius number
borderRightColor string
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor string
borderTopLeftRadius number
borderTopRightRadius number
opacity number
overflow enum('visible', 'hidden')
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number

testID string #

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

Edit on GitHubExamples #

'use strict'; +var Platform = require('Platform'); var React = require('react-native'); var { StyleSheet, Text, View, } = React; +var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); var styles = StyleSheet.create({ box: { @@ -61,6 +63,58 @@ interaction/animation.

} }); +var ViewBorderStyleExample = React.createClass({ + getInitialState() { + return { + showBorder: true + }; + }, + + render() { + if (Platform.OS !== 'android') { + return ( + <View style={{backgroundColor: 'red'}}> + <Text style={{color: 'white'}}> + borderStyle is only supported on android for now. + </Text> + </View> + ); + } + + return ( + <TouchableWithoutFeedback onPress={this._handlePress}> + <View> + <View style={{ + borderWidth: 1, + borderRadius: 5, + borderStyle: this.state.showBorder ? 'dashed' : null, + padding: 5 + }}> + <Text style={{fontSize: 11}}> + Dashed border style + </Text> + </View> + <View style={{ + marginTop: 5, + borderWidth: 1, + borderRadius: 5, + borderStyle: this.state.showBorder ? 'dotted' : null, + padding: 5 + }}> + <Text style={{fontSize: 11}}> + Dotted border style + </Text> + </View> + </View> + </TouchableWithoutFeedback> + ); + }, + + _handlePress() { + this.setState({showBorder: !this.state.showBorder}); + } +}); + exports.title = '<View>'; exports.description = 'Basic building block of all UI.'; exports.displayName = 'ViewExample'; @@ -120,6 +174,11 @@ exports.examples /View> ); }, + }, { + title: 'Border Style', + render: function() { + return <ViewBorderStyleExample />; + }, }, { title: 'Circle with Border Radius', render: function() {