Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to overlap images in react-native

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);
like image 370
Eric Anderson Avatar asked Oct 30 '15 11:10

Eric Anderson


People also ask

How do I add an image overlay in React Native?

To add a transparent overlay in React Native, we can use the ImageBackground component. to add an ImageBackground with the source set to an object with the uri of the background image. And we add the backgroundImage style that sets opacity to 0.3 to add a transparent overlay over the image.

How do I Div overlap an image?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

What is the use of zIndex in React Native?

zIndex is the Expo and React Native analog of CSS's z-index property which lets the developer control the order in which components are displayed over one another.


2 Answers

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>
like image 107
Raj Rajole Avatar answered Sep 21 '22 19:09

Raj Rajole


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

like image 25
j0nd0n7 Avatar answered Sep 21 '22 19:09

j0nd0n7