Skip to content

Card.Cover paddingΒ #4648

@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

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions