Skip to content

Card.Cover padding #4648

Open
Open
@Rankarusu

Description

@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

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions