fix(feedback): Disable native driver for backgroundColor animation (#4794)

* fix(feedback): Disable native driver for backgroundColor animation

* Add changelog

* Use nativeDriver for color animations in RN >= 0.69

* Update changelog

* Fix version check

Co-authored-by: LucasZF <[email protected]>

---------

Co-authored-by: LucasZF <[email protected]>

Author: antonis

CHANGELOG.md

@@ -6,6 +6,12 @@
 > make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first.
 <!-- prettier-ignore-end -->
 
+## Unreleased
+
+### Fixes
+
+- Disable native driver for Feedback Widget `backgroundColor` animation in unsupported React Native versions ([#4794](https://github.com/getsentry/sentry-react-native/pull/4794))
+
 ## 6.13.0
 
 ### Changes

packages/core/src/js/feedback/FeedbackWidgetManager.tsx

@@ -9,12 +9,14 @@ import { modalSheetContainer, modalWrapper, topSpacer } from './FeedbackWidget.s
 import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 import { getFeedbackOptions } from './integration';
 import { lazyLoadAutoInjectFeedbackIntegration } from './lazy';
-import { isModalSupported } from './utils';
+import { isModalSupported, isNativeDriverSupportedForColorAnimations } from './utils';
 
 const PULL_DOWN_CLOSE_THRESHOLD = 200;
 const SLIDE_ANIMATION_DURATION = 200;
 const BACKGROUND_ANIMATION_DURATION = 200;
 
+const useNativeDriverForColorAnimations = isNativeDriverSupportedForColorAnimations();
+
 class FeedbackWidgetManager {
   private static _isVisible = false;
   private static _setVisibility: (visible: boolean) => void;
@@ -124,7 +126,7 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
         Animated.timing(this.state.backgroundOpacity, {
           toValue: 1,
           duration: BACKGROUND_ANIMATION_DURATION,
-          useNativeDriver: true,
+          useNativeDriver: useNativeDriverForColorAnimations,
           easing: Easing.in(Easing.quad),
         }),
         Animated.timing(this.state.panY, {
@@ -206,7 +208,7 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
         Animated.timing(this.state.backgroundOpacity, {
           toValue: 0,
           duration: BACKGROUND_ANIMATION_DURATION,
-          useNativeDriver: true,
+          useNativeDriver: useNativeDriverForColorAnimations,
           easing: Easing.out(Easing.quad),
         })
       ]).start(() => {

packages/core/src/js/feedback/utils.ts

@@ -18,6 +18,15 @@ export function isModalSupported(): boolean {
   return !(isFabricEnabled() && major === 0 && minor < 71);
 }
 
+/**
+ * The native driver supports color animations since React Native 0.69.
+ * ref: https://github.com/facebook/react-native/commit/201f355479cafbcece3d9eb40a52bae003da3e5c
+ */
+export function isNativeDriverSupportedForColorAnimations(): boolean {
+  const { major, minor } = ReactNativeLibraries.ReactNativeVersion?.version || {};
+  return major > 0 || minor >= 69;
+}
+
 export const isValidEmail = (email: string): boolean => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   return emailRegex.test(email);

packages/core/test/feedback/FeedbackWidgetManager.test.tsx

@@ -12,6 +12,7 @@ import { getDefaultTestClientOptions, TestClient } from '../mocks/client';
 
 jest.mock('../../src/js/feedback/utils', () => ({
   isModalSupported: jest.fn(),
+  isNativeDriverSupportedForColorAnimations: jest.fn().mockReturnValue(true),
 }));
 
 const consoleWarnSpy = jest.spyOn(console, 'warn');