I am making a react native application in which there is a left and right section.
The left section consists of flex:0.7 and right side section consists of flex:0.2.
Inside the left section I have a container inside which there is a ImageBackground which looks like a circuit skeleton
and inside that I am in the need to place sub components in the respective position.
Expected Result:
Things I have tried:
Pure HTML and CSS way: (Working as expected)
.container {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.leftSection {
flex: 0.7;
}
.rightSection {
flex: 0.2;
background-color: #ccc;
}
.bgContainer {
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
}
.bg-img {
display: block;
width: 100%;
}
.coil {
position: absolute;
top: 49.55%;
left: 24.3%;
width: 17.4418605%;
}
.evaporator {
position: absolute;
top: 7.25%;
left: 54.5%;
width: 11.627907%;
}
.compressor {
position: absolute;
top: 53.15%;
left: 59.2%;
width: 13.0813953%;
}
.component img {
display: block;
width: 100%;
}<div class="container">
<div class="leftSection">
<div class="bgContainer">
<img src="https://i.stack.imgur.com/AfygH.png" class="bg-img" />
<div class="component coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="component evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="component compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
<div class="rightSection">
Right Section
</div>
</div>But as I am doing this in a react native application, I have tried changing this into a react native way like,
import React from 'react';
import { View, Image, StyleSheet, Text, ImageBackground } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
leftSection: {
flex: 0.7,
},
rightSection: {
flex: 0.2,
backgroundColor: '#ccc',
},
bgContainer: {
position: 'relative',
margin: 0,
},
bgImg: {
width: '100%',
},
coil: {
position: 'absolute',
top: '49.55%',
left: '24.3%',
width: '17.4418605%',
},
evaporator: {
position: 'absolute',
top: '7.25%',
left: '54.5%',
width: '11.627907%',
},
compressor: {
position: 'absolute',
top: '53.15%',
left: '59.2%',
width: '13.0813953%',
},
componentImg: {
width: '100%',
},
});
const App = () => {
return (
<View style={styles.container}>
<View style={styles.leftSection}>
<View style={styles.bgContainer}>
<ImageBackground
source={{ uri: 'https://i.stack.imgur.com/AfygH.png' }}
style={styles.bgImg}
>
<View style={styles.coil}>
<Image
source={{ uri: 'https://i.stack.imgur.com/SKUms.png' }}
style={styles.componentImg}
/>
</View>
<View style={styles.evaporator}>
<Image
source={{ uri: 'https://i.stack.imgur.com/spv58.png' }}
style={styles.componentImg}
/>
</View>
<View style={styles.compressor}>
<Image
source={{ uri: 'https://i.stack.imgur.com/fzSaH.png' }}
style={styles.componentImg}
/>
</View>
</ImageBackground>
</View>
</View>
<View style={styles.rightSection}>
<Text>Right Section</Text>
</View>
</View>
);
};
export default App;Issue:
After the implementation,
The below screenshot is captured in the screen viewport with height: 844 and width: 1280
The below screenshot is captured in the screen viewport with height: 552 and width: 1024
I am making this mainly for tablet screens of all height and width but in pure HTML and CSS way, this is responsive but in tablet screen’s in react native, its not responsive at all.
Kindly please help me to solve this issue of making the position:absolute elements responsive and located at same position across all the screen’s without distortion.
Note: Edited my question to mention that this implementation is happening in react-native.
6
Answers
Try this:
As an option. But, keep in mind, this is a construction with hard-coded coordinates. When you change the size of the container with the background image, you will also need to change the positions of the nested elements.
Maybe so?
Here is the solution on flexbox instead of making it position:absolute as requested.
Because it’s bitmap image, I would suggest to go back to the real size of each element, and to position them regarding their real size. All that in pixels. If really needs resizing outer container, more or less same can be done taking percentage of each element regarding the big one and their position left top same kind of calculation…
This is another way.