How to add inner border radius of shadow div in react native

Question

How do i apply inner border radius to my element like below, border radius applies it to outside shadow

What mine looks like:

Code:

        const getCheckListData = (): React.ReactNode => {
    return checkListJSON.map(
        (checklist: CheckListInterface, index: number): React.ReactNode => {
            return (
                <View style={[styles.checkListTile, styles.checkListTileGreen]} key={index}>
                    <Text style={styles.checkListTileText}>{checklist.value}</Text>
                </View>
            );
        },
    );
};

 

    checkListTileGreen: {
            shadowColor: ThemeConfigs.defaultColors.primaryLightColor,
            shadowOpacity: ThemeConfigs.defaultCard.shadowOpacity,
        },
            checkListTile: {
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            flexShrink: 1,
            width: wp('28%'),
            height: hp('15%'),
            marginTop: hp('1.5%'),
            marginRight: wp('1.5%'),
            color: ThemeConfigs.defaultColors.textSecondaryColor,
            shadowOffset: {
                width: 1,
                height: 0,
            },
            elevation: 10,
            borderRadius: hp('2%'),
        },

Answer 1

Try the following:

1. Increase your border-radius: 2% to a higher value. Lets say border-radius: 50%
2. Add overflow: hidden; to your checkListTileGreen class