Let users override "useNativeDriver" for Shimmer / ActivityIndicator

apps/ios/src/Podfile.lock

@@ -18,11 +18,11 @@ PODS:
     - boost-for-react-native
     - DoubleConversion
     - glog
-  - FRNAvatar (0.12.17):
+  - FRNAvatar (0.12.19):
     - MicrosoftFluentUI (= 0.3.0)
     - MicrosoftFluentUI/Avatar_ios (= 0.3.0)
     - React
-  - FRNDatePicker (0.3.7):
+  - FRNDatePicker (0.3.8):
     - MicrosoftFluentUI (= 0.3.0)
     - React
   - glog (0.3.5)
@@ -539,8 +539,8 @@ SPEC CHECKSUMS:
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  FRNAvatar: aae0394c67f2cc2863652c35ea97e27ca9d8e6db
-  FRNDatePicker: 3b0ee573936065b2de86ec61ab5f6407ba8163c8
+  FRNAvatar: ab60c356b71b08a3f54427a5e82376ef3024175e
+  FRNDatePicker: 4c115ce18877f857784519bd3ced009f8a4dae62
   glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   MicrosoftFluentUI: b98d877a2122804132365aa167944f58ef4adb69
   QRCodeReader.swift: 373a389fe9a22d513c879a32a6f647c58f4ef572

apps/macos/src/Podfile.lock

@@ -9,17 +9,17 @@ PODS:
     - React-Core (= 0.63.41)
     - React-jsi (= 0.63.41)
     - ReactCommon/turbomodule/core (= 0.63.41)
-  - FRNAvatar (0.12.17):
+  - FRNAvatar (0.12.19):
     - MicrosoftFluentUI (= 0.3.0)
     - MicrosoftFluentUI/Avatar_ios (= 0.3.0)
     - React
-  - FRNCallout (0.17.29):
+  - FRNCallout (0.18.1):
     - React
-  - FRNCheckbox (0.3.0):
+  - FRNCheckbox (0.3.2):
     - React
-  - FRNMenuButton (0.6.16):
+  - FRNMenuButton (0.6.18):
     - React
-  - FRNRadioButton (0.13.17):
+  - FRNRadioButton (0.13.19):
     - React
   - glog (0.3.5)
   - MicrosoftFluentUI (0.3.0):
@@ -94,7 +94,7 @@ PODS:
     - boost-for-react-native
     - DoubleConversion
     - glog
-  - RCTFocusZone (0.7.32):
+  - RCTFocusZone (0.7.34):
     - React
   - RCTRequired (0.63.41)
   - RCTTypeSafety (0.63.41):
@@ -459,15 +459,15 @@ SPEC CHECKSUMS:
   DoubleConversion: 56a44bcfd14ab2ff66f5a146b2e875eb4b69b19b
   FBLazyVector: 9dde2e0340ba783233dba7c6b77e65889047fbb3
   FBReactNativeSpec: 6088d5ab01851853cc3fc5384d3f5edf7c898e54
-  FRNAvatar: 80646189d327c9d1cda2c300290d58362631079e
-  FRNCallout: 190fc2f657e858d9137a940b989d7b64011cbccd
-  FRNCheckbox: 4d71f200afa938961055805dc25476089671d99d
-  FRNMenuButton: 1412a58b7f88d27d42974aa97a93efdf6eeda744
-  FRNRadioButton: 92527b0ca44bf3fbb96a8a42b27fa6057a2d4919
+  FRNAvatar: ab60c356b71b08a3f54427a5e82376ef3024175e
+  FRNCallout: 28a5d9b7594311bf3f56fbe8631c3c660eb18866
+  FRNCheckbox: 3abc14a67473edd3338dabd6d5943d66e536349c
+  FRNMenuButton: 02610e011feff7caf3a0d467b9b499d76c94e2aa
+  FRNRadioButton: 51d3db9157086fb32f0d351fdf7d914739e4b8ab
   glog: 1cb7c408c781ae8f35bbababe459b45e3dee4ec1
   MicrosoftFluentUI: b98d877a2122804132365aa167944f58ef4adb69
   RCT-Folly: 1347093ffe75e152d846f7e45a3ef901b60021aa
-  RCTFocusZone: 1dc7c87c6dac951b422325cdc6201238716ca071
+  RCTFocusZone: befd11629f89fd4d323d4acf24d3ffb0de6e772e
   RCTRequired: 64eedb6cf5f0ae7d4c3925e0b9a87747d0391735
   RCTTypeSafety: a8ce68a3ce4aa22cd6a9cbf09607ad2b016b51d5
   React: a8f98b76204f8a85b22311e8fe145b7bbe5b80e5
@@ -497,4 +497,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 568704fb95966cf7ad6daa54a1d36eb2d5c3bba6
 
-COCOAPODS: 1.10.2
+COCOAPODS: 1.11.2

change/@fluentui-react-native-experimental-activity-indicator-014d3070-1d79-4cdc-8260-d3dfe568990a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Let client override useNativeDriver prop",
+  "packageName": "@fluentui-react-native/experimental-activity-indicator",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-shimmer-d529f5f8-b729-4280-ae11-014741540384.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Let client override useNativeDriver prop",
+  "packageName": "@fluentui-react-native/experimental-shimmer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/experimental/ActivityIndicator/src/ActivityIndicator.tsx

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import { useRef, useEffect } from 'react';
-import { Animated, Easing, View } from 'react-native';
+import { Animated, Easing, Platform, View } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 import { compose, mergeProps, withSlots, UseSlots, buildUseStyling } from '@fluentui-react-native/framework';
 import { activityIndicatorName, ActivityIndicatorProps, ActivityIndicatorType } from './ActivityIndicator.types';
@@ -36,6 +36,28 @@ export const ActivityIndicator = compose<ActivityIndicatorType>({
     // hiding opacity makes the screen reader on iOS and Android skip over it
     const hideOpacity = animating == false && hidesWhenStopped == true ? 0 : 1;
 
+    const useNativeDriver: boolean = (() => {
+      // Allow the user to override the default setting if needed
+      if (props.useNativeDriver !== undefined) {
+        return props.useNativeDriver;
+      }
+      /**
+       * https://github.com/facebook/react-native/pull/29585
+       * In order for native driven animations to loop, React Native needs this fix,
+       * which is only available in React Native 0.66+, and React Native macOS 0.62+
+       * FluentUI React Native only supports RN 0.63+ at the time of writing, so let's
+       * scope our check to that minimum.
+       */
+      const nativeVersion = Platform.constants.reactNativeVersion;
+      if (Platform.OS === 'macos' && nativeVersion.minor >= 63) {
+        return true;
+      } else if (nativeVersion.minor >= 66) {
+        return true;
+      } else {
+        return false;
+      }
+    })();
+
     const spinAnimation = useRef(new Animated.Value(0)).current;
     useEffect(() => {
       if (animating) {
@@ -44,7 +66,7 @@ export const ActivityIndicator = compose<ActivityIndicatorType>({
             Animated.timing(spinAnimation, {
               toValue: 359,
               duration: 750,
-              useNativeDriver: false,
+              useNativeDriver: useNativeDriver,
               easing: Easing.linear,
             }),
           ]),

packages/experimental/ActivityIndicator/src/ActivityIndicator.types.tsx

@@ -41,6 +41,11 @@ export interface ActivityIndicatorProps extends ActivityIndicatorTokens, ViewPro
    * @defaultValue 'true'
    */
   hidesWhenStopped?: boolean;
+
+  /**
+   * overrides the useNativeDriver prop on the component's animation
+   */
+  useNativeDriver?: boolean;
 }
 
 export interface ActivityIndicatorType {

packages/experimental/Shimmer/src/Shimmer.tsx

@@ -3,11 +3,11 @@ import { useRef, useEffect, useMemo } from 'react';
 import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
 import { shimmerName, ShimmerProps, ShimmerType } from './Shimmer.types';
 import { compose, mergeProps, withSlots, UseSlots, buildUseStyling } from '@fluentui-react-native/framework';
-import { Animated } from 'react-native';
+import { Animated, Platform } from 'react-native';
 import { stylingSettings } from './Shimmer.styling';
 import assertNever from 'assert-never';
 
-export function useShimmerAnimation(memoData: any) {
+export function useShimmerAnimation(memoData: ShimmerProps) {
   const startValue = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     Animated.loop(
@@ -16,7 +16,7 @@ export function useShimmerAnimation(memoData: any) {
           toValue: 30,
           duration: memoData.duration,
           delay: memoData.delay,
-          useNativeDriver: false,
+          useNativeDriver: memoData.useNativeDriver,
         }),
       ]),
     ).start();
@@ -36,6 +36,28 @@ export const Shimmer = compose<ShimmerType>({
     const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
     const tokens = useStyling(props).root;
 
+    const useNativeDriver: boolean = (() => {
+      // Allow the user to override the default setting if needed
+      if (props.useNativeDriver !== undefined) {
+        return props.useNativeDriver;
+      }
+      /**
+       * https://github.com/facebook/react-native/pull/29585
+       * In order for native driven animations to loop, React Native needs this fix,
+       * which is only available in React Native 0.66+, and React Native macOS 0.62+
+       * FluentUI React Native only supports RN 0.63+ at the time of writing, so let's
+       * scope our check to that minimum.
+       */
+      const nativeVersion = Platform.constants.reactNativeVersion;
+      if (Platform.OS === 'macos' && nativeVersion.minor >= 63) {
+        return true;
+      } else if (nativeVersion.minor >= 66) {
+        return true;
+      } else {
+        return false;
+      }
+    })();
+
     const memoizedShimmerData = useMemo(
       () => ({
         angle: props.angle ? props.angle : tokens['angle'],
@@ -47,6 +69,7 @@ export const Shimmer = compose<ShimmerType>({
         shimmerColorOpacity: tokens['shimmerColorOpacity'],
         shimmerWaveColor: props.shimmerWaveColor ? props.shimmerWaveColor : tokens['shimmerWaveColor'],
         shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
+        useNativeDriver: useNativeDriver,
       }),
       [
         props.angle,
@@ -57,6 +80,7 @@ export const Shimmer = compose<ShimmerType>({
         props.shimmerWaveColor,
         props.shimmerWaveColorOpacity,
         props.style,
+        props.useNativeDriver,
       ],
     );
 

packages/experimental/Shimmer/src/Shimmer.types.ts

@@ -142,6 +142,11 @@ export interface ShimmerTokens extends IBackgroundColorTokens {
    * @defaultValue '100%' of the 'width' property
    */
   shimmerWaveWidth?: number | string;
+
+  /**
+   * overrides the useNativeDriver prop on the component's animation
+   */
+  useNativeDriver?: boolean;
 }
 
 export interface ShimmerSlotProps extends ShimmerProps {