I am attempting to use a css trick to produce triangles using the code:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.triangle}/>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
overflow: 'hidden',
borderTopWidth: 50,
borderRightWidth: 0,
borderBottomWidth: 50,
borderLeftWidth: 100,
borderTopColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: 'red',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
In iOS this produces:
But in Android, it only shows a black square:
Does Android support using these styles?
It doesn't seem to like borderLeftWidth, borderLeftColor, etc.
I don't see anything related in the documented Known Issues.
Edit: The screenshots are from RNPlay running react-native 0.13.0-rc.
I am attempting to use a css trick to produce triangles using the code:
In iOS this produces:
But in Android, it only shows a black square:
Does Android support using these styles?
It doesn't seem to like
borderLeftWidth,borderLeftColor, etc.I don't see anything related in the documented Known Issues.
Edit: The screenshots are from RNPlay running react-native 0.13.0-rc.