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.
Related
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.
I familiarized with Android development and started to read some information about React Native. And one of the problem which I faced with is that I can't see the screen layout.
In Android Studio, for example, I could see the design of my XML layout without running app. Maybe there are such instruments in React Native, but I didn't see them in WebStorm nor VSCode. Maybe I am wrong and they exist, so, can you help me to find them in such situation?
Some modules format the xml document in vscode,
but others have previewable tools.
XML TOOLS
Extension Settings
xmlTools.enableXmlTreeView: Enables the XML Tree View for XML
documents.
xmlTools.enableXmlTreeViewMetadata: Enables attribute and child
element counts in the XML Document view.
xmlTools.enableXmlTreeViewCursorSync: Enables auto-reveal of
elements in the XML Document view when a start tag is clicked in the
editor.
xmlTools.enforcePrettySelfClosingTagOnFormat: Ensures a space is
added before the forward slash at the end of a self-closing tag.
...
I also had the same problem where there is no layout view in VSCode like in Android Studio. My suggestion is to mock out your View containers with coloured boxes. This is an example of designing a screen's header, so I'm making sure the spacing and sizing is all good:
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
How I create a custom chart like this
with Titanium's Alloy elements (xml, tss, js - no SVG or canvas)? Any suggestion?
One approach which worked for me was the using of a webview and Google Charts.
I stored my "skeleton html page" as local asset, and inside it I wrote the minimum necessary javascript to get the json (from the controller) and to draw the chart.
I didn't need to show data offline so I directly linked the online library but I'm almost sure it's possible to use it offline too.
https://developers.google.com/chart/
I am trying to display a static image(ic_launcher) in my android app using react native. I am getting a black response. No errors. Just a blank view as though the resource doesn't exist.I am able to display images from the network.
Your ic_launcher files are probably placed in android/app/src/main/res/mipmap-xxx directories. Try to move it to android/app/src/main/res/drawable-xxx directories.
\android
|----\app
|----|---\src
|----|---|----\main
|----|---|----|---\res
|----|---|----|---|---\drawable
|----|---|----|---|---|---\ic_launcher.png
You should use require('image!img_name') as a source attribute of Image component.
See example app here https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ImageExample.js#L84 with it's resource placed under https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/android/app/src/main/res/drawable