diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b0a08b004..0dad6b1e1d 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 in unsupported React Native versions ([#4794](https://github.com/getsentry/sentry-react-native/pull/4794)) + ## 6.13.0 ### Changes diff --git a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx index 856298382e..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..6644bd7468 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');