discrepancy between debug and release rendering

[mcconkiee]

Hi - I have an effect to which I am unclear the issue. When building in debug the module works as expected: however in release build, it looks like this:

the relative code :

render(){
const bubble = StaticIcons.imageForIcon("chat-bubble-light");
const sz = 8;
....
<ImageCapInset
          style={{
            padding: 20
          }}
          source={bubble}
          capInsets={{
            top: sz,
            right: sz,
            bottom: sz,
            left: sz
          }}
        >
          <View>
            <Text>This is a test</Text>
            <Text>This is a test</Text>
            <Text>This is a test</Text>
          </View>
        </ImageCapInset>
....
}

I am unclear how to resolve this issue. Any help is appreciated!

[hblumberg]

I have also noticed this! Any insights since your post, @mcconkiee?

[tcherna]

Hi. We're also seeing this. I think it is related to: issue on stackoverflow and the fact that the code in RCTImageCapInsetView.java is storing the density ratio in an int.

int ratio = Math.round(bitmap.getDensity() / 160); int top = mCapInsets.top * ratio;

[EyMaddis]

@hblumberg can you open a PR with your changes please? https://github.com/Khan/react-native-image-capinsets/commit/063c3d5fd0a5e2edadc8886506dfd755c5a78938

[tcherna]

I've been trying to read about the difference in bitmap density vs. device density, re @hblumberg's change. It seems to me that ordinarily, they'd match, but if the app didn't provide all the appropriate sized images, then wouldn't the closest bitmap be provided (with the system scaling as required). At that point, wouldn't the bitmap density be a better choice? Thoughts?

[hblumberg]

I'd be happy to open a PR with my change, @EyMaddis, but unfortunately it doesn't fix the debug vs. release discrepancy. 1.5x devices (for example) still look distorted on debug builds, but correct on release builds.

I didn't make a PR because of @tcherna's point. I do think it's worth rounding later (after multiplying by the insets), but I'm not sure if folks rely on the existing density calculation.

[tcherna]

@hblumberg, Had you tried your code with the later rounding but using the bitmap density calculation to see how it performed with debug/release?

[tcherna]

I did some logging and testing and I actually don't see any difference in the values from getDisplayMetrics().density vs bitmap.getDensity()/160.0f. On the device where I do see a rendering error in debug, the issue is that the bitmap returned is the wrong size compared with release (it looks like its a 2x image vs the scaled image), which doesn't make sense since the factory is always supposed to return an image scaled to the target density (by default).

[DevopsElectricJukebox]

We found this an issue too, our solution was to remove the ratio calculation and so the configured nine patch rect area always operates on actual image pixels.

https://github.com/DevopsElectricJukebox/react-native-image-capinsets/commit/e872440f9499bdf28ca1166b0ebc1bc8b721f207

[mayconmesquita]

@DevopsElectricJukebox this is working at production env? thanks