Problem

I'm using react-native-pdf in my React Native application to display PDF documents. I've encountered two issues that only happen when displaying a PDF with a single page:

1. The single page appears centered instead of starting at the top of the container
2. The borderRadius styles I've applied to the PDF component aren't working for single-page PDFs

When the PDF has 2 or more pages, everything works as expected - the first page starts at the top of the container and the borderRadius is properly applied.

Code Here's my implementation:

import React, { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, View } from 'react-native';
import Pdf from 'react-native-pdf';

export function DocumentViewerScreen() {
  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulated data loading
    const loadDocument = async () => {
      try {
        // In real app, we'd fetch the PDF from an API
        // This is just for demo purposes
        setPdfUrl('.pdf'); // Or your base64 data URI
        setIsLoading(false);
      } catch (error) {
        setIsLoading(false);
      }
    };
    loadDocument();
  }, []);

  if (isLoading) {
    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} />;
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView
        style={{ flex: 1 }}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.scrollViewContent}>
        <View style={{ height: 60 }}>
          {/* Header placeholder */}
        </View>
        <View style={styles.pdfContainer}>
          {pdfUrl && (
            <Pdf
              trustAllCerts={false}
              source={{
                uri: pdfUrl,
              }}
              style={styles.pdf}
            />
          )}
        </View>
      </ScrollView>
      <View style={styles.buttonContainer}>
        {/* Share button placeholder */}
      </View>
    </SafeAreaView>
  );
}

And here are my styles:

import { BorderRadius } from '@foundation/config';
import { ColorPalette } from '@foundation/config/colorPalette';
import { getScreenHeight, getScreenWidth } from '@foundation/helpers';
import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  scrollViewContent: {
    gap: getScreenHeight(2.5),
    paddingBottom: getScreenHeight(6.4),
    alignItems: 'center',
    flexGrow: 1,
  },
  pdfContainer: {
    flex: 1,
    height: '100%',
    flexDirection: 'column',
    display: 'flex',
    borderWidth: 1,
  },
  pdf: {
    flex: 1,
    width: getScreenWidth(94),
    height: '100%',
    maxHeight: getScreenHeight(100),
    flexDirection: 'column',
    display: 'flex',
    overflow: 'scroll',
    backgroundColor: ColorPalette.BackgroundPrimary,
    borderRadius: BorderRadius.Large,
    borderWidth: 1,
  },
  buttonContainer: {
    position: 'absolute',
    bottom: getScreenHeight(4.1),
  },
});

Expected Behavior:

1. For single page pdf, the document should start from the top of the container, not centered vertically
2. The borderRadius style should be applied to single page PDF.

Current Behavior

• Multi-page PDFs: Everything works as expected - pages start from the top and borderRadius is applied
• Single-page PDFs: The page appears centered vertically in the container and the borderRadius style is not applied

What I've Tried

I've experimented with:

1. Different fitPolicy values (0, 1, 2)
2. Setting singlePage to true/false
3. Adjusting scale, minScale and various other properties
4. Various container styling combinations

Question How can I make single-page PDFs behave the same as multi-page PDFs where they start from the top of the container and properly apply the borderRadius styling?

Image: