PathShape draws with different scale on different iPhone models

[tomsotte]

I've been trying to draw a path on iOS and I've noticed that the same path draws with different size and scale on different iPhone models. I don't understand what's the scale factor and how that gets calculated.

I'm using these versions:

"react": "16.11.0",
"react-native": "0.62.2",
"react-native-image-filter-kit": "0.7.1"

For reference e reproducibility see the snippet below and the screenshot for the output of this self-encapsulated component that show differently on different iPhones.

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {
  PathShape,
  lineTo,
  closePath,
  moveTo,
} from 'react-native-image-filter-kit';
import {SafeAreaView} from 'react-native-safe-area-context';

const points = [
  {x: 0, y: 0},
  {x: 100, y: 0},
  {x: 100, y: 100},
  {x: 1, y: 100},
];
const box = {height: 100, offsetX: 0, offsetY: 0, width: 100};

export const DrawShape: React.FC = () => {
  const path = [
    moveTo(points[0].x, points[0].y),
    ...points.slice(1, points.length).map((point) => lineTo(point.x, point.y)),
    closePath(),
  ];

  return (
    <SafeAreaView style={{position: 'relative', marginTop: 100}}>
      <View
        style={[
          StyleSheet.absoluteFillObject,
          {
            top: box.offsetY,
            left: box.offsetX,
            width: box.width,
            height: box.height,
            borderWidth: 1,
            borderColor: 'red',
          },
        ]}>
        <PathShape path={path} color={'blue'} disableCache={true} />
      </View>
    </SafeAreaView>
  );
};

[tomsotte]

We've found we can use PixelRatio.get() to get the scaling we need to fill the container box. We can close this, thanks for the amazing library you made!