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
Related
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.
I want to change my default icon's app to another one and generate my standalone app (with expobuild:android)
But when I add another image(capture) in my assets folder and replace it in app.js,it gives me an error:
{
"expo": {
"icon": "./assets/capture.png",
}}
I tried many time with and without default icon (I have error just with new image) so i'm sure that error came from the change of icons.
Do you have any idea ;
if you are using a CRNA solution, there is an easy way you can do it. Just go into the /assets folder and just paste there your new icon, then rename it to icon.png, just make sure you already removed the default one. It also works with the splash screen.
But if you created your project with create-react-native-app, you need to do it separatly in Android studio for Android and Xcode for iOS. See more with this link wich helped me too.
https://aboutreact.com/react-native-change-app-icon/
Hope it's gonna help ... Regards
I used this this repo and cloned it, then run one line command to resize the png to all the different formats.
bash resize.sh my-cool-new-app-logo.png
Then drag the folder over and merge/replace icons.
quick insight
From the camera roll, I get a list of URIs in the ph://xxxxx format.
If I use these URIs in Image or ImageBackground components everything works as expected.
I want to show these photos in a webview. Adding to the html an img tag with that kind of URI doesn't work.
Am I missing something?
Is there any workaround to display such images in a webview?
For anyone interested, after trying various solutions, it doesn't seem to work at the time of writing.
I solved getting the absolute path of the image, which in my case meant copying the file from the cameraroll to the app document directory.
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
I'm making my first react native project, and I've used the create-react-native-app command to get everything set up. However, when I try to get an image to show up in Expo, it gives me an error message that it can't find the png file. I currently have the file under './img/record_video.png' (it's just an icon I'm going to use as a button).
Here's my project layout and the code I'm using to call it
That is, I'm using <Image source={require('./img/record_video.png')} /> in order to call that file.
This is the error message I receive on my phone from the Expo app In short it says undefined Unable to resolve module './img/record_video.png' from C:\Users\ddude\Desktop\AwesomeProject\App.js':The module './img/record_video.png' could not be found from 'C:\Users\ddude\Desktop\AwesomeProject\App.js'. Indeed, none of these files exist:
*'record_video.png'
*'C:\Users\ddude\Desktop\AwesomeProject\img\record_video.png\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)'
I'm not sure if it's that I'm using Expo and that it's not exporting to the phone properly, or if it needs to be in a specially-named folder. Any help would be appreciated, thanks!
remove the underscore & rename image assets to record-video.png, record-voice.png and convert-to-text.png. Restart the package manager and try.
Just another observation I do not see an image record_audio.png in img folder
as required in second line.
Hopefully it helps.