AnimatedTextInput causes EXC_BAD_ACCESS crash during next reload

[tomekzaw]

Description

Animating text prop of Animated.createAnimatedComponent(TextInput) makes the app crash during the next reload.

com.facebook.react.runtime.JavaScript (38)
#0	0x0000000105eebafc in std::__1::__shared_count::__release_shared[abi:de190102] at /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator18.5.sdk/usr/include/c++/v1/__memory/shared_ptr.h:156
#1	0x0000000105eebad8 in std::__1::__shared_weak_count::__release_shared[abi:de190102] at /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator18.5.sdk/usr/include/c++/v1/__memory/shared_ptr.h:187
#2	0x0000000105efba2c in std::__1::shared_ptr<facebook::react::State const>::~shared_ptr[abi:de190102] at /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator18.5.sdk/usr/include/c++/v1/__memory/shared_ptr.h:670
#3	0x0000000105efb8f4 in std::__1::shared_ptr<facebook::react::State const>::~shared_ptr[abi:de190102] at /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator18.5.sdk/usr/include/c++/v1/__memory/shared_ptr.h:668
#4	0x00000001060d5e9c in facebook::react::ShadowView::~ShadowView at /Users/tomekzaw/RNOS/react-native-reanimated/apps/fabric-example/ios/Pods/Headers/Public/React-Fabric/react/renderer/mounting/ShadowView.h:24
#5	0x00000001060cfa2c in facebook::react::ShadowView::~ShadowView at /Users/tomekzaw/RNOS/react-native-reanimated/apps/fabric-example/ios/Pods/Headers/Public/React-Fabric/react/renderer/mounting/ShadowView.h:24
#6	0x000000010662aeb4 in facebook::react::AttributedString::Fragment::~Fragment at /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/react-native/ReactCommon/react/renderer/attributedstring/AttributedString.h:33
#7	0x000000010662ae84 in facebook::react::AttributedString::Fragment::~Fragment at /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/react-native/ReactCommon/react/renderer/attributedstring/AttributedString.h:33

Full stack trace:

• Android – AnimatedTextInput crash Android.txt
• iOS – AnimatedTextInput crash iOS.txt

Steps to reproduce

import React, { useEffect } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';
import Animated, {
  Easing,
  useAnimatedProps,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

export default function App() {
  const sv = useSharedValue(0);

  useEffect(() => {
    sv.value = 0;
    sv.value = withRepeat(
      withTiming(1, { duration: 1000, easing: Easing.linear }),
      -1
    );
  });

  const animatedProps = useAnimatedProps(() => {
    return {
      text: `${Math.round(sv.value * 100)}`,
    };
  }, []);

  return (
    <View style={styles.container}>
      <AnimatedTextInput
        // @ts-expect-error it works
        animatedProps={animatedProps}
        style={styles.input}
        editable={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    fontSize: 100,
    textAlign: 'center',
    width: 200,
  },
});

1. Copy the reproducer into fabric-example app
2. Build and launch the app via Xcode
3. Make sure the app is running and the counter is ticking
4. Wait for 30-60 seconds
5. Reload the app by pressing r in the Metro console
6. Observer that the app crashes

Snack or a link to a repository

https://tomekzaw.pl

Reanimated version

4.0.0-beta.5

React Native version

0.80.0-rc.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Android emulator, iOS simulator

Host machine

macOS

Device model

Pixel 6 Pro API 36, iPhone 16 Pro simulator

Acknowledgements

Yes

[Pnlvfx]

It happens to me too with rn 0.80 (it was happening with 0.79.3 too), it seems that it start happening from when I enabled StrictMode, but I can't ensure it.

That's what i'm seeing on the stack trace:

_LIBCPP_HIDE_FROM_ABI element_type* operator->() const _NOEXCEPT {
    static_assert(!is_array<_Tp>::value, "std::shared_ptr<T>::operator-> is only valid when T is not an array type.");
    return __ptr_;  "Thread 1: EXC_BAD_ACCESS (code=1, address=0xb7e6550254a49ddd)"
  }

void PropsRegistry::handleNodeRemovals(const RootShadowNode &rootShadowNode) {
  for (auto it = removableShadowNodes_.begin();
       it != removableShadowNodes_.end();) {
    const auto &shadowNode = it->second;
    const auto &family = shadowNode->getFamily(); "Thread 1: EXC_BAD_ACCESS (code=1, address=0xb7e6550254a49ddd)"
    const auto &ancestors = family.getAncestors(rootShadowNode);

    // Skip if the node hasn't been removed
    if (!ancestors.empty()) {
      ++it;
      continue;
    }

    const auto tag = shadowNode->getTag();
    map_.erase(tag);
    it = removableShadowNodes_.erase(it);
  }