How to show multiple components in a specific position inside of a parent component in react-native?

I am trying to render multiple components inside of a parent component on a specific position (based on some calculations). The calculations that give me the vertical position look correct, but the components are not displayed in the position they should. I have tried both absolute window position and relative component position with no luck.

The parent looks like follows:

const top = 170;const bottom = 10;const left = 10;const right = 10;const styles = StyleSheet.create({  grid: {    flex: 1,    position: 'absolute',    top: top,    height: Dimensions.get('window').height - top - bottom,    width: Dimensions.get('window').width - left - right,    borderLeftColor: 'black',    borderLeftWidth: 1,    borderBottomColor: 'black',    borderBottomWidth: 1  }});const DrawGrid: React.FC<IDrawGrid> = ({ maxDistance, elements }) => {  const [gridSize, setGridSize] = useState<LayoutRectangle>();  return (<View style={styles.grid} onLayout={(event) => {      setGridSize(event.nativeEvent.layout);    }}>      {elements.map((element, index) => {        return (<DrawElement element={element} maxDistance={maxDistance} gridSize={gridSize} index={index * 2} />        )      })}</View>  );};

And the child component that renders all the elements looks like follows:

const top = 170;const bottom = 20;const left = 10;const right = 10;const styles = StyleSheet.create({  elementContainer: {    borderLeftColor: 'red',    borderLeftWidth: 1,    borderTopColor: 'red',    borderTopWidth: 1,    borderRightColor: 'red',    borderRightWidth: 1,    borderBottomColor: 'red',    borderBottomWidth: 1,    borderRadius: 5,    padding: 2,    position: 'relative',    alignSelf: 'flex-start'  }});const getVerticalPosition = (someDistance: number, maxDistance: number, height: number) => {  if (!someDistance || !maxDistance) return { top: 0 };  const topDistance = (1 - (someDistance / maxDistance)) * height;  return { top: topDistance };};const DrawElement: React.FC<IDrawElement> = ({ maxDistance, element, gridSize, index }) => {  const styleVertical = getVerticalPosition(someDistance, maxDistance, gridSize.height);  return (<View key={key} style={[styles.elementContainer, styleVertical]}>      {/* <Text>x</Text> */}</View>  );};

I can see how getVerticalPosition returns the right value, but the element is never located in the position expected. It is quite frustrating to see how an element that has top 50 can appear vertically in between two elements that have top 100 and top 80, respectively. My first thought was that I am messing up the styles somehow, I also tried giving a different zindex to each element without luck. Any ideas what could happen? Any help would be much appreciated, thank you!