Updates AnimatedRegion component (react-native-maps#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 <jasonwhite@Jasons-MacBook-Pro.local>
borjomemost · May 6, 2022 · 68f62dc · 68f62dc
1 parent 1b4730a
commit 68f62dc
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 107 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
   }
 }