App.jsx

import { StatusBar } from "expo-status-bar";
import { StyleSheet, SafeAreaView, ScrollView, View, Text } from "react-native";
import { Provider as PaperProvider, Button } from "react-native-paper";

import KittenCard from "./components/KittenCard";

export default function App() {
  return (
    <PaperProvider>
      <StatusBar style="auto" translucent={false} />
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView>
          <KittenCard
            style={{ borderWidth: 2, borderColor: "red", marginBottom: 32 }}
            image="https://placekitten.com/390/240"
            title="Teste do primeiro gatinho"
            buttonLabel="Saiba mais sobre este gatinho"
            buttonPress={() => {
              alert("Clicou no primeiro botão");
            }}
          >
            <Text>Texto de apoio falando sobre o gatinho bonito</Text>
            <View style={{ width: 30, height: 30, backgroundColor: "green", marginBottom: 21 }} />
            <Text>Mais texto</Text>
            <Button mode="outlined" onPress={() => {}}>
              Pouco botão né
            </Button>
          </KittenCard>
          <KittenCard
            style={{ marginBottom: 21 }}
            image="https://www.fillmurray.com/390/240"
            title="Teste do outro"
            buttonPress={() => {
              alert("Clicou no bill murray");
            }}
          />
          <KittenCard
            title="Teste do terceiro"
            text="Texto de apoio falando sobre o gatinho bonito"
            buttonPress={() => {
              alert("Clicou no último");
            }}
          />
        </ScrollView>
      </SafeAreaView>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
});

KittenCard.jsx

import { Card, Button } from "react-native-paper";

export default function KittenCard({ image, title, children, buttonLabel = "Clique aqui", buttonPress, ...props }) {
  return (
    <Card {...props}>
      {image && <Card.Cover source={{ uri: image }} />}
      <Card.Title title={title} />
      {children && <Card.Content>{children}</Card.Content>}
      <Card.Actions>
        <Button mode="contained" onPress={buttonPress}>
          {buttonLabel}
        </Button>
      </Card.Actions>
    </Card>
  );
}