reactjs - React Native adding border to PNG

Question

For some reason React Native is displaying the below left and right border when I run my application on iOS (Android is fine). As you can see on the second image, the logo doesn't have any borders at all.

Do you know where it could be coming from?

export const Logo = styled.Image`
  align-self: center;
`;

<Logo source={require('../../assets/logo.png')} style={{ width: 200, height: 200 }} />

question from:https://stackoverflow.com/questions/65829899/react-native-adding-border-to-png

Answer 1

You can add elevation:0 to solve it on Android, and add shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, shadowRadius: 0 to fix it on IOS, like as follow:

export const Logo = styled.Image`
  align-self: center;
`;

<Logo 
    source={require('../../assets/logo.png')} 
    style={{
        width: 200, 
        height: 200, 
        elevation: 0, 
        shadowOffset: { height: 0, width: 0 }, 
        shadowOpacity: 0, 
        shadowRadius: 0
    }} 
/>