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