If you use ...DarkTheme, mode: "exact",

then also everything is fine but not without exact mode

Need to reopen this

#2068 looks like solving the issue, but it still breaks if:

1: Currently on light theme 2: Press a card, for example, that opens a menu 3: The user quickly change mind and click a “toggle dark theme switch with adaptive mode”

What is happening is:

The Card component is still with the elevation animation running with dark: false, but suddenly the dark: true and the animation breaks. Just as if we tried to start the animation with the dark: true in the first place (partial solution by #2068).

The problem is here in the Surface. At this line the elevation is using native driver with the dark theme (in this very specific case of running animation while toggling the theme).

@Trancever can you reopen?

@Keplyx if you’re still interested in a patch-package solution, the following preserves the native driver on light mode / exact mode and only uses the JS driver on dark adaptive mode.

diff --git a/node_modules/react-native-paper/lib/commonjs/components/Card/Card.js b/node_modules/react-native-paper/lib/commonjs/components/Card/Card.js
index 2dd6d71..aa70977 100644
--- a/node_modules/react-native-paper/lib/commonjs/components/Card/Card.js
+++ b/node_modules/react-native-paper/lib/commonjs/components/Card/Card.js
@@ -78,27 +78,23 @@ class Card extends React.Component {
     });
 
     _defineProperty(this, "handlePressIn", () => {
-      const {
-        scale
-      } = this.props.theme.animation;
+      const { dark, mode, animation: { scale } } = this.props.theme
 
       _reactNative.Animated.timing(this.state.elevation, {
         toValue: 8,
         duration: 150 * scale,
-        useNativeDriver: true
+        useNativeDriver: !dark || mode === 'exact',
       }).start();
     });
 
     _defineProperty(this, "handlePressOut", () => {
-      const {
-        scale
-      } = this.props.theme.animation;
+      const { dark, mode, animation: { scale } } = this.props.theme
 
       _reactNative.Animated.timing(this.state.elevation, {
         // @ts-ignore
         toValue: this.props.elevation,
         duration: 150 * scale,
-        useNativeDriver: true
+        useNativeDriver: !dark || mode === 'exact',
       }).start();
     });
   }
diff --git a/node_modules/react-native-paper/lib/module/components/Card/Card.js b/node_modules/react-native-paper/lib/module/components/Card/Card.js
index a080816..53a37ee 100644
--- a/node_modules/react-native-paper/lib/module/components/Card/Card.js
+++ b/node_modules/react-native-paper/lib/module/components/Card/Card.js
@@ -60,25 +60,23 @@ class Card extends React.Component {
     });
 
     _defineProperty(this, "handlePressIn", () => {
-      const {
-        scale
-      } = this.props.theme.animation;
+      const { dark, mode, animation: { scale } } = this.props.theme
+
       Animated.timing(this.state.elevation, {
         toValue: 8,
         duration: 150 * scale,
-        useNativeDriver: true
+        useNativeDriver: !dark || mode === 'exact',
       }).start();
     });
 
     _defineProperty(this, "handlePressOut", () => {
-      const {
-        scale
-      } = this.props.theme.animation;
+      const { dark, mode, animation: { scale } } = this.props.theme
+
       Animated.timing(this.state.elevation, {
         // @ts-ignore
         toValue: this.props.elevation,
         duration: 150 * scale,
-        useNativeDriver: true
+        useNativeDriver: !dark || mode === 'exact',
       }).start();
     });
   }
diff --git a/node_modules/react-native-paper/src/components/Card/Card.tsx b/node_modules/react-native-paper/src/components/Card/Card.tsx
index a61cfee..28f4966 100644
--- a/node_modules/react-native-paper/src/components/Card/Card.tsx
+++ b/node_modules/react-native-paper/src/components/Card/Card.tsx
@@ -105,21 +105,23 @@ class Card extends React.Component<Props, State> {
   };
 
   private handlePressIn = () => {
-    const { scale } = this.props.theme.animation;
+    const { dark, mode, animation: { scale } } = this.props.theme
+
     Animated.timing(this.state.elevation, {
       toValue: 8,
       duration: 150 * scale,
-      useNativeDriver: true,
+      useNativeDriver: !dark || mode === 'exact',
     }).start();
   };
 
   private handlePressOut = () => {
-    const { scale } = this.props.theme.animation;
+    const { dark, mode, animation: { scale } } = this.props.theme
+
     Animated.timing(this.state.elevation, {
       // @ts-ignore
       toValue: this.props.elevation,
       duration: 150 * scale,
-      useNativeDriver: true,
+      useNativeDriver: !dark || mode === 'exact',
     }).start();
   };

This is because using backgroundColor is not supported with the native driver, it’s an unresolved issue from 3 years ago: https://github.com/facebook/react-native/issues/14178

The problem is handlePressIn / handlePressOut functions for the Card component have useNativeDriver: true

https://github.com/callstack/react-native-paper/blob/2ce47a149215bfe6c7c6cb8391a5096faf8a1266/src/components/Card/Card.tsx#L112

If you go and edit both of those functions to useNativeDriver: false, it will work fine.

I have met same issue, but now I fixed by changing the theme from const theme = { …DarkTheme, }; to const theme = { …DefaultTheme, };

Yes but this means disabling the built-in DarkTheme, which is not a fix.

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it’s not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.io. If it’s not possible to repro it on snack.expo.io, then you can also provide the repro in a GitHub repository.

I updated the issue to include a link to a Snack example

I have the same issue. when I toggle on darkmode > the card module from react native paper throws an error for animated backgrouncColor.

This issue is only available on darkmode not on the normal theme

@SleeplessByte already solved at #2113

But I didn’t have any problem with v3.x.x, did they enable nativeDriver in v4 ? I am not going to edit the lib because it makes unmaintainable code, instead I just add a TouchableRipple inside the card until it is fixed.

Yes it was changed for v4 with this PR #1787

As for editing the lib, I use patch-package to make small temporary patches that are relatively easy to maintain without needing to make a fork or track upstream.