react-native-paper can no longer create animated component using react-native-reanimated (v1) since 4.3.1

Current behaviour

When trying to animate text by react-native-paper using react-native-reanimated (v1), native apps crash, and web apps can’t find the native component.

Error: Unable to locate attached view in the native tree

Expected behaviour

It works.

Code sample

Snack for minimal reproducible example

import * as React from 'react';
import { Animated, Text, View } from 'react-native';
import Reanimated from 'react-native-reanimated'

import { Text as PaperText } from 'react-native-paper'

const AnimatedText = Animated.createAnimatedComponent(Text)
const ReanimatedText = Reanimated.createAnimatedComponent(Text)
const AnimatedPaperText = Animated.createAnimatedComponent(PaperText)
const ReanimatedPaperText = Reanimated.createAnimatedComponent(PaperText)

export default function AssetExample() {
  return (
    <View>
      <AnimatedText>Non-Paper Animated works</AnimatedText>
      <ReanimatedText>Non-Paper Re-animated works</ReanimatedText>
      <AnimatedPaperText>Paper Animated works</AnimatedPaperText>
      <ReanimatedPaperText>it breaks?</ReanimatedPaperText>
    </View>
  );
}

1. Change version to 4.3.0 and it starts working
2. Change version to 4.3.1 and it stops working
3. Change version back to 4.4.0 and it still is broken
4. Alternatively, comment out <ReanimatedPaperText> and it starts working

Using 4.3.0 is not a workaround

In 4.3.0, @react-navigation/material-bottom-tabs won’t “show” the screens (they stay on display: none). This is solved in 4.3.1, which introduces this other issue.

Using 4.2.0 is a workaround

In 4.2.0, none of the aforementioned issues are present.

Your Environment

software	version
ios android web	0.13.x for web
react-native	expo-39.0.4
react-native-paper	4.4.0
react-native-reanimated	1.13.0
node	12.18.2
yarn	1.22.10
expo	39.0.4

Snack SDK: 39.0.0

[SleeplessByte]

storyofmylife.gif

same.apng

I think the reason no one bothered to annotate it before is because this is the standard Higher-Order Component. Only information missing is how to use:

// Instead of...
const AnimatedParagraph = Animated.createAnimatedComponent(Paragraph)

// ...use 
const AnimatedParagraph = withAnimated(Paragraph)

[actuallymentor]

…of gewoon schreeuwen tot het werkt. Trying that right now.

Schreeuwen werkte niet, my laptop has more patience than I. storyofmylife.gif

For those landing here from Google as I did, here is the js annotated solution:

export const withAnimated = WrappedComponent => {

  // Extract the display name of the inputted component
  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'

  // Create a class based on the React Component built-in
  class WithAnimated extends React.Component {
    
    // Set display name property of new class
    displayName = `WithAnimated( ${ displayName } )`

    // Return the inputted component wrapped as a WithAnimated that is so far only a default React Component
    render() {
      return <WrappedComponent { ...this.props } />
    }

  }

  // Run the React Component through the built-in animatifier
  return Animated.createAnimatedComponent( WithAnimated )

}