white space when put image inside CardView with radius

[LuongTruong]

Describe the bug
In Android version 4.4. I make an image with radius 16 and put it inside the CardView with radius 16 too.

The result:

• Image and CardView both have radius 16.

• CardView without style attribute:
  
  Image is from Berry Good

• CardView with style attribute:

  • When I set the style (width and height) of CardView equal to width and height of image. My image do not have radius.

Expected behavior
I wish the CardView can wrap my image without any white space

Smartphone (please complete the following information):

• Device: [Nexus 5]
• OS: [Android ]
• Version: [4.4]

If you need any information, please let me know. Thank you very much for your great hard-working

[Kishanjvaghela]

Did you check with API > 21?

[LuongTruong]

Hi @Kishanjvaghela : yes, I checked it. It works like a charm with API >= 21.

[Kishanjvaghela]

Can you share me your code?

[LuongTruong]

Hi @Kishanjvaghela , I am really sorry for the late comment. I prepare a code to reproduce this issue.

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @Format
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import CardView from 'react-native-cardview'

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to React Native Card View!</Text>

                <CardView
                    cardElevation={5}
                    cardMaxElevation={5}
                    cornerRadius={16}
                    style={styles.cardView}>

                    <Image
                        style={styles.image}
                        resizeMode={'cover'}
                        resizeMethod={'resize'}
                        source={{uri: "https://static.asiachan.com/Berry.Good.full.42296.jpg"}}/>
                </CardView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    cardView: {
        height: 300,
        width: 300,
    },
    image: {
        height: 300,
        width: 300,
        borderRadius: 16,
        backgroundColor: 'grey',
    }
});

Here is the screenshot of Android Version 4.4 and 5.0:

As you can see, in the Android version 4.4 there are something strange:

1/ Height and width of card view equal height and width of the image: Only the top left corner has border radius

2/ Remove height and width of card view, keep height and width of image: border radius affect all corner of image, but there will be extra white space

The working case:
1/ Remove the border radius of both image and card-view.
2/ Set height and width of card view equal height and width of image.

If you need any information, please let me know. I am willing to hear from you.

Thank you for your library. It is great because it can solve the shadow issue in Android < 5.0, which can not be done by react native.

[Kishanjvaghela]

Are you using v2.0.2?

[LuongTruong]

@Kishanjvaghela : yes, I am

[arfa123]

Any update of this issue?

[LuongTruong]

no, I plan to create 2 layers. One is for shadow and one is for image

[Bessonov]

same issue with "react-native-cardview": "2.0.2", on Nexus 4/Android 4.4.4 :(