Position:absolute issue in react native

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=
            style={styles.bgImg}
          >
          <View style={styles.coil}>
            <Image
              source=
              style={styles.componentImg}
            />
          </View>
          <View style={styles.evaporator}>
            <Image
              source=
              style={styles.componentImg}
            />
          </View>
          <View style={styles.compressor}>
            <Image
              source=
              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.

from Position:absolute issue in react native