Error: Style property 'shadowOffset' is not supported by native animated module

[jslok]

Current behaviour

On rn 0.73.0 when using a rn-paper button with mode='contained', pressing on the button causes a crash with the listed error. Any other mode works fine. Only tested on Android.

Worked fine before I upgraded to rn 0.73.0.

Expected behaviour

No error

How to reproduce?

Tap a button with mode='contained'.

What have you tried so far?

rn-paper v4 and v5
disabling useNativeDriver in node_modules/react-native-paper/src/components/Button/Button.tsx makes it work but obviously not ideal.

Your Environment

software	version
android	13
react-native	0.73.0
react-native-paper	v4 and v5 latest

[jslok]

Same error with Chip with mode='outlined'

[MatthieuKephyre]

index 229f4e5..1c5bbdf 100644
--- a/node_modules/react-native-paper/src/components/Chip/Chip.tsx
+++ b/node_modules/react-native-paper/src/components/Chip/Chip.tsx
@@ -215,20 +215,22 @@ const Chip = ({
   const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
     const { scale } = theme.animation;
     onPressIn?.(e);
+
     Animated.timing(elevation, {
       toValue: isV3 ? (elevated ? 2 : 0) : 4,
       duration: 200 * scale,
-      useNativeDriver: true,
+      useNativeDriver: false,
     }).start();
   });
 
   const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
     const { scale } = theme.animation;
     onPressOut?.(e);
+
     Animated.timing(elevation, {
       toValue: isV3 && elevated ? 1 : 0,
       duration: 150 * scale,
-      useNativeDriver: true,
+      useNativeDriver: false,
     }).start();
   });

This patch package fixed the problem for me.

The "elevation" animated value here is not used for ios, it's only used for android, so you can use useNativeDriver: false or before Animated.timing return void if Platform.OS === "ios"

[tgermain-impirica]

Same issue here. Upgrading from RN 0.71.x to 0.73.0. React Native Paper 4.12.5

[lucaswitch]

I can confirm this is happening after upgrading to react-native 0.73.
react-native-paper version: 4.12.5
The issue happens when the button is pressed.

[gayanishakaraw]

I could reproduce the issue on react-native 0.73 with react-native-paper 5.11.1 as well. The issue is related to the Chip components.

[lucaswitch]

Maybe shadowOffset is not valid anymore on react-native 0.73, maybe fix it on 4.12.6 and 5.11.1

[jslok]

Turns out disabling useNativeDriver for the Button component still crashes in production but works in dev. Works fine for both modes on Chip. Any idea why?

[danidaryaweesh]

I'm running the latest version of this library 5.11.4 with RN 0.73 and getting the same issue on iOS as well.

[lucaswitch]

This is critical

[adamgajzlerowicz]

Any updates on this please?

[lukewalczak]

It should be fixed in 5.11.5 and 4.12.6.

[lucaswitch]

Thank you @lukewalczak !

[pgpankajcapgemini]

I'm running the latest version of this library 5.11.5 with RN 0.73.1 including "expo": "49.0.8" and getting the same issue on iOS.

I tried to print "Platform.constants.reactNativeVersion.minor" and getting below response in console.

output: {"major": 0, "minor": 72, "patch": 4}

[shreya-bb]

i am running react react version "^0.72.0", and react native paper ^4.12.5 still having same app crash issue

[jslok]

i am running react react version "^0.72.0", and react native paper ^4.12.5 still having same app crash issue

Double check you are on 4.12.6 because it is fixed.

[HieronymusLex]

I'm running the latest version of this library 5.11.5 with RN 0.73.1 including "expo": "49.0.8" and getting the same issue on iOS.

I tried to print "Platform.constants.reactNativeVersion.minor" and getting below response in console.

output: {"major": 0, "minor": 72, "patch": 4}

I had the same issue even after updating to 5.12.3 and clearing the bundler cache resolved the issue for me

[d0sc]

I am running on latest version and the issue still appears.

After explicitly changing the Chip to useNativeDriver: false, it worked again. Might want to check in again. I am using expo and tried the approach to clear cache first.
4.12.6 is giving me a render error for my App.js, so this was not an aption.

const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
    const { scale } = theme.animation;
    onPressIn?.(e);
    Animated.timing(elevation, {
      toValue: isV3 ? (elevated ? 2 : 0) : 4,
      duration: 200 * scale,
      useNativeDriver: false,
    }).start();
  });

  const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
    const { scale } = theme.animation;
    onPressOut?.(e);
    Animated.timing(elevation, {
      toValue: isV3 && elevated ? 1 : 0,
      duration: 150 * scale,
      useNativeDriver: false,
    }).start();
  });

[instructorlee]

using 5.12.3 - Having the same issue when buttons are set to mode = ELEVATED. Still kinda new with RN, what is 'Chip' and where can I find it. Thanks.

[dan-doyon-endear]

using 5.12.3 - Having the same issue when buttons are set to mode = ELEVATED. Still kinda new with RN, what is 'Chip' and where can I find it. Thanks.

we're on RNP 5.11.3

node_modules/react-native-paper/src/components/Chip/Chip.tsx

We're using patch-package to fix it for now, not entirely sure the latest version fixes it but will try later.

[dan-doyon-endear]

5.12.3 is working for us

[disco-panda]

Note that if you are running an Expo development build, you will need to rebuild with the latest react native version in order for Platform.constants.reactNativeVersion.minor to return 73 (thus fixing this issue)

[farmhutsoftwareteam]

I had the same issue with Expo 51, I removed the mode="contained and the button started working

[metamorphogenesis]

I had the same issue with Expo 51, I removed the mode="contained and the button started working

Works with Expo 51, RN 0.74

Thank you @farmhutsoftwareteam