-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Closed
Description
Current behaviour
I upgraded from react native version 75.4 to 76.7 today. Since that a card component with a cover has weird padding around the cover image.
Expected behaviour
no padding around like before
How to reproduce?
My component looks like this currently
<Card
testID={`${tile.id}_Card`}
disabled={disabled}
key={tile.id}
style={styles.card}
onPress={() => setCurrentApp(app)}
>
<>
<Card.Cover source={{ uri: tile.image }} src={tile.image} />
{disabled && <Card.Cover style={styles.tint} />}
{maintenanceUntil !== null && (
<View style={styles.float}>
<Text variant="bodyLarge">
{t("applicationSelection.maintenance")}
</Text>
</View>
)}
</>
<Card.Title
title={tile.title}
subtitle={tile.description}
titleStyle={disabled ? styles.disabledText : undefined}
subtitleStyle={disabled ? styles.disabledText : undefined}
/>
</Card>Preview
What have you tried so far?
Adding padding:0 to styles does nothing as it affects the View around the image and not the image itself. I looked into papers source code and found, that a padding of 16 is set on the image inside Card.Cover. I have no clue why this was not an issue before now.
Your Environment
| software | version |
|---|---|
| ios | 18 |
| android | 15 |
| react-native | 0.76.7 |
| react-native-paper | 5.13.1 |
| node | 18.20.4 |
| yarn | 1.22.19 |
davddo, haydencrain, gongruya and gcgoncalves