What is the best approach for building a Quran reading app? - react-native

I'm building a Quran reading option in an React-native app. I have some troubles finding the right approche concerning using pdf or png images.
I have tried react-native-pdf but i have some issues. The png option gives the best rendering result in 'PORTRAIT' but in 'LANDSCAPE' the image cant be scrolled vertically to see the entire image; ive tried scrollView inside FlatList.
Thanks!

Avoid PDF.
Check this repository:
https://github.com/semarketir/quranjson
It contains everything you need to build a quran app in react and host everything in your own server or offline
Use this if you want more control:
https://alquran.cloud/api
But it will require the user to be online

Related

React native how to create a pdf inside a card?

Can anyone help me to create the above design in react native.
I am using react-native-pdf library but I could not find a way to implement above design.
I think we should not have to load all the PDFs in card lists.
The proper way should be to use thumbnails of PDF files to show the PDF previews and when the user selects the Card then we can show the PDF Content to the user.
Here below I will suggest you have a try using the below NPM package which might workaround for your requirement.
React Native PDF Thumbnail

React native unrecognized font family using external Svg

I'm implementing a react native app (with expo, I don't know if this can be relevant). In this app I'm sending an ajax request to an external service and that service returns a list of URLs related to images in svg format that I need to show in my app.
To show the images I'm using react-native-svg library (I've tried with Svg/Image and with SvgUri). Generally it work properly, but there is some SVG that break my app, because it includes a font-family not supported by my react-native project and the iOS simulator is showing me the error: Unrecognized font family '<FONT-FAMILY-NAME>'.
I've already checked several post on stackoverflow and they all suggest to add the specific font-family to the project, but this solution will not fix my issue in log term as in future I can receive a new SVG file with a different font that will break again my app. I obviously have absolutely no control on the SVG provided by the external service. So, what I'm interested to know is:
Is there any way to add dynamically a font-family to react-native project? For dynamically I mean that the app will add the font to its list when it's required by the SVG file
By using Svg/Image (or with SvgUri) is there any way I can overwrite the font to avoid it to break the app?
Thanks in advance for your answers.

Are there some PDF display plagins for React native expo

I am working on an e-library project, where we have to display pdf books for children.
I would like to know if I can find some PDF plugins to display PDF nicely.
I used to have the same problem and I figured out, that Android works very well with rn-pdf-reader-js. On the other hand, for ios WebView component is 100% sufficient to display PDF content, so I switched (depends on the platform) between the two of them.

React Native 360/Panorama viewer

I believe there are a bunch of questions related to this, but they are all outdated.
I'm looking for a way to render a panorama/360 picture viewer in React Native. So far, all the libraries that try to use Google's VR SDK are outdated or broken, and not usable at all.
I have also tried to use a WebView (with react-360), but web views are just way too slow, doubles RAM usage, and worst of all, can't be used to render 360 pictures stored on the device.
I guess that another option would be to grab an OpenGL library and try to implement it myself, but that's probably a lot of work if there's something made already.
We've recently published the panorama viewer we are using in our apps. Hope it can help you too. #lightbase/react-native-panorama-view

Xamarin forms Carrousel and take a picture async

I have been trying to replace my carrousel images with t new photos from my phone camera or album, but for some binding reason, they don't display on the carousel.
I am using Xamarin Media Plugin.
any picture I select should display on the carousel. I have been trying everything in here. IMAGE URL works fine, stored images in the resources folder, works as well. but, for some reason display the images from the media is been a nightmare.
You can clone my sample project # GITHUB
I will appreciate Any help.
Looking at the GITHUB project, easy to understand why no relevant code here, it will require the whole sample project. It seems the carousel is not getting updated when uploading an image, binding?? I am still checking.