1

I want to use ImageBackground in react-native to show text in a specific location.

How can I specify different absolute position for different screen sizes when using resize mode as contain?

https://i.stack.imgur.com/HRUwn.png

 <ImageBackground
      source={require("../../assets/image.png")}
      style={{ width: "100%", height: "100%", position: "relative" }}
      resizeMode="contain"
      onLayout={(event) => this.setLayout(event.nativeEvent.layout)}
    >
      <Text
        style={{
          position: "absolute",
          left: 90,
          top: 300,
        }}
      >
        Text_1
      </Text>
      <Text
        style={{
          position: "absolute",
          left: 280,
          top: 300,
        }}
      >
        Text_2
      </Text>
    </ImageBackground>
ezkoon
  • 45
  • 5

1 Answers1

1

Give left and right positions using dimensions.Example like below,

import { Dimensions } from 'react-native';

const window = Dimensions.get('window');

<View style={{
      flexdirection:'row', 
      justifyContent:'space-between',
      marginLeft:(window.width)*0.3,
      marginRight:(window.width)*0.5,
      top:(window.height)*0.25,
      position: "absolute",
}}>
 <Text>Text One </Text>
 <Text>Text Two </Text>
</View>
Ruchira Swarnapriya
  • 879
  • 2
  • 11
  • 23
  • I tried, but didn't get the desired result. https://images.guru/i/dBeWW The background image size used is 370*600, and the resizeMode is "contain". – ezkoon Dec 25 '20 at 15:26
  • warp two text in a view and set flexdirection:'row', justifycontent:'space-between' and for that view set style marginLeft, marginRight and top using window method – Ruchira Swarnapriya Dec 25 '20 at 15:31
  • It seems like a way too, but is there any way to calculate the position? The text displayed is not always horizontal and vertical. – ezkoon Dec 25 '20 at 15:43
  • Try different values to multiply u can archive ur target. So my answer is correct accept my answer and upvote it to help others. Thank you – Ruchira Swarnapriya Dec 25 '20 at 16:47