CODEWITHSUNDEEP
androidiosreactjsreact-native
Majid Lotfinia
Majid Lotfinia

Reputation: 714

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

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

enter image description here

anyone can help me for implement this codes???

Upvotes: 1

Views: 7068

Answers (2)

Amr Labib
Amr Labib

Reputation: 4073

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

Upvotes: 0

Bill
Bill

Reputation: 4646

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:result

Upvotes: 3

Related Questions