I'm rendering a View with an Image that has an 8 pixel margin around it. When the image is pressed, it changes to a new component that is the same Image with no margin. On android this picture "grows" nicely, but I just started testing on an iphone and the screen flashes white while transitioning. The code looks something like this
{ zoom ? (<View style={{ margin: 0 }} ><other components ...><Image ... /></View> ) : (<TouchableOpacity style={{ margin: 8 }} ><other components ...><Image ... /></TouchableOpacity> )}When the image is pressed, the zoom boolean changes from false to true, and renders the other image with no margin.
How can I prevent ios flashing white when changing between these two components?