How to place buttons on what i want to place in react native?

Question

before , I had problem with full size of width(100%) In react native, width : 100% is not supported.. so I use var width = Dimensions.get('window').width; //full width this code.

But in this case, I want to place buttons on what I want to place like in this photo

I want to place the hand!! buttons on the hand of body. like width, in react native don't support % .. so I want to place the buttons whatever the size of phone changes

this is my all codes

const MK = require('react-native-material-kit');
import React, { Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  ScrollView
} from 'react-native';
const {
  MKButton,
  MKColor,
} = MK;
const ColoredButton = MKButton.button()
  .withBackgroundColor(MKColor.Amber)
  .build();
const Fab = MKButton.coloredFab()
  .withBackgroundColor(MKColor.Teal)
  .build();
class Test extends Component {
  render() {
    return (
        <ScrollView style={styles.scrollView}>
          <Image
          style={styles.Bodystyle}
          resizeMode='contain'
          source={require('./img/body.png')}>  
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.android.js
            </Text>
            <Text style={styles.instructions}>
              Shake or press menu button for dev menu
            </Text>
            <View style={styles.row}>
            <ColoredButton   
                onPress={() => {
                console.warn('hi, raised button!');
                }}
            >
            <Text pointerEvents="none"
              style={styles.Buttontext}>
              Hand!!
            </Text>
            </ColoredButton>
            <Fab>
              <Text style={styles.Buttontext}>
                Hand!!
              </Text>
            </Fab>
            </View>
          </Image>
        </ScrollView>
    );
  }
}
var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
  scrollView:{
    flex:1,
  },
  row :{
    flexDirection:'row',
  },
  container: {
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flex:1
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  Buttonstyle:{
     justifyContent: 'center',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  Bodystyle:{
    flexDirection:'column',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    width: width,
    height: height,
  },
  Buttontext:{
    textAlign: 'center',
    color: '#000000',
    fontSize: 10,
  }
});

AppRegistry.registerComponent('Test', () => Test);

Answer 1

I can be as simple as

const getPosition = (left, top, width, height) => ({ 
  left: width * left, 
  top: height * top 
})

For example

button: {
  ...(getPosition(0.7, 0.8, imageWidth, imageHeight))
}