How to align image above another using absolute position on different devices

Question

Is it possible to align an image using absolute position above another and maintaining the same position, when the background image can be resized by different device resolution? Is there any other solution?

This is currently the problem I am trying to solve:

Image on a 414 x 896px device

Image on a 360 x 672px device

This is what I was trying to do:

    <View style={{position: 'relative'}}>
      <Image
        resizeMode="contain"
        style={{flex: 1, flexGrow: 1}}
        source={Assets.Mobile.RemoteControl} // The background image with 3 icons
      />
      <Image
        style={{
          position: 'absolute',
          top: '6.8%',
          left: '19%',
        }}
        source={Assets.Mobile.RemoteRectangleButtonBorder}  // The rounded border
      />
    </View>

Answer 1

Create a container for the buttons with flexDirection: 'row' and then have the buttons created as individual buttons instead of one picture

// Container
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>

  // Button 1
  <View style={{justifyContent: 'center', alignContent: 'center'}}>
  // Big ring
  <Image source={{uri or require: "url1"}} style={{position: 'absolute', height: xy%, width: ab%}}/>
  // Smal Ring
  <Image source={{uri or require: "url1"}} style={{position: 'absolute'}}/>
  </View>

  // Button 2
  <View>
  // House
  <Image source={{uri or require: "house"}} style={{position: 'absolute', height: xy%, width: ab%}}/>
  </View>

  // Button 3
  <View>
  // List
  <Image source={{uri or require: "list"}} style={{position: 'absolute', height: xy%, width: ab%}}/>
  </View>

</View>

Divided into separate views enables us to center the images inside of the nested smaller views.