From 5df07bc96b3dc283e065cccb59cfe3310e1409c3 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 30 Apr 2025 15:31:52 +0300 Subject: [PATCH 1/5] fix(feedback): Disable native driver for backgroundColor animation --- packages/core/src/js/feedback/FeedbackWidgetManager.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx index 856298382e..fb09245d80 100644 --- a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx +++ b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx @@ -124,7 +124,7 @@ class FeedbackWidgetProvider extends React.Component { From 0eb22ef5bde819b22925075fe066362505c37f5f Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 30 Apr 2025 15:36:33 +0300 Subject: [PATCH 2/5] Add changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b0a08b004..f5e417b130 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,12 @@ > make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first. +## Unreleased + +### Fixes + +- Disable native driver for Feedback Widget `backgroundColor` animation ([#4794](https://github.com/getsentry/sentry-react-native/pull/4794)) + ## 6.13.0 ### Changes From b05cb438d0b74f319870d22741f93f3958775d24 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 30 Apr 2025 19:19:50 +0300 Subject: [PATCH 3/5] Use nativeDriver for color animations in RN >= 0.69 --- packages/core/src/js/feedback/FeedbackWidgetManager.tsx | 8 +++++--- packages/core/src/js/feedback/utils.ts | 9 +++++++++ .../core/test/feedback/FeedbackWidgetManager.test.tsx | 1 + 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx index fb09245d80..20f20faea2 100644 --- a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx +++ b/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 { diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts index 9c2826981d..42d8bb3210 100644 --- a/packages/core/src/js/feedback/utils.ts +++ b/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); diff --git a/packages/core/test/feedback/FeedbackWidgetManager.test.tsx b/packages/core/test/feedback/FeedbackWidgetManager.test.tsx index ee317d2650..1749cf0038 100644 --- a/packages/core/test/feedback/FeedbackWidgetManager.test.tsx +++ b/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'); From b226563f87414c092d687a2cfa32db68aa7229ff Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 30 Apr 2025 19:41:40 +0300 Subject: [PATCH 4/5] Update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f5e417b130..0dad6b1e1d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,7 @@ ### Fixes -- Disable native driver for Feedback Widget `backgroundColor` animation ([#4794](https://github.com/getsentry/sentry-react-native/pull/4794)) +- 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 From 1a7721f6977d64344438f9bf5d6176cf84a77d8c Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 1 May 2025 06:49:30 +0300 Subject: [PATCH 5/5] Fix version check Co-authored-by: LucasZF --- packages/core/src/js/feedback/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts index 42d8bb3210..6644bd7468 100644 --- a/packages/core/src/js/feedback/utils.ts +++ b/packages/core/src/js/feedback/utils.ts @@ -24,7 +24,7 @@ export function isModalSupported(): boolean { */ export function isNativeDriverSupportedForColorAnimations(): boolean { const { major, minor } = ReactNativeLibraries.ReactNativeVersion?.version || {}; - return major >= 0 && minor >= 69; + return major > 0 || minor >= 69; } export const isValidEmail = (email: string): boolean => {