Strange results in two different emulators

[CodeByRahulSaini]

Hey, first of all thanks for this awesome package.

I am getting a strange result on two different emulators with the same code.

Another strange thing is when I remove flexWrap: 'wrap', property then design looks the same in both devices with no issue

Any suggestions on how to solve it?

Pixel XL Emulator

Nexus 4 Emulator

Here is my code:

const item = {
      backgroundColor: 'green',
      width: wp('28%'),
      height: wp('28%'),
      margin: wp('1%'),
    }`

   render(){ return (
      <Fragment>
        <View
          style={{
            backgroundColor: 'red',
            flex: 1,
            flexDirection: 'row',
            margin: wp('5%'),
            marginTop: wp('10%'),
            flexWrap: 'wrap',
          }}
        >
          <View style={item} />
          <View style={item} />
          <View style={item} />
        </View></Fragment>)
}

[cvlos]

Hello @IMRahulSaini , the behavior you are explaining is exactly what you would expect from flexWrap property. This may help https://reactnative.dev/docs/flexbox#flex-wrap

[CodeByRahulSaini]

Actually my point is if I am using 'wp()' everywhere means some responsive value, then both emulators should show content equally i.e. three boxes in a line

[mir1198yusuf]

It seems wrong value for width is being returned by emulator. Might be emulator error instead of library error. Can you log the width of both emulators & check if that's correct ?