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);

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);

• javascript
• react-native

• Eric Anderson you should mark a response as the accepted answer. The answer from Raj looks right to me. – kingdango Commented Dec 26, 2015 at 14:46

2 Answers 2

I review your code and make some changes to get your expected output. The updated code is:-

'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>                                                                                                                                                                                              
      </View>                                                                                                                                                                                              
    );                                                                                                                                                                                                           
  }                                                                                                                                                                                                                
});                                                                                                                                                                                                                  
                                                                                                                                                                                                                 
var styles = StyleSheet.create({                                                                                                                                                                                     
  container: {                                                                                                                                                                                                     
  },                                                                                                                                                                                                               
  avatar: {                                                                                                                                                                                                        
    backgroundColor: 'black',                                                                                                                                                                                    
    width: 60,                                                                                                                                                                                                   
    height: 60,                                                                                                                                                                                                  
  },                                                                                                                                                                                                               
  badge: {                                                                                                                                                                                                         
     backgroundColor: 'red',                                                                                                                                                                                      
     width: 20,                                                                                                                                                                                                   
     height: 20,                                                                                                                                                                                                  
     left: 20,                                                                                                                                                                                                    
     top: 20,                                                                                                                                                                                                     
  },                                                                                                                                                                                                               
});                                                                                                                                                                                                                  
                                                                                                                                                                                                                 
AppRegistry.registerComponent('SampleApp', () => SampleApp);                                                                                                                                                            

See the change in above code snippet. Output screenshot link:- https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing

Whenever you want to override any react component simply put that component in between start and close of another component. For example:-

If you want to overlap one image on another then use tags like

    <Image source={require('image!firstimage')} style={..}>
      <Image source={require('image!secondimage')} style={..}>
    </Image>

Nesting Image components doesn't work anymore. What you could use is ImageBackground instead or absolute positioning.

As doc says you can code your own specific component by checking the source code of ImageBackground https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js