How to set a react native image in top of image in specific position

Question

In React Native framework, I need to show an image and some other images on top of that image in specific position.

for example, in below image there are source image and three images on top of that with left and top value

anyone can help me for implement this codes???

score 3 · Answer 1 · answered Oct 07 '17 at 10:01

I believe you'll just need style the image correctly using position: 'absolute' with the correct top and left values. Below is an example.

NOTE: if the images are from network (so you don't know the size beforehand), you may style the image inline ex. style={{ width: img.width, height: img.height }} after fetching the image size (React Native Retrieve Actual Image Sizes)

import { Dimensions, StyleSheet, View, Image } from 'react-native';

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  background: {
    width,
    height
  },
  blue: {
    position: 'absolute',
    top: 10,
    left: 10,
    width: 200,
    height: 200
  },
  green: {
    position: 'absolute',
    top: 100,
    left: 200,
    width: 200,
    height: 200
  },
  red: {
    position: 'absolute',
    top: 400,
    left: 150,
    width: 200,
    height: 200
  }
});

const Demo = () => (
  <View style={styles.container}>
    <Image
      style={styles.background}
      source={{ uri: 'http://via.placeholder.com/1080x1920' }}
    />
    <Image
      style={styles.blue}
      source={{ uri: 'http://via.placeholder.com/200/0000ff' }}
    />
    <Image
      style={styles.green}
      source={{ uri: 'http://via.placeholder.com/200/008000' }}
    />
    <Image
      style={styles.red}
      source={{ uri: 'http://via.placeholder.com/200/ff0000' }}
    />
  </View>
);

export default Demo;

RESULT:

Thanks. I need to render source image with correct aspect ratio. when I use contain resizeMode for source image, it has some extra space in left and right or top and bottom. and I need to plus this extra space with left and top property in absolute position — Majid Lotfinia, Oct 24 '17 at 08:59

score 0 · Answer 2 · answered Oct 07 '17 at 10:02

You can use absolute positions for the other 3 images that will show on top of the first image:

Check the code below:

export default class AbsoluteImages extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{ flex:1 }}>
        <View style={{backgroundColor:"red" , flex:1}}>
        </View>
        <View style={{backgroundColor:"blue" , position:"absolute" , left:20 , top:50 , width:100,height:100}}>
        </View>
        <View style={{backgroundColor:"yellow" , position:"absolute" , left:120 ,  top:160 , width:100,height:100}}>
        </View>
        <View style={{backgroundColor:"green" , position:"absolute" , left:50 ,  top:300 , width:100,height:100}}>
        </View>
      </View>
    );
  }
}

Yes, It's true for view but I need to do this for images. – Majid Lotfinia Oct 24 '17 at 08:54 — Majid Lotfinia, Oct 24 '17 at 08:54

How to set a react native image in top of image in specific position

2 Answers2