Not able to show the react-native-pdf Pdf inside a Modal view

Question

I have a component where I want to show the pdf inside a popup. I am using react-native-pdf. When I use the Pdf component directly then I can see the pdf content, but when I try to use it in Modal, it is not working.

import Pdf from 'react-native-pdf';

class ModalImage extends React.Component {
  

  render() {    
    console.log("Props in modalImage",this.props)
    return (
      <Modal
        animationType="fade"
        transparent={false}
        visible={this.props.modalVisible}
        onRequestClose={() => {
          this.props.closeModalVisible(!this.props.modalVisible);
        }}
      >
        <View style={styles.modalContainer}>
          <Text style={{ position: "absolute", top: 120, marginLeft: 12, marginRight: 12, fontSize: 16, color: "black", fontFamily: "Roboto-Bold" }}>Note: Please wait while we load the file. This may take some time, especially if it is a large file.</Text>
          <ScrollView horizontal={true}>            
            {
              this.props.imageType === "pdf" ? 
                
                    <Pdf style={{height:'100%', width:'100%', backgroundColor:'blue', zIndex: 99999}} source={{ uri: 'file://' + this.state.androidFilePath }} />
                
              :            

            <Image
              style={{
                width: this.state.transForm === 90 || this.state.transForm === 270 ? this.state.height : this.state.width,
                height: this.state.transForm === 90 || this.state.transForm === 270 ? this.state.width : this.state.height, marginTop: 100,
                transform: [{ rotate: this.state.transForm.toString() + "deg" }]
              }}
              resizeMode="contain"
              source={{ uri: this.props.imageAddress }}
            />
          }
          </ScrollView>
          <View style={styles.close_btn_container}>
            <TouchableOpacity
              onPress={() => {
                if (this.state.originWidth + 500 > this.state.width) {
                  this.setState({ width: this.state.width + 100 })
                }
              }}
              style={{ marginRight: 20 }}
            >
              <Image
                style={{
                  width: 30,
                  height: 30
                }}
                source={require("../../img/zoomIn.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              style={{ marginRight: 20 }}
              onPress={() => {
                if (this.state.originWidth < this.state.width) {
                  this.setState({ width: this.state.width - 100 });
                }
              }}
            >
              <Image
                source={require("./../../img/zoomOut.png")}
                style={styles.img_icon}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                if (this.state.transForm >= 360) {
                  this.setState({ transForm: 90 });
                } else {
                  this.setState({
                    transForm: this.state.transForm + 90
                  });
                }
              }}
              style={{ marginRight: 20 }}
            >
              <Image
                style={{
                  width: 30,
                  height: 30
                }}
                source={require("../../img/transform.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              style={{ marginRight: 20 }}
              onPress={() => {
                if (this.props.isFileDownloaded) {
                  const http = this.props.imageAddress.startsWith("http");
                  const https = this.props.imageAddress.startsWith("https");
                  if (http || https) {
                    this.props.downloadImage(
                      this.props.imageAddress,
                      this.props.imageName
                    );
                  } else {
                    Alert.alert(
                      "Alert",
                      `The image url does not start with http / https`
                    );
                  }
                }
              }}
            >
              <Image
                source={require("./../../img/download.png")}
                style={styles.img_icon}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                reduxStore.dispatch({
                  type: ActionTypes.TOGGLE_PATIENT_PROFILE_VIEW,
                  data: false,
                });
                this.props.closeModalVisible(!this.props.modalVisible);
              }}
            >
              <Image
                resizeMode="cover"
                style={styles.img_icon}
                source={require("../../img/error.png")}
              />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }
}

I tried giving z index to check if the pdf came behind the modal, still it is not working. Any pointers or help would be really appreciated.

Answer 1

You can try this implementation:

import {Dimensions} from 'react-native';
...
<Pdf 
  style={{
    height: Dimensions.get('window').height, 
    width: Dimensions.get('window').width, 
    backgroundColor:'blue'
  }} 
  source={{ uri: 'file://' + this.state.androidFilePath }} 
/>

Alternatively, if you prefer not to view the PDF in full screen, you have the option to adjust its dimensions by specifying the width and height in pixels (absolute sizing), as opposed to using a percentage (relative sizing).