Tapping Card with onPress causes error when leaving iOS app

[ferbeb]

Current behaviour

Tapping a <Card> shows some sort of background shadow. The next time the user presses the physical home button to leave the app, the errror described in the expected behaviour section is thrown.

I noticed #2063 , but here I do not use dark mode or any theme, see the code sample.

Expected behaviour

This error not happening:

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

This error is located at:
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)
    in Surface (created by Context.Consumer)
    in ThemedComponent (created by withTheme(Surface))
    in withTheme(Surface) (at Card.tsx:148)
    in Card (created by Context.Consumer)
    in ThemedComponent (created by withTheme(Card))
    in withTheme(Card) (at App.js:18)
    in ThemeProvider (at Provider.tsx:88)
    in RCTView (at View.js:34)
    in View (at PortalHost.tsx:126)
    in Portal.Host (at Provider.tsx:86)
    in Provider (at App.js:17)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

Code sample

I prepared a minimal code sample where I just installed react-native-paper and display a Card:

https://github.com/ferbeb/react-native-paper-card-onpress-error-mwe

Code sample

import React from 'react';
import {StyleSheet, Text} from 'react-native';

import {Card, Provider as PaperProvider} from 'react-native-paper';

const App: () => React$Node = () => {
  return (
    <>
      <PaperProvider>
        <Card
          style={styles.card}
          onPress={() => console.log("I'm integral to the crash")}>
          <Text>
            I will crash once you tap me and then click the home button.
          </Text>
        </Card>
      </PaperProvider>
    </>
  );
};

const styles = StyleSheet.create({
  card: {
    height: 50,
    margin: 16,
  },
});

export default App;

Your Environment

software	version
ios or android	iOS 13.6.1 on the iPhone SE 2020
react-native	0.63.2
react-native-paper	4.2.0
node	12.18.3
npm or yarn	yarn
expo sdk	none

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[ferbeb]

Do you need any further information?

[ferbeb]

@Trancever I apologize for mentioning you directly, but I believe this issue is fairly critical and will not get attention being far down the issue list now. Maybe I did not make this clear in the initial post, but this always crashes the app on iOS if onPress is used with a Card component.

I verified that the crash is fixed if I patch react-native-paper and set useNativeDriver to false in Card.ts for handlePressOut and handlePressIn.

The issue should be reproducible on iOS with the repository I provided, let me know if you need more info, please.

Thanks!

[RichardLindhout]

This looks like a React Native issue. Can you try to reproduce this with bare minimum in pure React Native and maybe we can make an issue in the React Native repository.

[gyoung-panopto]

I'm hitting this issue as well. Any time after onPress is called on a Card I get a crash with the same error when the app is backgrounded. I was able to work around this by overriding the value of "dark" in the Card's theme prop to force useNativeDriver to false on the animation:

theme={{
...DefaultTheme,
dark: true
}}

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[wwwenjie]

It should be an upstrem issue: facebook/react-native#28525
And I think also a issue about RNP, when card theme changed from light to dark, this error will occur. I will open new issue to discuss.