83
rated 0 times
[
89]
[
6]
/ answers: 1 / hits: 26042
/ 9 Years ago, fri, october 30, 2015, 12:00:00
I'm interested in creating a custom badge on top of an avatar (profile image), except I can't seem to get images to overlap. I tried using a 'translateY' style transform but it is ignored and the two images are still placed side by side, flex box style, even though I want them to overlap. Note, I'm using Views in the example, but I imagine Images work the same way.
'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.avatar} />
<View style={styles.badge} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
},
avatar: {
backgroundColor: 'black',
width: 60,
height: 60,
},
badge: {
backgroundColor: 'red',
width: 20,
height: 20,
translateY: -60,
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
More From » react-native
