diff --git a/apps/fabric/ios/Podfile.lock b/apps/fabric/ios/Podfile.lock index 82bcfefe..0d63f588 100644 --- a/apps/fabric/ios/Podfile.lock +++ b/apps/fabric/ios/Podfile.lock @@ -894,7 +894,7 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/yoga" SPEC CHECKSUMS: - boost: a7c83b31436843459a1961bfd74b96033dc77234 + boost: 57d2868c099736d80fcd648bf211b4431e51a558 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 FBLazyVector: 61839cba7a48c570b7ac3e1cd8a4d0948382202f diff --git a/apps/fabric/src/App.tsx b/apps/fabric/src/App.tsx index 9766a2e9..5f910593 100644 --- a/apps/fabric/src/App.tsx +++ b/apps/fabric/src/App.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import AnimatedLottieView from 'lottie-react-native'; const color = { @@ -6,64 +7,98 @@ const color = { secondary: '#64E9FF', }; +const remoteSource = { + uri: 'https://raw.githubusercontent.com/lottie-react-native/lottie-react-native/master/apps/paper/src/animations/Watermelon.json', +}; + +const localSource = require('./animations/LottieLogo1.json'); + const App = () => { + const [source, setSource] = React.useState<'local' | 'remote'>('local'); + return ( - { - console.log('finished'); - }} - colorFilters={[ - { - keypath: 'BG', - color: color.primary, - }, - { - keypath: 'O-B', - color: color.secondary, - }, - { - keypath: 'L-B', - color: color.secondary, - }, - { - keypath: 'T1a-Y 2', - color: color.secondary, - }, - { - keypath: 'T1b-Y', - color: color.secondary, - }, - { - keypath: 'T2b-B', - color: color.secondary, - }, - { - keypath: 'T2a-B', - color: color.secondary, - }, - { - keypath: 'I-Y', - color: color.secondary, - }, - { - keypath: 'E1-Y', - color: color.secondary, - }, - { - keypath: 'E2-Y', - color: color.secondary, - }, - { - keypath: 'E3-Y', - color: color.secondary, - }, - ]} - enableMergePathsAndroidForKitKatAndAbove - /> + + { + console.log('finished'); + }} + /> + { + setSource(source === 'local' ? 'remote' : 'local'); + }} + style={styles.button}> + + {source === 'local' ? 'Local animation' : 'Remote animation'} + + + ); }; +const styles = StyleSheet.create({ + button: {backgroundColor: color.primary, marginTop: 24, padding: 24}, + text: {color: 'white'}, + lottie: {width: 400, height: 400}, +}); + +const localColorFilter = [ + { + keypath: 'BG', + color: color.primary, + }, + { + keypath: 'O-B', + color: color.secondary, + }, + { + keypath: 'L-B', + color: color.secondary, + }, + { + keypath: 'T1a-Y 2', + color: color.secondary, + }, + { + keypath: 'T1b-Y', + color: color.secondary, + }, + { + keypath: 'T2b-B', + color: color.secondary, + }, + { + keypath: 'T2a-B', + color: color.secondary, + }, + { + keypath: 'I-Y', + color: color.secondary, + }, + { + keypath: 'E1-Y', + color: color.secondary, + }, + { + keypath: 'E2-Y', + color: color.secondary, + }, + { + keypath: 'E3-Y', + color: color.secondary, + }, +]; + export default App; diff --git a/apps/paper/ios/Podfile.lock b/apps/paper/ios/Podfile.lock index 70d05dd7..c960c2b3 100644 --- a/apps/paper/ios/Podfile.lock +++ b/apps/paper/ios/Podfile.lock @@ -301,7 +301,7 @@ PODS: - React-jsinspector (0.71.0) - React-logger (0.71.0): - glog - - react-native-slider (4.3.2): + - react-native-slider (4.4.0): - React-Core - React-perflogger (0.71.0) - React-RCTActionSheet (0.71.0): @@ -570,7 +570,7 @@ SPEC CHECKSUMS: hermes-engine: ca3834c67d1729953a2645b89a59f38c47e94ab3 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 lottie-ios: c55158d67d0629a260625cc2ded2052b829e3c3e - lottie-react-native: 8acede38abe26c803d5328f144669475ff15321b + lottie-react-native: 6bcc2ddf085c2d092948978b57de2c7d6a138a0c OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda RCTRequired: dea3e4163184ea57c50288c15c32c1529265c58f @@ -586,7 +586,7 @@ SPEC CHECKSUMS: React-jsiexecutor: 060dd495f1e2af3d87216f7ca8a94c55ec885b4f React-jsinspector: 5061fcbec93fd672183dfb39cc2f65e55a0835db React-logger: a6c0b3a807a8e81f6d7fea2e72660766f55daa50 - react-native-slider: e540525ea731783850802b7af457d8551edb0711 + react-native-slider: d2938a12c4e439a227c70eec65d119136eb4aeb5 React-perflogger: e5fc4149e9bbb972b8520277f3b23141faa47a36 React-RCTActionSheet: 991de88216bf03ab9bb1d213d73c62ecbe64ade7 React-RCTAnimation: b74e3d1bf5280891a573e447b487fa1db0713b5b diff --git a/apps/paper/src/LottieAnimatedExample.js b/apps/paper/src/LottieAnimatedExample.js index 69a4dbfb..e64a912c 100644 --- a/apps/paper/src/LottieAnimatedExample.js +++ b/apps/paper/src/LottieAnimatedExample.js @@ -61,7 +61,7 @@ const EXAMPLES = [ require('./animations/MotionCorpse-Jrcanest.json'), ), makeExample('Remote load', () => ({ - uri: 'https://raw.githubusercontent.com/lottie-react-native/lottie-react-native/master/example/js/animations/Watermelon.json', + uri: 'https://raw.githubusercontent.com/lottie-react-native/lottie-react-native/master/apps/paper/src/animations/Watermelon.json', })), ]; @@ -159,8 +159,16 @@ export default class LottieAnimatedExample extends React.Component { }; render() { - const {duration, isPlaying, isPaused, isInverse, progress, loop, example, renderMode} = - this.state; + const { + duration, + isPlaying, + isPaused, + isInverse, + progress, + loop, + example, + renderMode, + } = this.state; return ( diff --git a/packages/core/ios/Fabric/LottieAnimationViewComponentView.mm b/packages/core/ios/Fabric/LottieAnimationViewComponentView.mm index b4922c78..f091d557 100644 --- a/packages/core/ios/Fabric/LottieAnimationViewComponentView.mm +++ b/packages/core/ios/Fabric/LottieAnimationViewComponentView.mm @@ -85,6 +85,10 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & [_view setRenderMode:RCTNSStringFromString(newLottieProps.renderMode)]; } + if(oldLottieProps.autoPlay != newLottieProps.autoPlay) { + [_view setAutoPlay:newLottieProps.autoPlay]; + } + [super updateProps:props oldProps:oldProps]; } diff --git a/packages/core/ios/Fabric/LottieContainerView.h b/packages/core/ios/Fabric/LottieContainerView.h index fe2b8419..48b855e0 100644 --- a/packages/core/ios/Fabric/LottieContainerView.h +++ b/packages/core/ios/Fabric/LottieContainerView.h @@ -16,6 +16,7 @@ - (void)setProgress:(CGFloat)newProgress; - (void)reactSetFrame:(CGRect)frame; - (void)setLoop:(BOOL)isLooping; +- (void)setAutoPlay:(BOOL)isAutoPlay; - (void)setTextFiltersIOS:(NSArray * _Nonnull)newTextFilters; - (void)setRenderMode:(NSString * _Nonnull)newRenderMode; - (void)setSourceURL:(NSString * _Nonnull)newSourceURLString; diff --git a/packages/core/ios/LottieReactNative/ContainerView.swift b/packages/core/ios/LottieReactNative/ContainerView.swift index 15c80e11..89ea5238 100644 --- a/packages/core/ios/LottieReactNative/ContainerView.swift +++ b/packages/core/ios/LottieReactNative/ContainerView.swift @@ -9,6 +9,7 @@ import Foundation class ContainerView: RCTView { private var speed: CGFloat = 0.0 private var progress: CGFloat = 0.0 + private var autoPlay: Bool = false private var loop: LottieLoopMode = .playOnce private var sourceJson: String = "" private var resizeMode: String = "" @@ -59,6 +60,13 @@ class ContainerView: RCTView { animationView?.loopMode = loop } + @objc func setAutoPlay(_ autoPlay: Bool) { + self.autoPlay = autoPlay + if(autoPlay && animationView?.isAnimationPlaying == false) { + self.play() + } + } + @objc func setTextFiltersIOS(_ newTextFilters: [NSDictionary]) { textFilters = newTextFilters @@ -70,10 +78,10 @@ class ContainerView: RCTView { filters[key] = value; } - let starAnimationView = LottieAnimationView() - starAnimationView.textProvider = DictionaryTextProvider(filters) - starAnimationView.animation = animationView?.animation - replaceAnimationView(next: starAnimationView) + let nextAnimationView = LottieAnimationView() + nextAnimationView.textProvider = DictionaryTextProvider(filters) + nextAnimationView.animation = animationView?.animation + replaceAnimationView(next: nextAnimationView) } } @@ -104,11 +112,11 @@ class ContainerView: RCTView { renderMode = .automatic } if (animationView != nil) { - let starAnimationView = LottieAnimationView( + let nextAnimationView = LottieAnimationView( animation: animationView?.animation, configuration: getLottieConfiguration() ) - replaceAnimationView(next: starAnimationView) + replaceAnimationView(next: nextAnimationView) } } @@ -133,12 +141,11 @@ class ContainerView: RCTView { } DispatchQueue.main.async { - let starAnimationView = LottieAnimationView( + let nextAnimationView = LottieAnimationView( animation: animation, configuration: self.getLottieConfiguration() ) - self.replaceAnimationView(next: starAnimationView) - self.animationView?.play() + self.replaceAnimationView(next: nextAnimationView) } } catch { if (RCT_DEBUG == 1) { @@ -160,11 +167,11 @@ class ContainerView: RCTView { return } - let starAnimationView = LottieAnimationView( + let nextAnimationView = LottieAnimationView( animation: animation, configuration: getLottieConfiguration() ) - replaceAnimationView(next: starAnimationView) + replaceAnimationView(next: nextAnimationView) } @objc func setSourceName(_ newSourceName: String) { @@ -173,11 +180,11 @@ class ContainerView: RCTView { } sourceName = newSourceName - let starAnimationView = LottieAnimationView( + let nextAnimationView = LottieAnimationView( name: sourceName, configuration: getLottieConfiguration() ) - replaceAnimationView(next: starAnimationView) + replaceAnimationView(next: nextAnimationView) } @objc func setResizeMode(_ resizeMode: String) { @@ -258,6 +265,10 @@ class ContainerView: RCTView { animationView?.animationSpeed = speed animationView?.loopMode = loop applyColorProperties() + + if (self.autoPlay) { + self.play() + } } func applyColorProperties() { diff --git a/packages/core/ios/LottieReactNative/LRNAnimationViewManagerObjC.m b/packages/core/ios/LottieReactNative/LRNAnimationViewManagerObjC.m index 3d313b3c..e6c36add 100644 --- a/packages/core/ios/LottieReactNative/LRNAnimationViewManagerObjC.m +++ b/packages/core/ios/LottieReactNative/LRNAnimationViewManagerObjC.m @@ -9,6 +9,7 @@ @interface RCT_EXTERN_MODULE(LottieAnimationView, RCTViewManager) RCT_EXPORT_VIEW_PROPERTY(sourceURL, NSString); RCT_EXPORT_VIEW_PROPERTY(progress, CGFloat); RCT_EXPORT_VIEW_PROPERTY(loop, BOOL); +RCT_EXPORT_VIEW_PROPERTY(autoPlay, BOOL); RCT_EXPORT_VIEW_PROPERTY(speed, CGFloat); RCT_EXPORT_VIEW_PROPERTY(onAnimationFinish, RCTBubblingEventBlock); RCT_EXPORT_VIEW_PROPERTY(colorFilters, LRNColorFilters); diff --git a/packages/core/src/LottieView.tsx b/packages/core/src/LottieView.tsx index 0f3d06e4..2154d8e4 100644 --- a/packages/core/src/LottieView.tsx +++ b/packages/core/src/LottieView.tsx @@ -56,16 +56,6 @@ export class AnimatedLottieView extends React.PureComponent< this._captureRef = this._captureRef.bind(this); } - componentDidUpdate(prevProps: AnimatedLottieViewProps) { - if ( - this.props.autoPlay === true && - this.props.source !== prevProps.source && - !!this.props.source - ) { - this.play(); - } - } - play(startFrame?: number, endFrame?: number): void { Commands.play( this._lottieAnimationViewRef, @@ -171,6 +161,7 @@ export class AnimatedLottieView extends React.PureComponent< sourceJson={sourceJson} sourceURL={sourceURL} onAnimationFinish={this.onAnimationFinish} + autoPlay={autoPlay} /> ); diff --git a/packages/core/src/specs/LottieAnimationViewNativeComponent.ts b/packages/core/src/specs/LottieAnimationViewNativeComponent.ts index 2098b822..a62640c7 100644 --- a/packages/core/src/specs/LottieAnimationViewNativeComponent.ts +++ b/packages/core/src/specs/LottieAnimationViewNativeComponent.ts @@ -39,6 +39,7 @@ export interface NativeProps extends ViewProps { progress?: Float; speed?: Double; loop?: boolean; + autoPlay?: boolean; enableMergePathsAndroidForKitKatAndAbove?: boolean; hardwareAccelerationAndroid?: boolean; cacheComposition?: boolean;