react-native-paper: 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>
  );
}

Change version to 4.3.0 and it starts working
Change version to 4.3.1 and it stops working
Change version back to 4.4.0 and it still is broken
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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 16 (8 by maintainers)

Most upvoted comments

@ashuvssut Here’s the wrapper that I use based on the SO mentioned, written in TypeScript. The type is assigned based on the inserted component’s type.

export function withAnimated<T extends object>(
  WrappedComponent: React.ComponentType<T>
): React.ComponentClass<AnimateProps<T>, any> {
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'Component';

  class WithAnimated extends React.Component<T, any> {
    static displayName = `WithAnimated(${displayName})`;

    render(): React.ReactNode {
      return <WrappedComponent {...this.props} />;
    }
  }
  return Animated.createAnimatedComponent(WithAnimated);
}

Usage:

const AnimatedTextInput = withAnimated(TextInput);

aditasha on Jun 26, 2023

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)

SleeplessByte on Mar 18, 2021