React Native Image resizeMode='contain' distorts some images on Android device and emulator

The resizeMode='contain' in the React Native Image component distorts some images on Android devices and emulators. For most images, it creates a distorted line in the PNG image background. I've tried many different images, also tried resizing them, but nothing fixes the distorted coloured line. Note: All those images look fine on iOS.

Andoid Nexus 10 API 28 emulator

Amazon Fire Tablet 8th Gen.

iPad Pro (11-inch) simulator

Here is my code for the Image component. I am trying to create a grid view of images for a pizza app.

<View style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'stretch',
          }}>
            {/* ==================================First Row ===================================*/}
            <View style={{ height: 600, flexDirection: 'row', backgroundColor: 'transparent', marginVertical: 10 }}>
              <View style={{
                flex: 1, flexDirection: 'column', marginHorizontal: 20,
                borderWidth: 2, borderColor: 'lightgray', borderRadius: 10
              }}>
                <Image
                  style={{
                    flex: 1, height: undefined, width: undefined, borderColor: 'black', borderWidth: 1,
                  }}
                  source={require('./Images/pizza5.png')}
                  resizeMode='contain'>
                </Image>
                <Text style={{ fontSize: 20, marginVertical: 5, marginHorizontal: 10 }}>Pizza 1</Text>
                <Text style={{ fontSize: 17, marginTop: 15, marginBottom: 10, marginHorizontal: 10 }}>$10.99</Text>
              </View>
              <View style={{
                flex: 1, flexDirection: 'column', backgroundColor: 'transparent',
                borderWidth: 2, borderColor: 'lightgray', borderRadius: 10, marginRight: 20,
              }}>
                <Image
                  style={{
                    flex: 1, height: undefined, width: undefined, borderColor: 'black', borderWidth: 1
                  }}
                  source={require('./Images/pizza1copy.png')}
                  resizeMode='contain'>
                </Image>
                <Text style={{ fontSize: 20, marginVertical: 5, marginHorizontal: 10 }}>Pizza 2</Text>
                <Text style={{ fontSize: 17, marginTop: 15, marginBottom: 10, marginHorizontal: 10 }}>$10.99</Text>
              </View>
            </View>
          </View>