javascriptreact-nativenative-base

React Native Dimensions Inconsistent Units


I have a view width that has been set to 80 (using Native Base):

      <Box
        maxW="80"
        w="80"
        rounded="lg"
        overflow="hidden"
        borderColor="coolGray.200"
        borderWidth="1"
      >

There should be enough for 3 of these components to fit across a screen. When I use const { width } = useWindowDimensions(), the value for my iPad mini comes back as 1133 for the width.

When I do an inspection of the component, it comes back as being 328 in width.

How would I go about determining how many items can fit in a row when the dimensions don't seem to line up? E.g, Converting 80 to 328, or reducing 1133 to be in the same units as the view?

Thanks for your help!

enter image description here


Solution

  • It turns out that NativeBase units are a value of 4 dp. So for w="80", it's 320dp.

    https://github.com/GeekyAnts/NativeBase/discussions/5690