I'm building an app using React Native with Expo. Everything works fine except the images, they load correctly but it takes about 2 seconds to load, and it's weird because all the images are local images and they are light too, so they should load instantly. This problem occurs also after I build and get the .apk on my android device so the images are always stored locally.
This is a portion of the main page of my app:
...
<View style={styles.bottomItem}>
<View style={styles.bottomItemInnerFirst}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('SecondPage')}>
<Image
source={require('../assets/images/iconT.jpg')}
style={{width: '100%', height: '100%'}}
resizeMode='contain'
/>
</TouchableOpacity>
</View>
</View>
...
The problem occurs not only with the Image tag but also with ImageBackground.
I've looked at this doc too https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets/
but I'm using local images and I don't know what to do to make it work.
you can install new dependencies
npm install react-native-fast-image
and change Image into FastImage
for reference, you can visit this website:- https://www.npmjs.com/package/react-native-fast-image
this dependency will increase the loading of your Image
Asset Optimisation can also help you in expo. You can try the below commands to optimize assets in your project.
npm install -g sharp-cli
npx expo-optimize
Thanks!
Please consider following these steps:
First of all, we need to make sure that your images are not so big in size, because sometimes you find some applications (mostly photographic ones, kindly take a look at this link) are loading images with 2MB or even bigger, that's why they are slow, however the best image size range is between 100KB to 400KB.
Use one of the caching libraries to provide a performance boost in the loading time as such: react-native-progressive-fast-image or react-native-fast-image, be aware that these packages consume memory.
Please be cautious about inline styling and JSX callbacks, each re-render it will create another callback reference and another style Object (this is not very useful for your case but it will increase a little bit the JS thread FPS).
If you are using Image from react-native-elements, you have to set the transition property to false.
<Image
source={require('../assets/images/iconT.jpg')}
transition={false}
/>
Related
I'm trying to require an image from a location inside the SRC folder in React (not from public unfortunately) and the specific name of that image will be granted from props.
The issue is that I need the image to be set as the background image of a <div />. The image doesn't show up.
I tried that:
<div
style={{
backgroundImage: `url('${require(`../../assets/images/home/${banner?.srcString}`)}')`,
backgroundSize: "cover"
}}
/>
Is there any way to solve this without using <img /> and without moving all images to /public?
No, you can not require images dynamically from src directory, and it's not just limited to React, it's about all JavaScript frameworks that use Webpack internally. Also, this is exactly one of the use cases of public directory, as it's been mentioned in the documentation: When to Use the public Folder
You can also check the following links for more discussions around this question:
Load local images in React.js
How to give Image src dynamically in react js?
React, load images local from json
The title is pretty self-explanatory. I'm wondering what's the proper way to go about using emotion with the classes api of components in version 5.
Since #material-ui is a react lib, I'm mostly using the #emotion/react package, but the classes api expects a string value for its keys, so I have to use the #emotion/css to generate a string className.
<Button
classes={{
root: css({
margin
}),
}}
>
Click me!
</Button>
I have two issues:
It doesn't seem quite right to be jumping between the two packages like this. Is there a better solution?
The rtl-guide in #material-ui docs instructs us to use the stylis-plugin-rtl; The stlyes generated with #emotion/react are transformed correctly, but the one generated with #emotion/css do not get flipped using this plugin.
Any help would be much appreciated.
I am having an issue on my site where my above-the-fold masthead image comes in way too late which makes the site feel slow. The site is built with GatsbyJS where I am using the Gatsby Image plugin as well. I have tried with rel="preload as="image" but this didn't seem to do any difference:
<Img
fluid={
wpgraphql.imageFile.childImageSharp.fluid
}
id="hero__image"
style={{
position: "initial"
}}
rel="preload"
as="image"
/>
After reading the Gatbsy Image documentation I found that loading="eager" could make a difference as well. I therefore have tried adding the loading="eager" but still my masthead image is one of the last things to be discovered in my waterfall.
How can I make my masthead image load critical and come in earlier in my waterfall?
Gatsby Image uses a low-quality preview image in the src and delays the switch from this preview image to the full-size image until Gatsby is initialized client-side (which happens after React hydrates). For this reason it's never going to be particularly performant for above-the-fold content. I recommend using the srcSet data that comes back from the query you have now directly:
<img
srcSet={wpgraphql.imageFile.childImageSharp.fluid.srcSet}
alt=""
loading="eager"
/>
From here you can style it to match your desired output.
I am working on a Custom Font in the React Native Project. (RN 0.61.2)
Already Setup react-native link.
Font File and react-native.config.js is under project folder like screenshot.
and config file, font family code is like this.
module.exports = {
assets: ['./assets/fonts/'],
};
<Text style={{fontFamily: 'NanumSquareRoundB', fontSize: 30}}>
Login
</Text>
The problem is that the font doesn't load when the app is first loaded or reloaded.
When I modify the font code, I can see the font applied.
So maybe I think there's an async problem, but I don't know how to do it.
I Changed only fontsize 30 to 31.
What's the problem?
to add a custom font for React-Native > 0.60
Android
Add your custom font files under android/app/src/main/assets/fonts ... and that's it.
You don't have to have react-native.config.js ... or execute a link command on your terminal.
IOS
Open your ios project <.xcworkspace> file in xCode.
Right click your project-name-node and select Add files to <your-project-name>, and add your font-files.
Make sure your font-files you added are listed under Build Phases > Copy Bundle Resources.
I've created a project using react-native-webpack-starter-kit and am trying to add static images to the project to use.
https://github.com/jhabdas/react-native-webpack-starter-kit
I tried simply adding an images folder next to the .js React component (in src/components) and tried the following but none seem to work. There's no error messages but the image just doesn't appear.
<Image source={require("image!add_people_icon")} style={styles.icon} />
<Image source={require("image!add_people_icon.png")} style={styles.icon} />
<Image source={require("./images/add_people_icon.png")} style={styles.icon} />
Is there anything I need to do in the actual xcode project, such as add the images to the images catalog there?
I'm using webpack / fileloader for serving images as well.
The referencing the images to the require is wrong ...
basically it will go and search for those files in the Xcode Project
So there are two solutions
solution 1: Add the respective images in the Xcode Project Image assets and then you can use as above
Solution 2: Use some cloudinary which will give you an absolute url and we can use it as
<Image style={/*ifneeded*/} source={{uri: ' //specify the url // '}} />
and the styles of images should contain Height and Width