How to keep absolute Touchables consistent across various screen sizes?

Question

I have a screen with an png image, I am trying to add touchables on the joints. I want to keep touchabes consistent across screen sizes

This is my code

import { 
  Platform,
  ImageBackground,
  View,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
  PixelRatio
} from 'react-native';

const { width, height } = Dimensions.get('window');
const radius = PixelRatio.roundToNearestPixel(width / 2);
const getWidthPercent = (percent) => (width * percent) / 100;
const getHeightPercent = (percent) => (height * percent) / 100;


<View style={styles.container}>
   <ImageBackground
       style={styles.image}
       resizeMode="contain"
       source={require('../../assets/skeleton-large.png')}>       
        <TouchableOpacity style={styles.leftShoulder}></TouchableOpacity>
        <TouchableOpacity style={styles.rightShoulder}></TouchableOpacity>
           
  </ImageBackground>
</View>

jointStyleDefaults

const jointStyleDefaults = {
  backgroundColor: '#CC41444B',
  position: 'absolute',
  width: radius * 0.3, // to keep the size of circle responsive across screen size
  height: radius * 0.3,
  borderRadius: radius
};

StyleSheet

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },
  image: {
    flex: 1
  },
  leftShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(13),
    bottom: 0,
    right: 0,
    left:  getWidthPercent(25) 
  },
  rightShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(13),
    bottom: 0,
    right: 0,
   left:  getWidthPercent(60) 
  },  
});

I want to keep circular images at fixed point on png across screen sizes. How do i achieve this?

score 0 · Answer 1 · answered Aug 20 '20 at 09:03

0

You should set values dynamically depends on screen size.

You can do it using Dimensions API of react native

React Native Dimensions API

answered Aug 20 '20 at 09:03

Aymen

248
3
15

score 0 · Accepted Answer · answered Aug 20 '20 at 09:40

0

I think you should use percent I can't say correct percent but you need to try with percent then I think we will get the current position. I am adding a quick example but you need to retrieve correct percent by your self. But I think it's the correct way.


const { width, height } = Dimensions.get('window');

const getWidthPercent = percent => width * percent / 100;

// I think you need to subtract ActionBar (Top title bar) and bottom tab bar height from the height then calculate percentage for more accuracy.
const getHeightPercent = percent => height * percent / 100;

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },
  image: {
    flex: 1,
  },
  leftShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(30),
    bottom: 0,
    right: 0,
    left: getWidthPercent(5),
  },
  rightShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(30),
    bottom: 0,
    right: 0,
    left: getWidthPercent(85),
  },
});

answered Aug 20 '20 at 09:40

Nitish

995
7
17

Even if i give the correct percentage, the circles are still not matching as expected – Rizwan Ahmed Shivalli Aug 20 '20 at 13:35
Yes I have, without pixel ratio the circles get bigger on smaller devices. – Rizwan Ahmed Shivalli Aug 21 '20 at 08:44
In this case I think you should use tag and it's onLayout method which will give you correct size of image and then you can retrieve percentage and also you can add marks as absolute even you can calculate marks size by the percent of image height width. – Nitish Aug 21 '20 at 08:57
the onLayout prop is also available on – Rizwan Ahmed Shivalli Aug 21 '20 at 09:10

How to keep absolute Touchables consistent across various screen sizes?

2 Answers2