ImageCard.jsx

import React, { Component } from 'react';
import { ImageBackground, StyleSheet, View } from 'react-native';
import { Card, Title, Paragraph } from 'react-native-paper';

export default class ImageCard extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{ padding: 5, flex: 1 }}>
        <Card style={styles.card} mode='elevated'>
          <ImageBackground
            style={styles.coverImage}
            borderRadius={20}
            source={this.props.image}>
            <View style={styles.textView}>
              <Title style={styles.cardTitle}>{this.props.title}</Title>
              <Paragraph style={styles.cardSub}>{this.props.subtitle}</Paragraph>
            </View>
          </ImageBackground>
        </Card>
      </View>
    );
  }
}


const styles = StyleSheet.create({

  card: {
    borderRadius: 20
  },
  cardTitle: {
    color: '#fff',
    fontSize: 30,
    marginLeft: 5,
  },
  cardSub: {
    color: '#fff',
    fontFamily: 'Roboto',
    fontSize: 20,
    marginLeft: 5,
  },
  textView: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'flex-start',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.65)',
    borderRadius: 20
  },
  coverImage: {
    width: '100%',
    height: 200
  }

});

ShoppingList.jsx

import * as React from 'react';
import { DataTable } from 'react-native-paper';

const optionsPerPage = [2, 3, 4];

const listItems = [
    {
        name: 'Eggs',
        cost: '$1.59',
        amount: '12'
    },
    {
        name: 'Frozen Yogurt',
        cost: '$2.19',
        amount: '4'
    },
    {
        name: 'Iced Coffee',
        cost: '$1.59',
        amount: '1'
    },
    {
        name: 'Chips',
        cost: '$2.89',
        amount: '2'
    },
    {
        name: 'Cereal',
        cost: '$3.49',
        amount: '3'
    }
];

const ShoppingList = () => {
    const [page, setPage] = React.useState(0);
    const [itemsPerPage, setItemsPerPage] = React.useState(optionsPerPage[0]);

    React.useEffect(() => {
        setPage(0);
    }, [itemsPerPage]);

    return (
        <DataTable>
            <DataTable.Header>
                <DataTable.Title>Item</DataTable.Title>
                <DataTable.Title numeric>Cost</DataTable.Title>
                <DataTable.Title numeric>#</DataTable.Title>
            </DataTable.Header>

            {listItems.map((item, index) => (
                <DataTable.Row key={index}>
                    <DataTable.Cell>{item.name}</DataTable.Cell>
                    <DataTable.Cell numeric>{item.cost}</DataTable.Cell>
                    <DataTable.Cell numeric>{item.amount}</DataTable.Cell>
                </DataTable.Row>
            ))}

            <DataTable.Pagination
                page={page}
                numberOfPages={0}
                onPageChange={(page) => setPage(page)}
                optionsPerPage={optionsPerPage}
                itemsPerPage={itemsPerPage}
                setItemsPerPage={setItemsPerPage}
                showFastPagination
                optionsLabel={'Rows per page'}
            />
        </DataTable>
    );
}

export default ShoppingList;