I recently started to integrate react native in an already existing android app. I have tried multiple image loading styles as mentioned on the page https://facebook.github.io/react-native/docs/images.html
Method 1(Hybrid Apps): For android use <Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />
This method doesn't load anything on the app, just a 40X40 empty area is loaded.
Method 2: <Image source={require('./my-icon.png')} />
I used the absolute path to the image app/res/drawable-hdpi/image.png but it didn't work either.
Got the error
Unable to resolve module `../app/res/drawable-hdpi/image.png` from
`/Users/MyName/StudioProjects/reatProject/android/react-native/index.js`: could not resolve
`/Users/MyName/StudioProjects/reatProject/android/app/res/drawable-hdpi/image.png' as a file nor as a folder
I always provide height and width attributes in style map.
My project structure is
android/
app/
res/
src/
tests/
react-native/
index.js
package.json
package.lock.json
tests/
build.gradle
The project build.gradle file has the maven repository included as maven { url "$rootDir/react-native/node_modules/react-native/android" }
I had posted this as an issue on react native github issues, but got no solution there, so asking here if anyone has been through the same issue. I am fairly new to react native so maybe I am doing something wrong.
I had ended up making a mistake. The image source has to be of the form {{uri:"name"}} and I kept writing {{uri:"name.png"}}. It doesn't accept png in this scheme, but in the asset:// and the require scheme, it does. Its just a bit confusing.
For anyone facing the same issue, the same directory structure would work, just use image this way, and avoid using the extension.
<Image source={{uri:"imageName"}} style={{height:100, width:100}}/>
Related
I have an Expo project with an <Image /> component sourced from an import:
import logoImage from './assets/logo-medium.png';
...
<Image source={logoImage} />
This works fine on my device when building with expo run:ios -d. However, when I build the project with XCode, the image isn't there, and I see this error:
[native] Could not find image file:///Users/username/Library/Developer/CoreSimulator/Devices/B76D59AF-9599-4174-991B-AE484575B79C/data/Containers/Data/Application/A57C6E10-3DF9-46E0-8B56-7760AF5199C6/Library/Application%20Support/.expo-internal/assets/assets/logo-medium.png
When I try to find that file manually, there is no ...Application Support/.expo-internal directory.
Is there a different way I should be specifying image location? Or a way for the image to be correctly bundled when building from XCode?
I had the same issue, make sure about two things:
One of the potential solutions found on the web -
https://forums.expo.dev/t/assets-missing-only-in-ios-release-build-after-ejecting/42759
Ok I found out the problem.
When ejecting, expo is supposed to generate a metro.config.js file that looks like that:
module.exports = {
transformer: {
assetPlugins: ['expo-asset/tools/hashAssetFiles']
}
};
Your metro.config.js file shuld has .js extensions not .ts
I am using react-native for windows UWP. I don't understand how to load local raster image assets I want to package with the application. I am currently placing my image files in windows/foobar/Assets/ (where foobar is the name of the application). My initial assumption was that I could simply require them in the source like this:
<Image style={{ width: 50, height: 50}} uri={require('./windows/foobar/Assets/energy.png')} />
This works for svg files but errors for raster files saying it was unable to define the module. That makes sense since require is for loading modules and raster files are definitely not that. VS Code tries to help me understand this by not auto completing any raster files under Assets/.
However I've seen some examples online state I can do:
source={require('#expo/snack-static/react-native-logo.png')}
I don't understand why this format could work but the local path would fail.
I've seen other examples stating I should use:
uri={require('ms-appx:///ReactAssets/energy.png')}
But this does not resolve.
Ultimately I assume I need to tell react-native for windows about the assets I want to include in my app so they can be resolved through some kind of resource bundle, but I'm not finding any documentation on how to accomplish this. What do I do?
The discussion on this github issue is a little confusing to follow but eventually got me to the right answer.
Put your image under windows\\{yourprojectname}\Image
Open the windows solution in Visual Studio at windows\\{yourprojectname}.sln
In solution explorer, at the top, click on 'show all files'.
Expand the project for your Universal Windows app, find the Images folder, right click your image file and select 'Include in project'. Save all files.
Restart react-native
You can now refer to your images with:
<Image source={{ uri: "ms-appx:///Image/yourimage.png"}}/>
My react-native version is "0.62.2".
In order to show remote SVG images, I use react-native-svg library in my React Native project.
I use it like:
import {SvgUri} from 'react-native-svg';
const MyScreen = ({route, navigation}) => {
...
...
return (<View>
<SvgUri width="100%" height="100%" uri={imageSource} />
</View>)
}
export default MyScreen;
In Android emulator, it works fine!
In iOS, it works in a sense, but the way how it works is: when navigate to MyScreen, I always encounter the following error at runtime in the 1st place:
Then, I have to press on keyboard ctrl+S to save code again (though nothing needs to save) which triggers the simulator to refresh, then MyScreen is shown successfully with the SVG image.
Why I get the "Unrecognized font family 'Univers-Condensed'" error at runtime in iOS? How to get rid of it?
(In my code, I have no code using that font, so my guess is the library introduced that font.)
This happens when your app is trying to access the given font family and that specific font is not linked with your project and this error can happen only be on a single platform (Android, IOS) because these fonts linked separately on both platforms.
Solution:
Remove usage of Univers-Condensed font family in your JS code because JS code is the trigger point of this error.
Note: This solution will not work if this error is produced by some library that you are using in your project and that is using that Univers-Condensed font family.
Another solution is, You have to add and link this font family in your project.
Download the font .ttf file
Make a folder named assets and inside the assets, folder make the fonts
folder on the root of the project and put your downloaded font file in it.
add this to your react-native.config.js file
module.exports = {
assets: ['./assets/fonts/']
};
run react-native link
this process will automatically link fonts with your IOS and android project too.
Can you try this add Universe-Condensed.ttf in info.plist
<key>UIAppFonts</key>
<array>
<string>Universe-Condensed.ttf</string>
</array>
I have a project using react-native. When ready to upgrade the js bundle file, I come across a problem: In this upgrading, I need add some image resouce, so I have to copy the dest file to the src/main/res/ folder and regenerate the project. It's seem not so 'dynamically'.The second way is encoding the image resource using base64; it's work but ugly，especially there are lots of images. Certainly I could use network Images as react-native document describes, but it's 'expensively'. So is another way that loading new static images and needn't regenerate the project?
<Image source={require('./intro.png')} />
You can require images just like you require js files.
In the above example intro.png would be in the same folder as the js file.
Hope that helps
I've a problem with local image. My react native version is 0.14.2.
I have a file index.android.js in my repository App with this code :
<Image source={require('./house.png')} style={styles.image}/>
It works if I put my image in App and in App/assets. If I just put my image in App, it doesn't work.
Then, I want write my code like this :
<Image source={require('./img/house.png')} style={styles.image}/>
But, if I put my image in App/img, it doesn't work. Even if I add my image in App/assets/img, it doesn't work.
Images are loaded relative to your .js file. So if you have
require('./img/image.png')
In App/index.android.js, the image should be placed in App/img/image.png.
There's no special assets/ folder.