I am trying to make an element of height 30 in React Native. However on Android Pixel 3a the height of the element resolves close to 30, but not quite 30.

The following code snippet results in the element having height of 30.18181800842285. It seems to only happen on on Pixel 3a. Both on emulator and on real device (tested on Browserstack)

Actually looks like it's happening on almost all Pixel phones.

import React from 'react';
import {View} from 'react-native';

export default () => (
  <View
    onLayout={layout => {
      console.log('appText height', layout.nativeEvent.layout.height); // Should be 30, but says 30.18181800842285
    }}
    style={{
      height: 30,
    }}
  />
);

Any idea what could be the reason? I am trying to implement my own scrollpicker using a scrollview and this is completely messing it up. (but only on Pixel 3a)

Link to repo: https://github.com/Waltari10/scrollviewbugreactnative

EDIT: I did some testing on different element heights on different devices

iPhone 13, iPhone 13 mini, pixelRatio is 3

everything exact

iphone 8, pixelRatio is 2

everything exact

3.4 WQVGA_API_32, pixel ratio is 0.75

exact: 24, 28, 32

5.4 mdpi, pixel ratio: 1

exact: 28, 29, 30, 31

Pixel XL, 560 DPI, pixel ratio is 3.5

exact: 24, 26, 28

Pixel 5, 440dpi, pixel ratio: 2,75

exact: 32, 28, 24

not exact: 33, 31, 30, 29

Pixel 3a ratio is 2.75, xxhdpi, 440dpi

exact: 12, 16, 20, 24, 28, 32, 36, 40, 44, 48

Not exact: 30, 31, 32,33,34

Galaxy nexus ratio is 2, xhdpi, 440dpi

exact: 12 - 20

not exact: ???

8 Fold-Out API 31, 2200 x 2480dpi, xxhdpi, ratio is 2.625

exact: 16, 24, 32, 40

not exact: 14, 15, 17, 18, 19, 20, 21, 22, 23, 25, 26, 27, 28, 29, 30, 31

3.7 FWVA slider API 29, hdpi, 480 x 854, ratio is 1.5

exact: 40, 38, 36, 34, 33

not exact: 39, 37, 35