react-nativeimagebackground

How should I handle the absolute position when the screen size is different?


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.sstatic.net/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>

Solution

  • 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>