From 68f62dcc5589abaab604fafa8f80567e244e89bd Mon Sep 17 00:00:00 2001 From: Jason White Date: Wed, 15 Sep 2021 11:57:58 -0400 Subject: [PATCH] Updates `AnimatedRegion` component (#3744) * CHANGED: spring and timing methods of AnimatedRegion component to be more succinct, and constructor w/ common setInitialValue method for Animated.Value; ADDED: configTypes and defaultValues vars * FIXED: linting on AnimatedRegion component * REVERTED: changes to Podfile.lock * REVERTED: changes to Podfile.lock * CHANGED: Animated.spring and Animated.timing in AnimatedRegion to both useNativeDriver true * ADDED: optional useNativeDriver to AnimatedRegion constructor as class prop used in spring and timing methods, with coersion to false when not provided * ADDED: useNativeDRiver to Region interface as optional * FIXED: typo on AnimatedRegion from useDefaultDrive to useNativeDriver * CHANGED: AnimatedRegion spring and timing methods w/ optional config.useNativeDriver * UPDATED: README, AnimatedMarkers, AnimatedViews w/ useNativeDriver notes on spring and timing * CHANGED: index.d.ts w/ useNativeDriver on AnimatedRegionTimingConfig and AnimatedRegionSpringConfig; REMOVED: useNativeDriver from AnimatedRegion * REMOVED: files added during build testing in OS dirs Co-authored-by: Jason White --- README.md | 1 + example/examples/AnimatedMarkers.js | 3 +- example/examples/AnimatedViews.js | 3 + index.d.ts | 12 +- lib/components/AnimatedRegion.js | 165 +++++++++++----------------- 5 files changed, 77 insertions(+), 107 deletions(-) diff --git a/README.md b/README.md index 6032660ca3..a5419b62b5 100644 --- a/README.md +++ b/README.md @@ -482,6 +482,7 @@ componentWillReceiveProps(nextProps) { } else { this.state.coordinate.timing({ ...nextProps.coordinate, + useNativeDriver: true, // defaults to false if not passed explicitly duration }).start(); } diff --git a/example/examples/AnimatedMarkers.js b/example/examples/AnimatedMarkers.js index 957788dc7d..6da0581b26 100644 --- a/example/examples/AnimatedMarkers.js +++ b/example/examples/AnimatedMarkers.js @@ -46,7 +46,8 @@ class AnimatedMarkers extends React.Component { this.marker._component.animateMarkerToCoordinate(newCoordinate, 500); } } else { - coordinate.timing(newCoordinate).start(); + // `useNativeDriver` defaults to false if not passed explicitly + coordinate.timing({ ...newCoordinate, useNativeDriver: true }).start(); } } diff --git a/example/examples/AnimatedViews.js b/example/examples/AnimatedViews.js index dedd346e2f..b5f47c337a 100644 --- a/example/examples/AnimatedViews.js +++ b/example/examples/AnimatedViews.js @@ -226,6 +226,7 @@ class AnimatedViews extends React.Component { inputRange: markers.map((m, i) => i * SNAP_WIDTH), outputRange: markers.map(m => m.coordinate.longitude), }), + useNativeDriver: true, // defaults to false if not passed explicitly duration: 0, }) .start(); @@ -295,6 +296,7 @@ class AnimatedViews extends React.Component { outputRange: [LONGITUDE_DELTA, LONGITUDE_DELTA * 0.5], extrapolate: 'clamp', }), + useNativeDriver: true, // defaults to false if not passed explictly duration: 0, }) .start(); @@ -310,6 +312,7 @@ class AnimatedViews extends React.Component { inputRange: markers.map((m, i) => i * SNAP_WIDTH), outputRange: markers.map(m => m.coordinate.longitude), }), + useNativeDriver: true, // defaults to false if not passed explictly duration: 0, }) .start(); diff --git a/index.d.ts b/index.d.ts index ab0d676818..8d86005cdc 100644 --- a/index.d.ts +++ b/index.d.ts @@ -80,6 +80,7 @@ declare module 'react-native-maps' { easing?: (value: number) => number; duration?: number; delay?: number; + useNativeDriver?: boolean; } interface AnimatedRegionSpringConfig @@ -96,13 +97,14 @@ declare module 'react-native-maps' { stiffness?: number; mass?: number; damping?: number; + useNativeDriver?: boolean; } - export class AnimatedRegion extends RNAnimated.AnimatedWithChildren { - latitude: RNAnimated.Value; - longitude: RNAnimated.Value; - latitudeDelta: RNAnimated.Value; - longitudeDelta: RNAnimated.Value; + export class AnimatedRegion extends Animated.AnimatedWithChildren { + latitude: Animated.Value; + longitude: Animated.Value; + latitudeDelta: Animated.Value; + longitudeDelta: Animated.Value; constructor(region?: Region); diff --git a/lib/components/AnimatedRegion.js b/lib/components/AnimatedRegion.js index d3ea897b88..51b11397d7 100644 --- a/lib/components/AnimatedRegion.js +++ b/lib/components/AnimatedRegion.js @@ -8,37 +8,46 @@ if (__DEV__) { ); } } -// const __Animated = Object.getPrototypeOf(AnimatedWithChildren); -// if (__Animated.name !== 'Animated') console.error('AnimatedRegion could not obtain Animated base class'); -var _uniqueId = 1; +const configTypes = [ + 'latitude', + 'longitude', + 'latitudeDelta', + 'longitudeDelta', +]; + +const defaultValues = { + // probably want to come up with better defaults + latitude: 0, + longitude: 0, + latitudeDelta: 0, + longitudeDelta: 0, +}; + +let _uniqueId = 1; + +const getAnimatedValue = (valueIn, fallback) => { + return valueIn instanceof Animated.Value + ? valueIn + : new Animated.Value(fallback); +}; export default class AnimatedMapRegion extends AnimatedWithChildren { - constructor(valueIn) { + constructor(valueIn = {}) { super(); - var value = valueIn || { - // probably want to come up with better defaults - latitude: 0, - longitude: 0, - latitudeDelta: 0, - longitudeDelta: 0, - }; - this.latitude = - value.latitude instanceof Animated.Value - ? value.latitude - : new Animated.Value(value.latitude); - this.longitude = - value.longitude instanceof Animated.Value - ? value.longitude - : new Animated.Value(value.longitude); - this.latitudeDelta = - value.latitudeDelta instanceof Animated.Value - ? value.latitudeDelta - : new Animated.Value(value.latitudeDelta); - this.longitudeDelta = - value.longitudeDelta instanceof Animated.Value - ? value.longitudeDelta - : new Animated.Value(value.longitudeDelta); + this.latitude = getAnimatedValue(valueIn.latitude, defaultValues.latitude); + this.longitude = getAnimatedValue( + valueIn.longitude, + defaultValues.longitude + ); + this.latitudeDelta = getAnimatedValue( + valueIn.latitudeDelta, + defaultValues.latitudeDelta + ); + this.longitudeDelta = getAnimatedValue( + valueIn.longitudeDelta, + defaultValues.longitudeDelta + ); this._regionListeners = {}; } @@ -95,10 +104,8 @@ export default class AnimatedMapRegion extends AnimatedWithChildren { } addListener(callback) { - var id = String(_uniqueId++); - var jointCallback = (/*{value}*/) => { - callback(this.__getValue()); - }; + const id = String(_uniqueId++); + const jointCallback = () => /*{value}*/ callback(this.__getValue()); this._regionListeners[id] = { latitude: this.latitude.addListener(jointCallback), longitude: this.longitude.addListener(jointCallback), @@ -119,80 +126,36 @@ export default class AnimatedMapRegion extends AnimatedWithChildren { } spring(config) { - var animations = []; - config.hasOwnProperty('latitude') && - animations.push( - Animated.spring(this.latitude, { - ...config, - toValue: config.latitude, - }) - ); - - config.hasOwnProperty('longitude') && - animations.push( - Animated.spring(this.longitude, { - ...config, - toValue: config.longitude, - }) - ); - - config.hasOwnProperty('latitudeDelta') && - animations.push( - Animated.spring(this.latitudeDelta, { - ...config, - toValue: config.latitudeDelta, - }) - ); - - config.hasOwnProperty('longitudeDelta') && - animations.push( - Animated.spring(this.longitudeDelta, { - ...config, - toValue: config.longitudeDelta, - }) - ); - + const animations = []; + for (const type of configTypes) { + if (config.hasOwnProperty(type)) { + animations.push( + Animated.spring(this[type], { + ...config, + toValue: config[type], + // may help to eliminate some dev warnings and perf issues + useNativeDriver: !!config?.useNativeDriver, + }) + ); + } + } return Animated.parallel(animations); } timing(config) { - var animations = []; - config.hasOwnProperty('latitude') && - animations.push( - Animated.timing(this.latitude, { - ...config, - toValue: config.latitude, - useNativeDriver: false, - }) - ); - - config.hasOwnProperty('longitude') && - animations.push( - Animated.timing(this.longitude, { - ...config, - toValue: config.longitude, - useNativeDriver: false, - }) - ); - - config.hasOwnProperty('latitudeDelta') && - animations.push( - Animated.timing(this.latitudeDelta, { - ...config, - toValue: config.latitudeDelta, - useNativeDriver: false, - }) - ); - - config.hasOwnProperty('longitudeDelta') && - animations.push( - Animated.timing(this.longitudeDelta, { - ...config, - toValue: config.longitudeDelta, - useNativeDriver: false, - }) - ); - + const animations = []; + for (const type of configTypes) { + if (config.hasOwnProperty(type)) { + animations.push( + Animated.timing(this[type], { + ...config, + toValue: config[type], + // may help to eliminate some dev warnings and perf issues + useNativeDriver: !!config?.useNativeDriver, + }) + ); + } + } return Animated.parallel(animations); } }