Images taking a while to load every time I start - react-native

Can anyone tell me why when I use my app, every boot up has a lag when loading my images and vector font icons? It probably only lags for a second, but it looks really bad.
It can't be the sizes of them because even the vector icons have about a second lag. Is there any way to prevent this
Would this have anything to do with it being connected to Expo?

You can resolve this by caching your assets while the app loading screen is still up: https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html

Nevermind I found out it's an Expo thing. They strip all of the local images and put it in their cdn before building the app. Take note if you have an app in production using Expo

Related

Image Detection for expo react native

I would like to include a feature in my app, where you can scan a certain picture and the app would recognise this image. Just like the image recognition feature in Viro: https://docs.viromedia.com/docs/ar-image-recognition . So I would set a certain image and it only needs to recognise this image.
I'm working with expo react native.
Does anybody have and idea how I might build this feature?
Thanks 😊
You can possibly just make it call a python service on the backend and pass it the image and get back the result for it.
If you want to go serverless, you can even get a premade AWS lamda function, which you can call and pass it the image, and it'll do the processing for you.
In the end, it's better if you do this kind of processing on the server side, your app could get locked up because image processing can take time and you don't want that to happen on a mobile app.

Caching images in ionic 4

I am working on ionic 4 app which includes swiping of images to left or right. Currently the images are fetched from the server every time which causes a delay in image loading. Could any one suggest an efficient way to cache or preload the images so as to increase the performance of the app by loading images from cache.
I think you have to use ionic-img-cache and it works with Ionic Framework (v >= 1.0) or 'ionic-cli' and see this also.
All links have an example. Run the first example here and another option is using LoadingController
use ion-media-cache this directive is to store image in the device.
Check this plugin it has the feature of caching image.
https://www.npmjs.com/package/ionic-image-loader
You Just use the tag it help to lazy load image attribute it's help t

How often is cache cleared in React Native app?

I'm using RNCamera to take a picture. The path to the picture taken is in the file systems cache. Something like this:
"file:///data/user/0/com.find/cache/Camera/1986b5f9-4770-a255-543703fc6597.jpg"
Then I use the react native image editor to crop this image and I get another file. Something like this:
"file:///data/user/0/com.find/cache/ReactNative_cropped_image_8510242.jpg"
These files are (according to the filepath of the images, at least) stored in the cache on the phone.
My question is this:
How long can I be sure that these images will remain in the cache? Do they get cleared when the app is closed? Or will they remain until I delete them myself?
Thanks!
This Thread is old but for those who need it:
So, i've been working with RNCamera since 2 weeks now and i had the same question, but sadly i couldn't find any answer. I now checked with react-native-fs and it seems like the images are stored for the whole Camera session or maybe even the whole app session, thats the thing i could not find out.
But they still stay cached after reusing the RNCamera

Live reload in react-native without resetting the route

The live reload feature in react native is neat. But there's one problem. When my app reloads--every time I change the code--the route is reset and it navigates back to the home screen. This is especially annoying if I'm working on a feature that's five or six screens deep. And reloading manually does the same thing.
Is there any way to have it automatically reload the same route it was at before the reload? As a point of comparison, this is not an issue in ionic livereload.
Thanks.
Update: HMR (hot module reloading) shipped with RN 0.22 a few days ago, and this is now possible.
This is just the way the live reload works. It reloads all the js and thus you lose all your state. You could probably hack around it by saving state to disk or somewhere else that it will persist across reloads but I would recommend against that. I keep a close eye on commits in the react native repository and there has been a lot of activity around Hot Module Reloading (HMR) which allows components to reload themselves with new js without reloading the entire app. This will give the exact thing you are looking for. I am not sure if this will land in 0.18.0 that is about to release or come out in the next release after that.

How to combine imageresizer responsive images with lazy load

I have implemented a lazy-load solution for images using http://www.appelsiini.net/projects/lazyload, and it works as expected.
Now that the DNN skin I'm working on is responsive, I want to make use of ImageResizer's responsive solution: http://imageresizing.net/blog/2013/effortless-responsive-images -- the setup is working right now, but when combined with lazy-load, the images that are served are no longer responsive.
Is there a way to combine these two technologies?
We run the latest .NET and IIS 7+. Thanks in advance!
Images added to the page after DOMLoaded will not be detected by Slimmage.js unless you call window.slimmage.checkResponsiveImages() . If you use a separate lazy-load or jQuery plugin that modifies images, call checkResponsiveImages() after it completes its work.
Browser vendors advise against lazy image loading, as it drains mobile device power. Turning on the wifi or LTE radio is the most expensive operation for a device, and lazy loading can make it 3-10x more chatty.