dylanvann / react-native-fast-image Goto Github PK
View Code? Open in Web Editor NEW๐ฉ FastImage, performant React Native image component.
License: MIT License
๐ฉ FastImage, performant React Native image component.
License: MIT License
I can't show a image by 'content://media/external/images/media/32854'.
So I view the code. Then found you use GlideUrl.
So I try to use urlString instead. It works.
So I add some logic to load local image and network image.
FastImageViewManager
private static RequestListener<String, GlideDrawable> LISTENER_STRING = new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
OkHttpProgressGlideModule.forget(model);
if (!(target instanceof ImageViewTarget)) {
return false;
}
ImageViewWithUrl view = (ImageViewWithUrl) ((ImageViewTarget) target).getView();
ThemedReactContext context = (ThemedReactContext) view.getContext();
RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
int viewId = view.getId();
eventEmitter.receiveEvent(viewId, REACT_ON_ERROR_EVENT, new WritableNativeMap());
eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_END_EVENT, new WritableNativeMap());
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
if (!(target instanceof ImageViewTarget)) {
return false;
}
ImageViewWithUrl view = (ImageViewWithUrl) ((ImageViewTarget) target).getView();
ThemedReactContext context = (ThemedReactContext) view.getContext();
RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
int viewId = view.getId();
eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_EVENT, new WritableNativeMap());
eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_END_EVENT, new WritableNativeMap());
return false;
}
};
.
.
.
if (glideUrl.toStringUrl().startsWith("http://") || glideUrl.toStringUrl().startsWith("https://")) {
Glide
.with(view.getContext())
.load(glideUrl)
.priority(priority)
.placeholder(TRANSPARENT_DRAWABLE)
.listener(LISTENER)
.into(view);
} else {
Glide
.with(view.getContext())
.load(glideUrl.toStringUrl())
.priority(priority)
.placeholder(TRANSPARENT_DRAWABLE)
.listener(LISTENER_STRING)
.into(view);
}
FastImageViewModule
@ReactMethod
public void preload(final ReadableArray sources) {
Activity activity = getCurrentActivity();
final Context context = activity.getApplicationContext();
activity.runOnUiThread(new Runnable() {
@Override
public void run() {
for (int i = 0; i < sources.size(); i++) {
final ReadableMap source = sources.getMap(i);
final GlideUrl glideUrl = FastImageViewConverter.glideUrl(source);
final Priority priority = FastImageViewConverter.priority(source);
if (glideUrl.toStringUrl().startsWith("http://") || glideUrl.toStringUrl().startsWith("https://")) {
Glide
.with(context)
.load(glideUrl)
.priority(priority)
.placeholder(TRANSPARENT_DRAWABLE)
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.preload();
} else {
Glide
.with(context)
.load(glideUrl.toStringUrl())
.priority(priority)
.placeholder(TRANSPARENT_DRAWABLE)
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.preload();
}
}
}
});
}
Thanks. Greate lib.
Getting a deprecation warning for View.propTypes
react: 16.0.0-alpha.6
react-native: 0.44.0
Looks like it's being caused right here
https://github.com/DylanVann/react-native-fast-image/blob/master/FastImage.js#L90
I'm using the following package for a preloader https://github.com/oblador/react-native-image-progress
Which is great and works perfect with react image, I wanted to know if FastImage can add this support it would be great to have a preloader option
This is great module, but i wonder how do i control image cache expires.
In example: I do want to cache a.jpg file for a week.
Thank you so much.
If you are looking for this features, please emoji vote this comment instead of +1
hi, first installed package
on ios it builds success . but Android it fails:
`:react-native-fast-image:prepareComFacebookFrescoImagepipeline101Library
:react-native-fast-image:prepareComFacebookFrescoImagepipelineBase101Library
:react-native-fast-image:prepareComFacebookFrescoImagepipelineOkhttp3101Library
:react-native-fast-image:prepareComFacebookReactReactNative0451Library
:react-native-fast-image:prepareComFacebookSoloaderSoloader010Library
:react-native-fast-image:prepareOrgWebkitAndroidJscR174650Library
:react-native-fast-image:prepareReleaseDependencies
:react-native-fast-image:compileReleaseAidl
:react-native-fast-image:compileReleaseNdk UP-TO-DATE
:react-native-fast-image:compileLint
:react-native-fast-image:copyReleaseLint UP-TO-DATE
:react-native-fast-image:compileReleaseRenderscript
:react-native-fast-image:generateReleaseBuildConfig
:react-native-fast-image:generateReleaseResValues
:react-native-fast-image:generateReleaseResources
:react-native-fast-image:mergeReleaseResources
:react-native-fast-image:processReleaseManifest
/..../node_modules/react-native-fast-image/android/src/main/AndroidManifest.xml:11:9-15:15 Warning:
meta-data#com.bumptech.glide.integration.okhttp.OkHttpGlideModule was tagged at AndroidManifest.xml:11 to remove other declarations but no other declaration present
:react-native-fast-image:processReleaseResources
:react-native-fast-image:generateReleaseSources
:react-native-fast-image:incrementalReleaseJavaCompilationSafeguard
:react-native-fast-image:compileReleaseJavaWithJavac
:react-native-fast-image:compileReleaseJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
/..../node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewPackage.java:14: error: FastImageViewPackage is not abstract and does not override abstract method createJSModules() in ReactPackage
public class FastImageViewPackage implements ReactPackage {
^
Note: /..../node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
1 error
:react-native-fast-image:compileReleaseJavaWithJavac FAILED
FAILURE: Build failed with an exception.
Compilation failed; see the compiler error output for details.
BUILD FAILED
Total time: 8.256 secs`
Is there any way to force a specific uri to be removed from the cache (so that it would be necessarily fetch the next time an image source point to this uri)?
This is because I have a user avatar that always point to the same url for a specific user so I want to be able to clean the cache for this avatar picture each time the user actually change its avatar.
On iOS it works as expected, but on Android, borderRadius does not get applied, the image stays squared.
Here is the code I use:
<FastImage
source={{uri: 'https://example.com'}
style={styles.picture}
borderRadius={75}
resizeMode="cover"
/>
and styles.picture has the following:
width: 150,
height: 150,
borderRadius: 75,
borderWidth: 0.5,
borderColor: 'grey',
backgroundColor: 'transparent',
So I tried to double set it through props and through style object.
No luck :/
Running:
RN v0.46.2
Android 5.0.1
RNFI v0.0.11
This looks like something that would be a great add to react-native core. Would you be willing to submit a PR?
Receive this error upon trying to package.
Seems removeJSModules override was removed in the last commit
I'm building an app where I'm fetching images from a storage bucket in Firebase storage.
When I use FastImage in a FlatList for an array of images less than 20 it works fine. However if I try to render more images (I could have up to roughly 100 images in an array), the connection to my device is lost and I have to restart the project in xCode.
/**
* @param {Array.<String>} images
*/
<FlatList
data={props.images.slice(0, 30)}
keyExtractor={item => item}
columnWrapperStyle={{
marginVertical: 2,
}}
removeClippedSubviews={false}
numColumns={3}
getItemLayout={( data, index ) => (
{length: 100, offset: 100 * index, index}
)}
renderItem={({ item, index }) => (
<Asset
item={item}
index={index}
imageOnPress={props.imageOnPress}
isImageSelected={props.isImageSelected ? props.isImageSelected(item) : null}
/>
)}
/>
class Asset extends PureComponent {
shouldComponentUpdate(nextProps) {
return this.props.isImageSelected === nextProps.isImageSelected ? false : true;
}
render() {
const priority = setPriorityLevel(this.props.index);
return (
<TouchableHighlight
onPress={() => this.props.imageOnPress(this.props.item)}
style={styles.imageThumbnail}
>
<View style={styles.imageWrapper}>
<FastImage
style={{
flex: 1,
marginRight: 2,
backgroundColor: colors.gray[1],
}}
source={{ uri, priority }}
/>
{this.props.isImageSelected && (
<Icon
name="check"
color={colors.greenLime}
size={32}
style={styles.icon}
/>
)}
</View>
</TouchableHighlight>
)
}
}
function setPriorityLevel(index) {
switch(true) {
case (index >= 0 && index <= 10):
return FastImage.priority.high;
case (index >= 11 && index <= 20):
return FastImage.priority.normal;
case (index > 20):
return FastImage.priority.low;
default:
return FastImage.priority.low;
}
};
"react-native": "0.44.0"
"react-native-fast-image": "^0.1.2"
when i use this libary on Android, it show an error:
"android.widget.imageview cannot be cast to android.view.viewgroup".
but on ios is work fine.
react-native: 0.44.2
react: 16.0.0-alpha.6
react-native-fast-image: 0.0.10
anyone can help me? :(
Currently the component doesn't support children.
This is because FastImage supplies a android.widget.imageview
and not a android.view.viewgroup
.
For now absolute positioning is a workaround.
RN 0.46.4
node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h:3:9: fatal error: 'SDWebImage/UIImageView+WebCache.h' file not found
#import <SDWebImage/UIImageView+WebCache.h>
^
1 error generated.
Please add the feature of the Progress Image . in the upcoming release if possible . Sometime we need to show the Activity indicator or progressBar . even though if we use Fast Image .
With the current version, you have to set width and height which then crops the images it would be great to have an option to set auto height or use something like this - https://github.com/vivaxy/react-native-auto-height-image
Although it's very performant and used in tons of applications the API for SDWebImage is sort of weird.
e.g. The API for prefetching:
Assign list of URLs to let SDWebImagePrefetcher to queue the prefetching, currently one image is downloaded at a time, and skips images for failed downloads and proceed to the next image in the list. Any previously-running prefetch operations are canceled.
completionBlock
block to be called when prefetching is completed first param is the number of completed (successful or not) requests, second parameter is the number of skipped requests
Weird things:
e.g. The API for headers:
headersFilter
Set filter to pick headers for downloading image HTTP request.
This block will be invoked for each downloading image request, returned NSDictionary will be used as headers in corresponding HTTP request.
Weird things:
Maybe there's another native library we could use that's more straightforward than this.
React Native now supports blurRadius
prop for Image
for both Android and iOS, but this library does not seem to. It would be super useful to have this ๐
Actually, gifs don't work
Is it possible to define / control how long images are cached by this library?
How long are images cached at all when using this library?
I'm asking this because I want to use this library for user-specific data that might get deleted. If so, the images (that are not related to any up-to-date content and so never shown again) should not stay forever, obviously.
Maybe this is a dumb question but hopefully someone will answer it anyway.
Thank you.
It would be great if an image appears with an animation when it loads.
Hi,
I was just wondering if you plan supporting border radius style on images. At least on android it seems that this rule is ignored.
Hi,
first of all thank you for your work.
Just a question, how preload works?
I've a collection of images, I have to prefetch all of them before render the component but I don't have callbacks, and I don't have Idea why in examples, image have token key inside headers and in preload there is authentication key, why I have to use them? and finally why you never used preloaded images?
I hope you can help to clarify me, thank you.
Hi, thanks for this very useful lib!
It would be great if we could set a placeholder image (to show it while the image is loading).
@DylanVann
This is simply THE BEST LIBRARY these days!!
Thank you so much!!!
I did the following:
yarn add react-native-fast-image
react-native link
Then I replaced one of my images from this:
<Image
style={styles.image}
source={{uri: imageUri}}
/>
to this:
<FastImage
style={styles.image}
source={{
uri: imageUri,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
onLoad={() => console.tron.log('loaded')}
onError={() => console.tron.log('error')}
/>
I see the empty space where the image should be displayed, but no image. Am I missing something?
node: 8.2.1
react-native-cli: 2.0.1
react-native: 0.43.2
I added updated a fork or react-native-photo-browser to use your FastImage. For some reason, I get the following compilation error:
FFFastImageView.h:5:9: fatal error: 'FLAnimatedImageView.h' file not found
#import "FLAnimatedImageView.h"
^
1 error generated.
Aside from yarn add react-native-fast-image and running react-native link, what else do I need to do? Looks like the paths are incorrect?
when i am using some thing like
<FastImage
source={{
uri: item.blurredImageUrl,
}}
resizeMode={FastImage.resizeMode.cover}
style={Style.modalHeaderBgImage}
>
<View>
<FastImage
source={{
uri: iconUrl,
priority: FastImage.priority.high,
}}
style={Style.modalHeaderImage}
resizeMode={FastImage.resizeMode.stretch}
/>
</View>
<View style={Style.modalHeaderRight}>
<Text>
ENDS IN
</Text>
</View>
</FastImage>
when i use this libary on Android, it show an error:
"android.widget.imageview cannot be cast to android.view.viewgroup".
Please resolve this issue . Works fine in IOS . Need it urgently
Hi there!
I'm having problems compiling my app after adding react-native-fast-image.
After running react-native link react-native-fast-image
, I receive a bunch of duplicate interface definition for class 'FLAnimatedImageView'
and property has a previous declaration
errors.
Here's a subset of the errors I receive:
In file included from /Users/manuelthomsen/Coding/experiments/expo/woodn/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/SDWebImage/FLAnimatedImage/FLAnimatedImageView+WebCache.m:16:
In file included from /Users/manuelthomsen/Coding/experiments/expo/woodn/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/Vendors/FLAnimatedImage/FLAnimatedImage/FLAnimatedImage.h:13:
/Users/manuelthomsen/Coding/experiments/expo/woodn/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/Vendors/FLAnimatedImage/FLAnimatedImage/FLAnimatedImageView.h:22:1: error: duplicate interface definition for class 'FLAnimatedImageView'
@interface FLAnimatedImageView : UIImageView
^
In module 'FLAnimatedImage' imported from /Users/manuelthomsen/Coding/experiments/expo/test/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/SDWebImage/FLAnimatedImage/FLAnimatedImageView+WebCache.h:14:
/Users/manuelthomsen/Library/Developer/Xcode/DerivedData/test-ftzdxdyafvkexabeahltbammdnfq/Build/Products/Debug-iphonesimulator/FLAnimatedImage.framework/Headers/FLAnimatedImageView.h:22:12: note: previous definition is here
@interface FLAnimatedImageView : UIImageView
^
In file included from /Users/manuelthomsen/Coding/experiments/expo/test/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/SDWebImage/FLAnimatedImage/FLAnimatedImageView+WebCache.m:16:
In file included from /Users/manuelthomsen/Coding/experiments/expo/test/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/Vendors/FLAnimatedImage/FLAnimatedImage/FLAnimatedImage.h:13:
/Users/manuelthomsen/Coding/experiments/expo/test/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/Vendors/FLAnimatedImage/FLAnimatedImage/FLAnimatedImageView.h:26:48: error: property has a previous declaration
@property (nonatomic, strong) FLAnimatedImage *animatedImage;
Any ideas on how to solve this?
This is a basic expo app that has just been detached.
Tested on RN v. 46 and 47.
Thank you!
FastImage just saved my life, the performance is very good.
However, i found that GIF image do not rendered sometimes.
Please noted that the same image were used in both testing.
First Test:
Second Test:
Getting the following issues when trying to build for Android works for iOS
/Users/Almog/Full-Time-Employment/Construction-Cloud/RnD/CCMobileApp/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewPackage.java
Error:(20, 5) error: method does not override or implement a method from a supertype
Error:Execution failed for task ':react-native-fast-image:compileReleaseJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
Any ideas how to fix this?
After installing and linking, I'm seeing this when trying to display image(s):
React native version: 0.42.3
To start with just tried rendering a canned image, like this:
<FastImage
style={styles.image}
source={{
uri: 'https://facebook.github.io/react/img/logo_og.png',
priority: FastImage.priority.normal
}}
resizeMode={FastImage.resizeMode.contain}
/>
Any ideas why we are not seeing the images render ?
Having FastImage
nested directly within a TouchableHighlight
threw this error: Touchable child must either be native or forward setNativeProps to a native component stack
.
When I run on my Android device the image is not showing up my code is pretty straight forward
<Image
onLoadEnd={() => {}}
style={{width: 300, height: 300}}
source={{
uri: photoUri,
priority: FastImage.priority.normal,
}}
indicator={ProgressCircle}
resizeMode={FastImage.resizeMode.contain}/>
}
And the uri is file:///storage/emulated/0/Pictures:IMG_20170827_171631.jpg
I am super amazed by the speed of your library. There is no flickering, the images are loaded immediately. Super awesome!!!
The problem that I have is with the resize mode of stretch. When I set:
resizeMode={FastImage.resizeMode.stretch}
it's working only the first time and every other refresh of the app, or preloding my list of items the images are looking like with:
resizeMode={FastImage.resizeMode.contain}
I have this problem only with the 'stretch' property.
It would be great if we could get the possibility to turn on http caching control (SDWebImageRefreshCached in SDWebImage) to utilise functionality like etags
I do display base64 image with FastImage, work well on iOS, show blank view on Android.
Simple question that came to my mind because I would like to know if I have to care about storing the information that an image has already been fetched before.
Might be added to the readme as well.
Thank you!
iOS:
^
In module 'FLAnimatedImage' imported from app/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/SDWebImage/FLAnimatedImage/FLAnimatedImageView+WebCache.h:14:
app/ios/build/Build/Products/Debug-iphonesimulator/FLAnimatedImage.framework/Headers/FLAnimatedImage.h:64:5: note: previous definition is here
FLLogLevelError,
^
In file included from app/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/SDWebImage/FLAnimatedImage/FLAnimatedImageView+WebCache.m:16:
app/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/Vendors/FLAnimatedImage/FLAnimatedImage/FLAnimatedImage.h:65:5: error: redefinition of enumerator 'FLLogLevelWarn'
FLLogLevelWarn,
^
In module 'FLAnimatedImage' imported from app/node_modules/react-native-fast-image/ios/Vendor/SDWebImage/SDWebImage/FLAnimatedImage/FLAnimatedImageView+WebCache.h:14:
app/ios/build/Build/Products/Debug-iphonesimulator/FLAnimatedImage.framework/Headers/FLAnimatedImage.h:65:5: note: previous definition is here
FLLogLevelWarn,
^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
Android:
15:27 EmptyThrowable: Invalid file: file:///app/node_modules/react-native-fast-image/android/src/main/AndroidManifest.xml
Why is that? updated to RNFI 1.0.0 :/
Thank you for the great work! I cannot wait to see it work on my end (^ ^)/
Here is my basic information:
MacOS Sierra
Expo 20.0.0
React Native 0.47.2
I installed the package following the instruction:
react-native-fast-image
But when I use it, the terminal gives me this warning Warning: Native component for "FastImageView" does not exist
, and NO image was shown, only red boxes. But if I change to React Native's Image component, things work as expected.
I wonder if it is because I am using expo? But I tried eject expo, and link again, but the warning persists, and no image was showing up. :(
Hi i cant install, its my terminal:
yarn add react-native-fast-image
yarn add v0.27.5
[1/4] Resolving packages...
warning There appears to be trouble with your network connection. Retrying...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "> 0.4.x < 0.9.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
On ios, local file uri is /xxx/ooo/document/a.jpg
.
And on Android, the uri is file://xxx/ooo/document/a.jpg
.
Could I add something to support it ?
There is my code, when I set resizeMode={FastImage.resizeMode.stretch},the images does not show as expected,bu other resizeMode works well, why I got this issue?
<FastImage style={{ width: Global.width, height: Global.width * 0.45, borderWidth: 1, }} source={{ uri: "xxx.jpg" }} resizeMode={FastImage.resizeMode.stretch} />
Hi!
I'm trying to use react-native-fast-image
but it doesn't seems to work with Blob. I give it a blob URL as the uri and all i get is a white rectangle with red border. the onError isn't fired.
Could it be because a blob url is made to download the image and your module is ti load online image?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.