diff --git a/Examples/UIExplorer/ViewExample.js b/Examples/UIExplorer/ViewExample.js
index 5381f2397..312fbe230 100644
--- a/Examples/UIExplorer/ViewExample.js
+++ b/Examples/UIExplorer/ViewExample.js
@@ -15,12 +15,14 @@
*/
'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: {
@@ -30,6 +32,58 @@ var styles = StyleSheet.create({
}
});
+var ViewBorderStyleExample = React.createClass({
+ getInitialState() {
+ return {
+ showBorder: true
+ };
+ },
+
+ render() {
+ if (Platform.OS !== 'android') {
+ return (
+
+
+ borderStyle is only supported on android for now.
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ Dashed border style
+
+
+
+
+ Dotted border style
+
+
+
+
+ );
+ },
+
+ _handlePress() {
+ this.setState({showBorder: !this.state.showBorder});
+ }
+});
+
exports.title = '';
exports.description = 'Basic building block of all UI.';
exports.displayName = 'ViewExample';
@@ -89,6 +143,11 @@ exports.examples = [
);
},
+ }, {
+ title: 'Border Style',
+ render: function() {
+ return ;
+ },
}, {
title: 'Circle with Border Radius',
render: function() {
diff --git a/Libraries/Components/View/ViewStylePropTypes.js b/Libraries/Components/View/ViewStylePropTypes.js
index f2271f4d8..ce147e096 100644
--- a/Libraries/Components/View/ViewStylePropTypes.js
+++ b/Libraries/Components/View/ViewStylePropTypes.js
@@ -32,6 +32,7 @@ var ViewStylePropTypes = {
borderTopRightRadius: ReactPropTypes.number,
borderBottomLeftRadius: ReactPropTypes.number,
borderBottomRightRadius: ReactPropTypes.number,
+ borderStyle: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']),
opacity: ReactPropTypes.number,
overflow: ReactPropTypes.oneOf(['visible', 'hidden']),
shadowColor: ReactPropTypes.string,