How To Add Page Number In PDF File In React Native

npm install @react-pdf/renderer --save

import { Document, Page } from '@react-pdf/renderer'

const doc = () => (
  <Document>
    <Page wrap>
      <Text render={({ pageNumber, totalPages }) => (
        `${pageNumber} / ${totalPages}`
      )} fixed />

      <View render={({ pageNumber }) => (
        pageNumber % 2 === 0 && (
          <View style={{ background: 'red' }}>
            <Text>I'm only visible in odd pages!</Text>
          </View>
        )
      )} />
    </Page>
  </Document>
);

const styles = StyleSheet.create({
  page: { padding: 60 },
  box: { width: '100%', marginBottom: 30, borderRadius: 5 },
  pageNumbers: {
    position: 'absolute',
    bottom: 20,
    left: 0,
    right: 0,
    textAlign: 'center'
  },
});

const doc = (
  <Document>
    <Page style={styles.page} size="A4" wrap>
      <View style={[styles.box, { height: 400, backgroundColor: 'black' }]} />
      <View style={[styles.box, { height: 280, backgroundColor: 'lightgray' }]} />
      <View style={[styles.box, { height: 600, backgroundColor: 'deepskyblue' }]} />
      <View style={[styles.box, { height: 400, backgroundColor: 'olive' }]} />
      <Text style={styles.pageNumbers} render={({ pageNumber, totalPages }) => (
        `${pageNumber} / ${totalPages}`
      )} fixed />
    </Page>
  </Document>
);

ReactPDF.render(doc);