Here you can see the icons are not loaded. Can someone please find me a solution.
Code content:
import {Icon, Row} from '#shoutem/ui';
return (
<View style={styles.container}>
<NavigationBar title="All Restaurants" />
<View style={styles.row}>
<Row styleName="small" >
<Icon name="play"/>
<Text>About</Text>
<Icon styleName="disclosure" name="right-arrow"/>
</Row>
</View>
</View>
);
For me this issue occurred because the font files were not in the android/app/src/main/assests/font/ folder inside the root of your react-native directory.
I copied all the font files from this link to shoutem's github (you may also find it inside your-project-directory/node_modules/#shoutem/ui/examples/RestaurentsApp/android/app/src/main/assests/font/) to the above folder and rebuilt the app.
This worked for me, I hope it'll work for you too.
Perhaps it's an issue with loading fonts. Could you check #shoutem/ui's Github for similar issues? There is one about icons appearing as Chinese letters. Did you try with other icon names?
I know I am responding to an old thread, but as it shows up first in Google for I'm sure many people experiencing the same problem will come across this one.
I realized I forgot to run react-native link after npm install #shoutem/ui --save.
Skipping this step caused the fonts and assets (including icons) not to be installed. Running the link command fixed the missing fonts.
Related
I'm trying to create an app with React Native + Expo for Adnroid TV and onFocus doesn't work on any element.
I tried to fix it by migrating to "react-native": "npm:react-native-tvos#latest" but that doesn't work either.
Any idea how to fix it?
<TouchableHighlight
style={{backgroundColor: 'green', backfaceVisibility: 'visible', shadowColor: 'red'}}
hasTVPreferredFocus
tvParallaxProperties={{ magnification: 1.2 }}
onPress={() => {console.log('pres')}}
onFocus={() => {console.log('focus')}} >
<Text style={{width: 50, height: 50, backgroundColor: 'transparent'}}>1</Text>
</TouchableHighlight >
I have recently solved this issue.
I was under impression that simply changing package.json contents to read "react-native": "npm:react-native-tvos#latest" would suffice, but it won't.
It would, if you would have built the project, but even then it would probably complain about lot of stuff.
Try running npm i react-native#npm:react-native-tvos#latest it should complain about conflicting dependencies. Go one by one, removing the dependencies using npm uninstall [dependency] and then try to install again, until you are successful. Note the dependencies you removed and then install them back again. I've only had to remove react-native react #types/react-native. If it complains about version, just use the suggested version such as npm i react#18.0.0 worked for me. I had to run npm ci to get clean install of all my packages after this process as my build didn't work initially, but after that, everything worked smoothly.
They are mentioning in the documentation of https://www.npmjs.com/package/react-native-tvos that their version is derived from the public version of react-native, but it didn't seem to be the case with the #latest version.
If you are using typescript, don't forget to include import 'react-native/tvos-types.d' in some of your typescript files, preferably the root.
It seems that the package still has some issues, such as not allowing you to set opacity properly for the TouchableHighlight component, but I am currently working on workarounds for everything.
Hope this helps, cheers.
When I add some image from my assets folder using require, the image is apparently being taken from a folder .png-cache , but react native probably has bad paths stored in them because I get an error wherever I've used the same file as the image source.
My code is:
<Image
source={require('#assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
The image doesn't show up and the console shows:
Error: Asset not found: C:\Users\<project path>\src\assets\images\.png-cache\thunder-31748fee8334daf886e2bea1259f80c9#3x.png for platform: android
at getAbsoluteAssetRecord (C:\Users\<project path>\node_modules\metro\src\Assets.js:110:11)
at async getAsset (C:\Users\<project path>\node_modules\metro\src\Assets.js:238:18)
at async Server._processSingleAssetRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:352:20)
at async Server._processRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:427:7)
Not sure why the current paths are not valid. Is it possible to make it so that the old cached paths are forgotten and new cache file generated?
What I've tried:
I renamed one image file and it worked but I wouldn't want to rename all the files, looking for a way to reset the cache.
I looked at the solution in Reset internal android image cache in React Native but I can't have dynamic paths in require so this solution didn't work.
I see first time using like #asset...
In my code i everytime use like this:
<Image
source={require('../assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
am i missunderstanding what you need?
My problem was solved by resetting the react native cache with the command:
npm start -- --reset-cache
In my RN application, I use react-native-pdf. I want to show a file which is in the file system of the app. But when I set the source it doesn't work and the app can't identify the path. How can I set the path properly?
<Pdf
source={{ uri:'file:///terms.pdf'
/>
It should be below. when I tried that, it worked. And there is no bug about that on the repository of react-native-pdf. Maybe your version of react-native-pdf has bug. You should get this version => 5.1.6.
<Pdf
source={uri:"file:///absolute/path/to/terms.pdf"}
/>
I'm trying to show image placeholder before the actual image loaded from the server.
For iOS, defaultSource prop is working fine but for android the image is not getting displayed.
<Image style={dashBoardStyles.buildingImage} source={{ uri: 'some server image' }} defaultSource={ require('../images/loadingindicatorImage.png')}>
Can anyone help regarding this issue.
Please read https://reactnative.dev/docs/image#defaultsource carefully, and you'll find below note.
Note: On Android, the default source prop is ignored on debug builds.
I'm having an issue with adding static images to my project. I added a resource folder with images inside, restarted the packager and get the following error:
error: bundling failed:
Error: Unable to resolve module `../../assets/img/receiptIcon.PNG` from
`C:\Users\Keith\Desktop\Phase1\Screens\Receipts\ReceiptRow.js`:
The module `../../assets/img/receiptIcon.PNG` could not be found from
`C:\Users\Keith\Desktop\Phase1\Screens\Receipts\ReceiptRow.js`. Indeed, none of
these files exist:`C:\Users\Keith\Desktop\Phase1\assets\img\receiptIcon.PNG(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
`C:\Users\Keith\Desktop\Phase1\assets\img\receiptIcon.PNG\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
Copying the path below into File Explorer opens the image as expected. I've made sure there are no special chars in the file path as suggested in other posts, I've copied the image into the same directory as the js file but I still get an unresolved module error.
This is how I am adding the image:
(I've tried using different paths with the same result, 'receiptIcon.png', './receiptIcon.png', './../../assets/img/receiptIcon.png', './../../assets/img/receiptIcon.PNG' )
<View style={styles.iconContainer}>
{/* icon image*/}
<Image source={require('./receiptIcon.PNG')} style={styles.icon} />
</View>
Is there anything I am missing because as far as the documentation says I just need to add the image to the project dir and the packager does the rest?
I'm using
react-native-cli: 2.0.1
react-native: 0.52.0
(I also have images working when loaded from a URL, from taking a picture and from the Camera Roll/Gallery)