Card.Cover padding

[Rankarusu]

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

[haydencrain]

+1 Can reproduce.

This is quite odd since Git blame shows this has been in the source code for 9 years

[haydencrain]

For now I've just copied across from the source code and removed the padding and it works for my limited use cases

[gcgoncalves]

Just to report I'm getting the same behaviour, but only on iOS, not on android.

software	version
ios	16.2
android	16
react-native	0.76.9
react-native-paper	5.13.1
node	v23.11.0
yarn	1.22.22

[Rankarusu]

I've just used a yarn patch to remove the padding. I have not noticed any other issues arising from this.

diff --git a/src/components/Card/CardCover.tsx b/src/components/Card/CardCover.tsx
index 337de2a94402e3e82908e4b00cffcc9cef2bd97b..cc19fa788f54bb7cbee215906eb4078eb2f3ffc2 100644
--- a/src/components/Card/CardCover.tsx
+++ b/src/components/Card/CardCover.tsx
@@ -86,7 +86,9 @@ const styles = StyleSheet.create({
     flex: 1,
     height: undefined,
     width: undefined,
-    padding: 16,
+    // patched because of upstream bug: 
+    // https://github.com/callstack/react-native-paper/issues/4648
+    // padding: 16,
     justifyContent: 'flex-end',
   },
 });