component doesn't render #15

kristkirp · 2018-06-13T20:14:04Z

Hi i have following versions:

"devDependencies": {
"jest-expo": "27.0.0",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"dependencies": {
"expo": "^27.0.0",
"react": "^16.3.1",
"react-native": "^0.55.4"
}

"expo": {
"sdkVersion": "27.0.0",
}

The component doesn't give any error just nothing. The problem is not in uri/base64 they are fine, i tried uri from your example

This is the code:
KeyboardAvoidingView keyboardVerticalOffset={80} behavior="padding" style={{ flex: 1 }}
ScrollView style={{ flex: 1 }}
View style={{ flex: 1,
paddingTop: Constants.statusBarHeight}}>
<PDFReader
source={{ uri: "http://gahp.net/wp-content/uploads/2017/09/sample.pdf" }}
/>
View
ScrollView
KeyboardAvoidingView

Thank you

upd: the full code not displayed i don't know why, it displays only in edit mode

xcarpentier · 2018-06-13T21:14:19Z

What do you mean by display only on edit mode?

kristkirp · 2018-06-13T23:10:35Z

I updated code in questions, had to remove "<" and "/>" because it doesn't show fully with with them

kristkirp · 2018-06-13T23:11:32Z

So my PDFReader is inside View, ScrollView, KeyboardAvoidingView

xcarpentier · 2018-06-14T05:42:12Z

iOS or android ?
On device or emulator ?
If you use it only into <View/> does it works?

For now I recommend to use this component in full screen.

xcarpentier · 2018-06-14T05:42:33Z

Can you provide a screenshot?

kristkirp · 2018-06-14T14:01:59Z

When it is wrapped in just a View it works! Thank you for help! :)

xcarpentier · 2018-06-14T14:13:21Z

Close and add in FAQ: https://github.com/xcarpentier/rn-pdf-reader-js#faq

Sanj98 · 2018-12-26T09:26:18Z

Hi
The component does not render and your index.js file throws errors as below
which says "[js] 'types' can only be used in a .ts file."

PLEASE HELP ME OUT

ghost · 2019-01-09T18:15:16Z

Hi there, I keep getting this error:
"console.error: Unable to get result of file due to bad type, waiting string and getting object."
Could some assist please? I will provide more info if needed.

This is what is pass to the PDFReader:

<PDFReader
source={{ uri: "http://gahp.net/wp-content/uploads/2017/09/sample.pdf" }}
/>

My package.json:
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^31.0.6",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"moment-timezone": "^0.5.23",
"native-base": "^2.8.1",
"prop-types": "^15.6.2",
"react": "16.5.0",
"react-moment": "^0.8.4",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-datepicker": "^1.7.2",
"react-native-fetch-blob": "^0.10.8",
"react-native-modal-dropdown": "^0.6.2",
"react-native-popup-dialog": "^0.16.6",
"react-native-vector-icons": "^6.0.2",
"react-navigation": "^2.17.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"rn-pdf-reader-js": "^0.1.7"
}
}

fabiendeborde · 2019-03-04T10:21:05Z

I am having the same issue as the one described above.
The code was working a few weeks ago and today when I came back to debug another part of the app I realized the PDF Reader was broken.
I tried to render the code below instead to be sure I didn't mess something with my URI but I still code the same error message.
<PDFReader source={{ uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf' }} />

Could it be related to the upgrade to expo 31?

thiagosouzasi · 2020-05-05T21:21:16Z

Hello guys, I solved the display problem by adding the following code inside the styles

pdf: {
width: Dimensions.get ('window'). width,
height: Dimensions.get ('window'). height,
},

Jayeshkarma · 2020-07-02T04:41:11Z

`import React, { memo } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native'
import PDFReader from 'rn-pdf-reader-js'
const LearningScreen = props => {

return( 
  <View style={styles.container}> 
    <PDFReader style={styles.pdf}
      source={{
        uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf',
      }}
    />
  </View> 
)

}
const styles = StyleSheet.create({
container:{
justifyContent:'center',
flex:1,

      backgroundColor:'red'
  },

  pdf: {
    width: Dimensions.get ('window'). width,
    height: Dimensions.get ('window'). height,
    backgroundColor:'#000'
    },
});

export default memo(LearningScreen);`

not showing anything on screen please help me to solve it

xTurbeaux · 2021-02-19T15:01:03Z

does anyone use the headers? cant get mine to track to the desired destination set on the pdf, honestly Im not even sure if I have this configured properly

Vishal-Ramanlal · 2021-05-31T23:16:03Z

Does the work while the device is offline. The following code is what i use.
<PdfReader style={styles.pdf} source={{ uri: path }} />

the path being from the filesystem i.e. file://path.
This code works when the device is online however when i turn of data and wifi, it doesn't load the pdf. Any solutions?

monizb · 2021-08-05T17:09:15Z

Does the work while the device is offline. The following code is what i use.
<PdfReader style={styles.pdf} source={{ uri: path }} />

the path being from the filesystem i.e. file://path.
This code works when the device is online however when i turn of data and wifi, it doesn't load the pdf. Any solutions?

Were you able to fix this?

AlacranBlanco · 2021-08-27T02:57:15Z

i tried "<View>" but it didn't work, but i use a template tag "<>" and it works

monizb · 2021-08-27T03:57:40Z

Does the work while the device is offline. The following code is what i use.
<PdfReader style={styles.pdf} source={{ uri: path }} />

the path being from the filesystem i.e. file://path.
This code works when the device is online however when i turn of data and wifi, it doesn't load the pdf. Any solutions?

So on closely looking at the code I realized that offline pdf will load from your local file storage but the Pdf viewer itself requires an internet connection to load CDN files, so the device has to be online

AlacranBlanco · 2021-08-27T05:53:41Z

Hi!

NOTE: Please read docs from EXPO about FileSystem before continue reading this: https://docs.expo.dev/versions/latest/sdk/filesystem

I did my "best" approach to play the reader OFFLINE/ONLINE loading files https:// or file://;

1 .- You have to download the CDN the first time that user use the APP, then save it in the storage using FileSystem, obviously the first time that our user use the app it has to be ONLINE

I did this in my App.js, this is my first screen to render in my app

2 .- Then you have to edit the index.js file of the module "rn-pdf-reader-js" like this, this means that were always loading CDN from our device no from internet

2.1 .- Edit the HTML like this

3 .- And voilà, you can actually render the PDF reader OFFLINE this only works with files that are store in our device (ie. file://)

I KNOW THAT THIS IS NOT THE BEST OPTION BUT THIS IS A GOOD WORKAROUND TO SOLVE THIS

I KNOW THAT THIS MODULE WILL CHANGE EVERYTIME THAT WE RUN "NPM INSTALL", THIS MEANS THAT "index.js" WILL NOT WORK TILL WE CHANGE IT AGAIN (STEP #2)

THANKS TO @monizb for the feedback

monizb · 2021-08-27T07:33:02Z

That's a brilliant workaround!

sylvio-ruiz · 2022-03-15T14:05:48Z

Hi!

NOTE: Please read docs from EXPO about FileSystem before continue reading this: https://docs.expo.dev/versions/latest/sdk/filesystem

I did my "best" approach to play the reader OFFLINE/ONLINE loading files https:// or file://;

1 .- You have to download the CDN the first time that user use the APP, then save it in the storage using FileSystem, obviously the first time that our user use the app it has to be ONLINE

I did this in my App.js, this is my first screen to render in my app

2 .- Then you have to edit the index.js file of the module "rn-pdf-reader-js" like this, this means that were always loading CDN from our device no from internet

2.1 .- Edit the HTML like this

3 .- And voilà, you can actually render the PDF reader OFFLINE this only works with files that are store in our device (ie. file://)

I KNOW THAT THIS IS NOT THE BEST OPTION BUT THIS IS A GOOD WORKAROUND TO SOLVE THIS

I KNOW THAT THIS MODULE WILL CHANGE EVERYTIME THAT WE RUN "NPM INSTALL", THIS MEANS THAT "index.js" WILL NOT WORK TILL WE CHANGE IT AGAIN (STEP #2)

THANKS TO @monizb for the feedback

Are you sure that FileSystem.readDirectoryAsync will return an array on the same file order that you dowload them? If not the pdfjsLib.GlobalWorkerOptions.workerSrc can get the wrong destination source. You must to make sure where they are before passing them to the scripts tags and off course to the key (workerSrc) above. So you must to reorder the array.

await writeAsStringAsync(htmlPath, viewerHtml(data, customStyle, withScroll, withPinchZoom, maximumPinchZoomScale, cndList.sort()));

So the cdnList will return the alphabetic order, even if it was not, and you will know exactly where is the index for each filepath.

So, if you do not want to change the indexes that you already added to the in the index.js, just add a prefix to each file when you created them to dowload like rn1-, rn2- , rn3-, rn4-, rn5- and prepend them in each file since they are on the same order that you added them to the index.js, but keep the cndList.sort(), just to be sure they will be where we want.

Another solution is do the same thing that xcaperntier did, embed each js file as base64 on the bundleContainer and call a function to decode the string and write it to a file with a name that you wish and add it to the source of html. In this case, the pdf viewer will work even the user open it first time without a connection. xcarpentier save and remove it when the component will unmount, but you can leave them there.

Good solution, thank you.

Great work!

visharma14 · 2022-05-26T10:12:57Z

why my hooks dosent render a pdf by using fetch api in rn-pdf-reader-js . please help i'm new in this native

thecompoundingdev · 2022-08-05T18:01:57Z

@AlacranBlanco
Hi Alacran! I'm having some trouble displaying the viewer with a base64 pdf. You seem like you've figured this package out pretty well- I'd love to chat with you for a few minutes!

alt2cl · 2023-09-26T18:53:22Z

Is this project compatible with SDK 49?

mktspace · 2023-11-02T08:16:12Z

Seeing error with SDK 49. Has anyone tried using with SDK49.

Error: Cannot convert value to null object

Works fine with SDK48. WebView package dependency seem like

kirtikapadiya · 2024-01-23T12:53:36Z

@mktspace I also found same issue on expo SDK 49
Its not working in android device.
Reproducible snack demo : https://snack.expo.dev/@kirtikk/pdfreader-expo-49?platform=android

xcarpentier closed this as completed Jun 14, 2018

Sanj98 mentioned this issue Dec 26, 2018

Component does not render...........help please #32

Closed

kirtikapadiya mentioned this issue Jan 24, 2024

rn-pdf-reader-js not working with react native expo SDK 49 in android. #200

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

component doesn't render #15

component doesn't render #15

kristkirp commented Jun 13, 2018 •

edited

Loading

xcarpentier commented Jun 13, 2018

kristkirp commented Jun 13, 2018

kristkirp commented Jun 13, 2018

xcarpentier commented Jun 14, 2018

xcarpentier commented Jun 14, 2018

kristkirp commented Jun 14, 2018

xcarpentier commented Jun 14, 2018

Sanj98 commented Dec 26, 2018 •

edited

Loading

ghost commented Jan 9, 2019 •

edited by ghost

Loading

fabiendeborde commented Mar 4, 2019

thiagosouzasi commented May 5, 2020

Jayeshkarma commented Jul 2, 2020

xTurbeaux commented Feb 19, 2021

Vishal-Ramanlal commented May 31, 2021

monizb commented Aug 5, 2021

AlacranBlanco commented Aug 27, 2021 •

edited

Loading

monizb commented Aug 27, 2021

AlacranBlanco commented Aug 27, 2021 •

edited

Loading

monizb commented Aug 27, 2021 •

edited

Loading

sylvio-ruiz commented Mar 15, 2022 •

edited

Loading

visharma14 commented May 26, 2022

thecompoundingdev commented Aug 5, 2022 •

edited

Loading

alt2cl commented Sep 26, 2023

mktspace commented Nov 2, 2023

kirtikapadiya commented Jan 23, 2024 •

edited

Loading

component doesn't render #15

component doesn't render #15

Comments

kristkirp commented Jun 13, 2018 • edited Loading

xcarpentier commented Jun 13, 2018

kristkirp commented Jun 13, 2018

kristkirp commented Jun 13, 2018

xcarpentier commented Jun 14, 2018

xcarpentier commented Jun 14, 2018

kristkirp commented Jun 14, 2018

xcarpentier commented Jun 14, 2018

Sanj98 commented Dec 26, 2018 • edited Loading

ghost commented Jan 9, 2019 • edited by ghost Loading

fabiendeborde commented Mar 4, 2019

thiagosouzasi commented May 5, 2020

Jayeshkarma commented Jul 2, 2020

xTurbeaux commented Feb 19, 2021

Vishal-Ramanlal commented May 31, 2021

monizb commented Aug 5, 2021

AlacranBlanco commented Aug 27, 2021 • edited Loading

monizb commented Aug 27, 2021

AlacranBlanco commented Aug 27, 2021 • edited Loading

monizb commented Aug 27, 2021 • edited Loading

sylvio-ruiz commented Mar 15, 2022 • edited Loading

visharma14 commented May 26, 2022

thecompoundingdev commented Aug 5, 2022 • edited Loading

alt2cl commented Sep 26, 2023

mktspace commented Nov 2, 2023

kirtikapadiya commented Jan 23, 2024 • edited Loading

kristkirp commented Jun 13, 2018 •

edited

Loading

Sanj98 commented Dec 26, 2018 •

edited

Loading

ghost commented Jan 9, 2019 •

edited by ghost

Loading

AlacranBlanco commented Aug 27, 2021 •

edited

Loading

AlacranBlanco commented Aug 27, 2021 •

edited

Loading

monizb commented Aug 27, 2021 •

edited

Loading

sylvio-ruiz commented Mar 15, 2022 •

edited

Loading

thecompoundingdev commented Aug 5, 2022 •

edited

Loading

kirtikapadiya commented Jan 23, 2024 •

edited

Loading