Card component breaks on expo 53.0.0 and react-native 0.79.2 (Android only)

[fabriziocucci]

Current behaviour

When pressing on the Card, the following error is thrown:

 ERROR  [05-05-2025 10:42:27]
{"componentStack": undefined, "id": "ci21wj", "message": "You attempted to set the key `_animation` with the value `{\"__active\":false,\"__isInteraction\":true,\"__iterations\":1,\"_toValue\":2,\"_duration\":150,\"_delay\":0}` on an object that is meant to be immutable and has been frozen.", "source": "global-handler", "stack": "Error: You attempted to set the key `_animation` with the value `{\"__active\":false,\"__isInteraction\":true,\"__iterations\":1,\"_toValue\":2,\"_duration\":150,\"_delay\":0}` on an object that is meant to be immutable and has been frozen.

  74 |  * LTI update could not be added via codemod */
  75 | function throwOnImmutableMutation(key: empty, value) {
> 76 |   throw Error(
     |              ^
  77 |     'You attempted to set the key `' +
  78 |       key +
  79 |       '` with the value `' +

Call Stack
  throwOnImmutableMutation (packages/mobile/node_modules/react-native/Libraries/Utilities/deepFreezeAndThrowOnMutationInDev.js:76:14)
  animate (packages/mobile/node_modules/react-native/Libraries/Animated/nodes/AnimatedValue.js:312:20)
  start (packages/mobile/node_modules/react-native/Libraries/Animated/AnimatedImplementation.js:231:26)
  start (packages/mobile/node_modules/react-native/Libraries/Animated/AnimatedImplementation.js:238:14)
  runElevationAnimation (packages/mobile/node_modules/react-native-paper/src/components/Card/Card.tsx:222:15)
  useLatestCallback$argument_0 (packages/mobile/node_modules/react-native-paper/src/components/Card/Card.tsx:228:26)
  apply (packages/mobile/<native>)
  latestCallback (packages/mobile/node_modules/use-latest-callback/lib/src/index.js:42:33)
  onPressIn (packages/mobile/node_modules/react-native/Libraries/Components/Pressable/Pressable.js:263:20)
  _activate (packages/mobile/node_modules/react-native/Libraries/Pressability/Pressability.js:771:16)
  _performTransitionSideEffects (packages/mobile/node_modules/react-native/Libraries/Pressability/Pressability.js:738:21)
  _receiveSignal (packages/mobile/node_modules/react-native/Libraries/Pressability/Pressability.js:696:41)
  responderEventHandlers.onResponderGrant (packages/mobile/node_modules/react-native/Libraries/Pressability/Pressability.js:468:30)
  executeDirectDispatch (packages/mobile/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:613:61)
  ResponderEventPlugin.extractEvents (packages/mobile/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:14216:59)
  batchedUpdates$1$argument_0 (packages/mobile/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:1386:59)
  batchedUpdatesImpl (packages/mobile/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:16520:18)
  batchedUpdates$1 (packages/mobile/node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:1343:34)
  dispatchEvent (packages/mobile/http:/127.0.0.1:8081/packages/mobile/index.bundle)

On iOS, everything works fine.

Expected behaviour

When pressing on the Card, everything should simply work.

How to reproduce?

coming soon

Preview

N/A

What have you tried so far?

Replace the Card with simple View.

Your Environment

software	version
ios	x
android	x
react-native	0.79.2
react-native-paper	5.14.0
node	x.x.x
npm or yarn	x.x.x
expo sdk	53.0.0

[lukewalczak]

Hey @fabriziocucci, I've tried to reproduce it on the new react native project with expo 53, however without success. Please add a repro 🙏🏽

[fabriziocucci]

@lukewalczak trying as we speak, it looks like the repro is more complicated than expected! 🙁

I currently have a list (vertical) of lists (horizontal), where each item of the horizontal lists is a Card.

Still not sure what's the exact repro but I'll try to gradually narrow down the issue.

[Wurushu]

Got error on Card after upgraded to expo SDK 53, too.

ERROR  Warning: TypeError: 0, _useLatestCallback.default is not a function (it is undefined)

[lukewalczak]

@Wurushu could you please share the repro?

[Wurushu]

@lukewalczak Sorry, I made a silly mistake!
It works fine on my project after updating react-native-paper to the latest version. Tested on web, iOS, Android.

[behrouz-s]

After updating react-native-paper to the latest version, I removed the outlineStyle properties from my code to resolve the issue.

[ajmeese7]

Can confirm, upgrading from 5.13.1 to 5.14.1 solved the issue for me.

[antonio-vevivo]

Getting this error with version 5.14.1 on Android when using the mode="outlined" property.

[fabriziocucci]

@antonio-vevivo would you be able to share a simple repro? Which version of react-native are you on?

@lukewalczak given that multiple people reported the issue, is it worth investigating this on your side?

[antonio-vevivo]

@fabriziocucci I tried to build a sample but the error does not appear, and unfortunately I cannot share the code as is... I am using a ScrollView with multiple components, one of those is a FlatList (horizontal) that renders the cards with mode=outline.

I am using Expo 53, with react 19.0.0 and react-native 0.79.2 and react-native-paper 5.14.3. Running this in Expo Dev Client.

I recently upgraded from Expo 52 to Expo 53.

[antonio-vevivo]

@fabriziocucci @lukewalczak Managed to reproduce it eventually. The problem is because of the OnPress event on card.

import { useMemo } from "react";
import { Alert, FlatList, Platform, ScrollView } from "react-native";
import { Card, DefaultTheme, List, PaperProvider, ThemeProvider } from "react-native-paper";

export default function HomeScreen() {
    const DATA = useMemo(() => {
        return [
            {
                id: "1",
                title: "Hello, Expo Router!",
                description:
                    "This is a simple example of using Expo Router with React Native.",
            },
            {
                id: "2",
                title: "Hello, Expo Router!",
                description:
                    "This is a simple example of using Expo Router with React Native.",
            },
            {
                id: "3",
                title: "Hello, Expo Router!",
                description:
                    "This is a simple example of using Expo Router with React Native.",
            },
            {
                id: "4",
                title: "Hello, Expo Router!",
                description:
                    "This is a simple example of using Expo Router with React Native.",
            }
        ];
    }, []);

    return (
        <PaperProvider>
            <ThemeProvider theme={DefaultTheme}>
                <ScrollView
                    style={{ flex: 1 }}
                    contentContainerStyle={{ paddingTop: 100, gap: 8 }}
                >
                    <List.Subheader>{"Test"}</List.Subheader>
                    <FlatList
                        showsHorizontalScrollIndicator={Platform.OS === "web"}
                        horizontal={true}
                        data={DATA}
                        renderItem={renderItem}
                        keyExtractor={keyExtractor}
                    />
                </ScrollView>
            </ThemeProvider>
        </PaperProvider>
    );
}

const keyExtractor = (item: { id: string }) => item.id;

const renderItem = ({
    item,
}: {
    item: { title: string; description: string };
}) => (
    <Card
        mode={"outlined"}
        style={{ minWidth: 200, maxWidth: 300 }}
        onPress={() => { Alert.alert("Card Pressed", item.title); }}
    >
        <Card.Title title={item.title} subtitle={item.description} />
    </Card>
);

[fabriziocucci]

Thanks @antonio-vevivo! 🙌

@lukewalczak, the minimal repro seems sufficient, let me know if you find something wrong with the current Card implementation or if we need to further extract the repro so that we can pass it to the React Native team.