react-native-fast-image
complete
Giau. Tran Minh
Please add https://github.com/DylanVann/react-native-fast-image for fast image scrolling
Brent Vatne
complete
Today, we are pleased to announce that with the arrival of Expo SDK 42, you can now create custom development clients in the cloud using EAS Build, or locally with the new Expo run commands.
You can try it out today:
- Create a new project: expo init
- Install the packages: expo install react-native-fast-image expo-dev-client
Build the native app:
- In the cloud with eas build -p all --profile development(expo builddoes not support custom builds)
- Or locally with expo run:iosandexpo run:android(note: see https://expo.fyi/prebuild-cleanup for information on the generated files)
To be clear,
react-native-fast-image
will not have been added to the Expo Go app that you download from the App Store or Google Play Store.We still consider this feature to be completed because users can now create a custom client app that includes this library, without needing to write any native code.
We hope you enjoy, and we have big plans to continue improving this workflow going forward!
Apps Genie
how do we install react-native-fast-image in an Expo managed EAS project with a custom dev client? I thought the package has to have a plugin and I don't see one for react-native-fast-image..
will just basic
expo install react-native-fast-image
do it?thank you.
Michael Wood
Apps Genie: Not everything that includes native code requires a config plugin to work in an managed Expo app with custom dev client.
Their installation instructions are basically just:
yarn add react-native-fast-image
cd ios && pod install
(so nothing special for Android)
If you look at the iOS build process, you'll see that the iOS build servers automatically run
pod install
for you during the build process. (See step 10 of the remote steps.)So there's nothing that requires a config plugin.
If it required changes to
Info.plist
or AppDelegate.m
or something like that, then it would need a config plugin, but for react-native-fast-image
there's nothing like that.You might also want to check out
expo-image
Apps Genie
Michael Wood: oh ok that was a good explanation for me thank you, I get it now. Install always runs and only when extra custom config is needed that's where plugins come into play. Does it mean ANY new package installed requires a rebuild of the dev client or only those having pod install as instructions?
I was able to install fast-image is successfully now!
As far as expo-image I was looking around and I am a bit scared to install it yet :) (too many complaints from others so far) plus was not able to get to the latest version because it said the correct version for my project is 1.0.1 (SDK 48) but there are a few bug fixes in the latest version that I would miss, so I think I would rather wait longer since it seems like a new package to me. But not totally sure yet.
Michael Wood
Apps Genie: "Does it mean ANY new package installed requires a rebuild of the dev client"
Yes. The rebuild is about whether or not the package includes native code. Not whether or not it requires extra config.
If you build a dev client and then run
yarn add react-native-fast-image
, then the old dev client does not contain the native part of react-native-fast-image
. If the JavaScript parts of it try to make a call to the native parts, you will get errors. This is the same reason you can't use the Expo Go app with something like react-native-fast-image
. Expo Go doesn't have the native parts compiled into it.I'm glad you were able to install
react-native-fast-image
.Yes,
expo-image
is not very old yet. No problem waiting a bit :)Apps Genie
Michael Wood: Understood! I just know one time I was able to add a package and didn't have to rebuild so that means the package must have been pure JS. I guess I need to look at the documentation of each package to see if it has native bits or not (that's how I'll know I need to spend extra time/resources rebuilding).
JS w/o any pod install (+equivalent for android?) = no dev rebuild (until prod)
JS with pod install = need to rebuild dev lient
JS with extra native instructions = rebuild + plugin config
Michael Wood
Apps Genie: Yes, if you were able to add a dependency without rebuilding your dev client, then it must have been pure JS.
If it's pure JS, it won't have
android
or ios
directories. But that's not a 100% guarantee, because it might depend on something else that has native code.If it mentions
pod install
or React Native autolinking or something like that, then it has native code and would need a rebuild.If, in addition, it says stuff about changing
build.gradle
or AndroidManifest.xml
or Info.plist
or other native code, then it will probably need a config plugin.
Apps Genie
Michael Wood: got it! thank you again for this
aestheticbeast345
You should really add this library to the SDK, it works like magic!!!
Michael Wood
aestheticbeast345: Have you tried
expo-image
?Uzay Macar
Michael Wood: I've tried
expo-image
and it had many issues, and the performance was lower than the standard React Native Image component.Emanuel 🚀
Is this support now in Expo Go?
Carlos Portela
Hi Brent Vatne, Would it be so difficult to add this library to the SDK so we don't have to mess with custom dev clients? Thank you for the great job you guys do day-in and day-out!
Brent Vatne
Carlos Portela: it is not that this is "difficult" to do, but we will not do it because we do not believe that it is the right decision for expo go. i think it would be good to get used to the dev client workflow because that is our recommended way to work if you want a similar experience to expo go but with your own customizations.
Carlos Portela
Brent Vatne: I understand, thank you for the reply. I have mixed feelings about this "custom dev client" approach. Yes, it is very cool and flexible, but I personally prefer to "shoot and forget". What used to be so simple becomes kind of a chore now with this approach. Is this the new approach going forward or will you continue to incorporate "selected" modules in the SDK? Back to the actual component, the real solution is for somebody to finally fix the <Image /> component. Thanks!
Jason Silly
Cannot agree more with Carlos. The beauty of Expo used to be the plug-and-go experience and the crystal clear documentations, so self-taught programmers like myself can save ourselfs the misary of having to move mountains before setting up the app. Now I and my app are completely at a pause (hope I'm not the only one) because there are a ton of issues to fix and stuff to learn before I can make it work. I'm certainly underqualified to pass judgement on this approach. All I can say is I feel foreign and disappointed with the conclusion here
Derek McLean
Brent Vatne: I am currently working my way through a React Native course that uses expo, and I've been shown that fast image is the "only way to go, it's the best"! What tradeoffs are there for going down this 'custom dev client' route? expo go is a phenomenal product, i just start it up and scan the qr, does the workflow change? you said the app store or google play store doesn't have it installed?
Brent Vatne
Derek McLean: you can learn more here: https://docs.expo.dev/workflow/customizing/
A Moktar
please add it to expo docs too
Brent Vatne
complete
Today, we are pleased to announce that with the arrival of Expo SDK 42, you can now create custom development clients in the cloud using EAS Build, or locally with the new Expo run commands.
You can try it out today:
- Create a new project: expo init
- Install the packages: expo install react-native-fast-image expo-dev-client
Build the native app:
- In the cloud with eas build -p all --profile development(expo builddoes not support custom builds)
- Or locally with expo run:iosandexpo run:android(note: see https://expo.fyi/prebuild-cleanup for information on the generated files)
To be clear,
react-native-fast-image
will not have been added to the Expo Go app that you download from the App Store or Google Play Store.We still consider this feature to be completed because users can now create a custom client app that includes this library, without needing to write any native code.
We hope you enjoy, and we have big plans to continue improving this workflow going forward!
Chrıs Seelus
Brent Vatne: Great times to be in the Expo ecosystem ❤️🎉
Fernando Rojo
Brent Vatne: I'm using it flawlessly in my app. Thanks!
Antonio Curiel
Brent Vatne: You forgot to say that you must to subscribe to EAS Build and montly pay this abusive price of 30usd (abusive for Students/Independent/Startups/Poor people like me) https://expo.io/pricing
Brent Vatne
Antonio Curiel: you forgot to read the part where we say that this is coming for free when we roll out general availability :) we also say in the announcement blog post that if you can't afford it or don't have a credit card, we will give you free access if you dm us on twitter. we have to limit access somehow while we're iterating on it quickly! "abusive" isn't exactly a nice word to use here considering that serving free users also costs us money :) you can also run EAS Build on your own hardware https://docs.expo.io/build-reference/local-builds/
Antonio Curiel
Brent Vatne: "Abusive" is the right word because is not "fair" for everyone.
I love Expo and ofcourse i want to support, but 30 usd montly is alot in this real world.
What i mean, your plans should to be redesigned to be cheaper for people who are not an organization, and 30usd is ok for big organizations.
Michael Wood
EDIT: Btw, I do not work for Expo. I am just an Expo user like you.
Antonio Curiel: You are being unreasonable, and it could be argued that it is
you
who is being abusive. Since when is it OK to demand that a company gives everybody free stuff when it costs them money? How is that "fair for everyone"? Especially when:- they say in the announcement that if you can't afford it you should contact them and they will give it to you for free;
- they say they are going to give it away for free to everyone in future, when they are ready to do so;
- andthey give you a way to do it on your own machine if you don't want to ask them for access and you don't want to pay them for it?
Brent Vatne
Antonio Curiel: hey antonio! maybe you misunderstood my message. as i said, EAS Build will soon be available for free users in the same way that expo build is, but we're not yet ready to take on the load of free users. that should be a few months from now.
there will be benefits to using a paid plan, like priority access to build severs and more concurrencies. this has already existed for a couple years with expo build and perhaps you haven't noticed.
we're not limiting anything you can do on your own hardware, EAS Build can be run on your own machine if you want, and you can have access to our machines to build for some reasonable number of builds too :) you don't even need to use EAS Build to build your app, you could also just run
expo run:ios
or expo run:android
or expo prebuild
and then use fastlane.if you're still concerned about this i'd love to get on a call to try to understand your perspective better. send me an email at brent@expo.io and we can coordinate a google hangout
Steve Moretz
Brent Vatne: thanks for the info, I guess he did not understand at first that this was a early access program, it's so nice of you to make it free for developers in the feature, we know how much effort you put in and how expensive are your servers and we're really thankful.
S
StephenRayner
Antonio Curiel: A free service... and you are complaining they they charge money for a product they built. Don't like it? Build your own.
S
StephenRayner
Brent Vatne: Thank you for the awesome service Brent! The teams doing an amazing job love to see it keep it up!
A
Angel Moreno
Antonio Curiel: I don't think you understand how open source works
Steve Moretz
Angel Moreno: You don't get what's the money about they have servers that run the code and it costs to rent those servers especially since they must use Mac servers they're really expensive, it has nothing to do with open source or close source.
Michael Wood
Steve Moretz: I think you misinterpreted Angel's reply. But I think there's been enough piling onto Antonio now. Let's leave him alone.
Steve Moretz
Michael Wood: Haha looks I read the tone in the wrong way he meant the opposite. Anyways any news when this is going public I read somewhere this summer but it didn't happen. I don't know if you went back to expo or still a user like us but you got a star next to your profile, that's why I'm asking if you're not working for the expo team feel free not to answer me.
Michael Wood
Steve Moretz: I've just got the star so that I can help with getting rid of spam here and stuff like that. I have never worked for Expo. I have no inside knowledge on when EAS will graduate from "preview", but where I am Spring has just started :P so Summer is still a possibility if you ask me.
Steve Moretz
Michael Wood: Thank you for the information Micheal, and have a nice spring lol.
Evan Bacon
in progress
Moreno A
Brent Vatne about the image caching issue, you mentioned a few months ago that the team was working on a new Image component, any news on that?
Hirbod
subscribed.
S
Sumanta Banerjee
4 years and we still did not get this?
Brent Vatne
Sumanta Banerjee: read the pinned comment my dude
The Panda
Hi for anyone who’s experiencing slow loading time for pictures, I suggest to optimize the image by reducing quality and resizing it so it gets to around 100-200KB in size and it will dramatically improve your loading time.
Hope that helps :)
Chris Chao
The Panda: Do you have a recommendation for compression/resizing libraries?
Michael Wood
Chris Chao: You could try jimp-compact or sharp. Expo-optimize uses sharp and expo prebuild uses jimp-compact.
There are various other image compression/resizing tools. e.g. for PNG images see section 3 of A guide to PNG optimization or pngquant.
Any library that can write JPEG images can generally accept a quality parameter to specify how much it should be compressed. Reducing the quality obviously could make the images look bad if you reduce it too much. There are also ways to losslessly reduce the size of JPEGs (e.g. https://news.ycombinator.com/item?id=803839) but I suspect it's better just to reduce the image quality. See also jpegtran and jpegoptim
A useful blog post on this stuff:
There are also online services that will compress your images for you. Obviously this may or may not be a good idea in your case. e.g. https://tinyjpg.com/. They have a REST API for talking to the service instead of having to manually upload images.
Another possibility is to switch to WebP, but this would be harder, because I don't think react native has out of the box WebP support. There are react-native-webp-format and react-native-webp-support but you'd need EAS Build for these and maybe a Config Plugin.
I've just discovered that react-native-fast-image also has built-in WebP support, so it would probably make sense to use that instead of react-native-webp-format or react-native-webp-support because react-native-fast-image appears to be better maintained. But again you'll need EAS Build.
Load More
→