CODEWITHSUNDEEP
reactjsreact-nativepng
Bruno Farias
Bruno Farias

Reputation: 913

React Native adding border to PNG

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 }} />

enter image description here enter image description here

Upvotes: 0

Views: 421

Answers (1)

William Brochensque junior
William Brochensque junior

Reputation: 2972

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
    }} 
/>

Upvotes: 2

Related Questions