Skip to content

Commit

Permalink
Merge pull request #8 from max-prokopenko/refactor/sdwebimage
Browse files Browse the repository at this point in the history
build: v3.0.0
  • Loading branch information
max-prokopenko committed Aug 24, 2021
2 parents 3bc9b8d + f41946e commit 73e1ebc
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 119 deletions.
2 changes: 1 addition & 1 deletion example/ios/Podfile
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ target 'GifExample' do

use_react_native!(:path => config["reactNativePath"])

pod 'react-native-gif', :path => '../..'
pod 'react-native-gif', :path => '../..'
end
17 changes: 9 additions & 8 deletions example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ PODS:
- React-Core (= 0.63.4)
- React-jsi (= 0.63.4)
- ReactCommon/turbomodule/core (= 0.63.4)
- FLAnimatedImage (1.0.12)
- Folly (2020.01.13.00):
- boost-for-react-native
- DoubleConversion
Expand Down Expand Up @@ -186,9 +185,9 @@ PODS:
- React-cxxreact (= 0.63.4)
- React-jsi (= 0.63.4)
- React-jsinspector (0.63.4)
- react-native-gif (2.2.1):
- FLAnimatedImage (~> 1.0)
- react-native-gif (2.2.0):
- React-Core
- SDWebImage (~> 5.0)
- React-RCTActionSheet (0.63.4):
- React-Core/RCTActionSheetHeaders (= 0.63.4)
- React-RCTAnimation (0.63.4):
Expand Down Expand Up @@ -249,6 +248,9 @@ PODS:
- React-Core (= 0.63.4)
- React-cxxreact (= 0.63.4)
- React-jsi (= 0.63.4)
- SDWebImage (5.11.1):
- SDWebImage/Core (= 5.11.1)
- SDWebImage/Core (5.11.1)
- Yoga (1.14.0)

DEPENDENCIES:
Expand Down Expand Up @@ -285,8 +287,7 @@ DEPENDENCIES:
SPEC REPOS:
trunk:
- boost-for-react-native
- FLAnimatedImage

- SDWebImage
EXTERNAL SOURCES:
DoubleConversion:
:podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
Expand Down Expand Up @@ -348,7 +349,6 @@ SPEC CHECKSUMS:
DoubleConversion: cde416483dac037923206447da6e1454df403714
FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
FLAnimatedImage: 4a0b56255d9b05f18b6dd7ee06871be5d3b89e31
Folly: b73c3869541e86821df3c387eb0af5f65addfab4
glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
Expand All @@ -361,7 +361,7 @@ SPEC CHECKSUMS:
React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
react-native-gif: 62bcc3796f5e578a584b765de4ae712ea6ce27b6
react-native-gif: b448d2f81b8a7cade66e3c9604a729991fa27e29
React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
Expand All @@ -372,8 +372,9 @@ SPEC CHECKSUMS:
React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6

PODFILE CHECKSUM: 646f83d8725d2072fdd4f739d48606faa69a9052
PODFILE CHECKSUM: 6a9514c2a5de783bbb7e1934e78896474d33baba

COCOAPODS: 1.10.1
70 changes: 44 additions & 26 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,48 @@
import * as React from 'react';

import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import GifImage from '@lowkey/react-native-gif';

export default function App() {
const [isPaused, setIsPaused] = React.useState(false);
const [hide, setHide] = React.useState(true);

const [gifs, setGifs] = React.useState([]);

React.useEffect(() => {
fetch('https://g.tenor.com/v1/trending')
.then((response) => response.json())
.then((json) => {
console.log(json.results);
setGifs(json.results);
})
.catch((error) => {
console.error(error);
});
}, []);

const togglePaused = React.useCallback(() => {
setIsPaused(!isPaused);
}, [isPaused]);
return (
<View style={styles.container}>
<TouchableOpacity onPress={togglePaused}>
{/* Remote GIF */}
<GifImage
source={{
uri:
'https://media1.tenor.com/images/9b38bcdea412e68fb780d88bdaa5a5c2/tenor.gif?itemid=10670068',
}}
style={styles.box}
resizeMode={'cover'}
paused={isPaused}
onLoadEnd={() => console.log('onLoadEnd')}
/>
{/* Local GIF */}
<GifImage
source={require('./smile.gif')}
style={styles.box}
resizeMode={'cover'}
paused={isPaused}
/>
{!hide &&
gifs.slice(0, 12).map(
(g: { media: { nanogif: { url: string } }[] }): JSX.Element => (
<GifImage
source={{
uri: g.media[0].nanogif.url,
}}
style={styles.box}
resizeMode={'cover'}
paused={false}
/>
)
)}
<TouchableOpacity onPress={() => setHide(!hide)}>
<Text>Show or Hide</Text>
</TouchableOpacity>
</View>
);
Expand All @@ -40,10 +53,15 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
flex: 1,
flexDirection: 'row',
width: Dimensions.get('window').width,
flexWrap: 'wrap',
padding: 20,
marginTop: 30,
},
box: {
width: Dimensions.get('window').width * 0.8,
height: Dimensions.get('window').width * 0.9,
width: Dimensions.get('window').width * 0.2,
height: Dimensions.get('window').width * 0.2,
marginVertical: 20,
backgroundColor: 'rgba(0,255,0,1)',
margin: 15,
Expand Down
98 changes: 17 additions & 81 deletions ios/GifView.m
Original file line number Diff line number Diff line change
@@ -1,104 +1,40 @@
// #import <Foundation/Foundation.h>
// #import <React/RCTViewManager.h>

// #import "UIView+React.h"
#import "FLAnimatedImage.h"
#import "GifView.h"
#import <React/RCTLog.h>
#import <SDWebImage/SDWebImage.h>

@implementation GifView {

FLAnimatedImageView *_imageView;
FLAnimatedImage *_image;

SDAnimatedImageView *_imageView;
}

- (instancetype)initWithFrame:(CGRect)frame
{
if ((self = [super initWithFrame:frame])) {
_imageView = [[FLAnimatedImageView alloc] init];
_imageView = [SDAnimatedImageView new];

_imageView.sd_imageTransition = SDWebImageTransition.fadeTransition;
_imageView.shouldIncrementalLoad = NO;
}
return self;
}

- (void)layoutSubviews
{
_imageView.frame = self.bounds;
[self addSubview:_imageView];
_imageView.frame = self.bounds;

[self addSubview:_imageView];
}

- (void)setSource:(NSString *)source
{
if (![source isEqual:_source]) {
_source = [source copy];
[self reloadImage];
NSURL *url = [NSURL URLWithString:_source];

CGSize thumbnailSize = CGSizeMake(self.frame.size.width, self.frame.size.height);

[_imageView sd_setImageWithURL:url placeholderImage:nil options:SDWebImageProgressiveLoad context:@{SDWebImageContextImageThumbnailPixelSize : @(thumbnailSize)}];

}
}
- (void)setResizeMode:(NSString *)resizeMode
{
if(![resizeMode isEqual:_resizeMode]) {
_resizeMode = resizeMode;
[self reloadImage];
}
}

-(void)reloadImage {
dispatch_async(dispatch_get_main_queue(), ^{
NSURL *url = [NSURL URLWithString:self->_source];
[self loadAnimatedImageWithURL:url completion:^(FLAnimatedImage *animatedImage) {
self->_image = animatedImage;
NSInteger cMode = UIViewContentModeScaleAspectFit;
if([self->_resizeMode isEqualToString:@"contain"]) {
cMode = UIViewContentModeScaleAspectFit;
} else if ([self->_resizeMode isEqualToString:@"cover"]) {
cMode = UIViewContentModeScaleAspectFill;
}
self->_imageView.contentMode = cMode;
self->_imageView.animatedImage = self->_image;
if(self->_paused) {
[self->_imageView stopAnimating];
}
if (self->_onLoadEnd) {
self->_onLoadEnd(@{});
}
}];
});
}

- (void)loadAnimatedImageWithURL:(NSURL *const)url completion:(void (^)(FLAnimatedImage *animatedImage))completion
{
NSArray *const pathComponents = url.pathComponents;
NSString *filename = [pathComponents componentsJoinedByString:@"_"];
NSString *const diskPath = [NSTemporaryDirectory() stringByAppendingPathComponent:filename];
NSData * __block animatedImageData = [[NSFileManager defaultManager] contentsAtPath:diskPath];
FLAnimatedImage * __block animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:animatedImageData];
if (animatedImage) {
if (completion) {
completion(animatedImage);
}
} else {
[[[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
animatedImageData = data;
animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:animatedImageData];
if (animatedImage) {
if (completion) {
dispatch_async(dispatch_get_main_queue(), ^{
completion(animatedImage);
});
}
[data writeToFile:diskPath atomically:YES];
}
}] resume];
}
}

- (void) setPaused:(BOOL *)paused {
_paused = paused;
if(paused) {
[_imageView stopAnimating];

} else {
[_imageView startAnimating];
}
}


@end
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@lowkey/react-native-gif",
"version": "2.2.2",
"version": "3.0.0",
"description": "Performant react-native component for GIF",
"main": "lib/commonjs/index",
"module": "lib/module/index",
Expand Down
4 changes: 2 additions & 2 deletions react-native-gif.podspec
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@ Pod::Spec.new do |s|
s.source_files = "ios/**/*.{h,m,mm,swift}"


s.dependency "React-Core"
s.dependency 'FLAnimatedImage', '~> 1.0'
s.dependency "React-Core"
s.dependency 'SDWebImage', '~> 5.0'
end

0 comments on commit 73e1ebc

Please sign in to comment.