Draggable AnimatedViews crash simulator

[chops318]

When running on iOS simulator, draggable AnimatedViews throw an unhandled error. I've already tested this in release on testflight, and the draggable modal behaves as expected with no error.

React Native version:

react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8

Steps To Reproduce

1. Create an AnimatedView and a PanResponder which controls the position of the view
2. Try and drag the View.

The View should drag according to the PanResponder, but instead errors out with the following error:

Invariant Violation: [2165,\"RCTView\",{\"top\":0,\"left\":\"<<NaN>>\",\"transform\":[{\"translateY\":40}]}] is not usable as a native method argument\n at invariant

-[RCTCxxBridge handleError:]
__34-[RCTCxxBridge _initializeBridge:]_block_invoke
facebook::react::RCTMessageThread::tryFunc(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1::operator()() const
decltype(std::__1::forward<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(fp)()) std::__1::__invoke<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&&&)
void std::__1::__invoke_void_return_wrapper<void>::__call<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&&&)
std::__1::__function::__func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1>, void ()>::operator()()
std::__1::function<void ()>::operator()() const
invocation function for block in facebook::react::RCTMessageThread::runAsync(std::__1::function<void ()>)
__CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__
__CFRunLoopDoBlocks
__CFRunLoopRun
CFRunLoopRunSpecific
+[RCTCxxBridge runRunLoop]
__NSThread__start__
_pthread_body
_pthread_start
thread_start

You can reproduce it with the following, however, on snack, this does not crash I assume because Expo is a on their own fork?

import { View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TouchableHighlight,
  PanResponder,
  Animated,
  Dimensions,
} from 'react-native';


const { height: SCREEN_HEIGHT } = Dimensions.get('window');
const SWIPE_THRESHOLD = SCREEN_HEIGHT * 0.1;

class ConfirmationModal extends Component {
  constructor(props) {
    super(props);
    const modalPosition = new Animated.ValueXY();
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (_event, gesture) => {
        if (gesture.dy > 0) {
          modalPosition.setValue({ y: gesture.dy });
        }
      },
      onPanResponderRelease: (_event, gesture) => {
        if (gesture.dy <= SWIPE_THRESHOLD) {
          Animated.spring(modalPosition, {
            toValue: {
              x: 0,
              y: 0,
            },
            bounciness: 12,
            speed: 8,
          }).start();
        }
        if (gesture.dy > SWIPE_THRESHOLD) {
          this.props.toggleModal();
        }
      },
    });
    this.state = {
      panResponder,
      modalPosition,
    }
  }

  getModalStyle() {
    const { modalPosition } = this.state;
    const drag = modalPosition.y.interpolate({
      inputRange: [0, SCREEN_HEIGHT],
      outputRange: [0, 250],
    });

    return {
      ...modalPosition.getLayout(),
      transform: [{ translateY: drag }],
    };
  }
  
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={{ flex: 4, opacity: 0.2 }} onPress={this.props.toggleModal} activeOpacity={1} />
        <Animated.View style={[styles.contentContainer, this.getModalStyle()]}>
          <View style={styles.upperContainer}>
            <View style={styles.notch} {...this.state.panResponder.panHandlers} />
            <View style={styles.topRow}>
            </View>
            <View style={{ paddingHorizontal: 20, paddingTop: 5 }}>
            </View>
            <View style={{ paddingTop: 15, paddingHorizontal: 20, }}>
            </View>
          </View>
          <View style={styles.lowerContainer}>
            <TouchableOpacity onPress={this.props.toggleModal}>
              <Text style={styles.cancelText}>Cancel</Text>
            </TouchableOpacity>
            <TouchableHighlight>
              <View>
                <Text style={styles.confirmText}>Confirm</Text>
              </View>
            </TouchableHighlight>
          </View>
        </Animated.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:  {
    flex: 1,
  },
  contentContainer: {
    flex: 3,
    backgroundColor: 'rgb(64, 77, 222)',
    borderTopLeftRadius: 13,
    borderTopRightRadius: 13,
  },
  upperContainer: {
    flex: 3,
  },
  lowerContainer: {
    flex: 1,
    backgroundColor: 'rgb(58, 73, 192)',
    flexDirection: 'row',
    paddingHorizontal: 20,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  notch: {
    height: 8,
    width: 48,
    backgroundColor: 'rgb(161, 182, 255)',
    alignSelf: 'center',
    marginTop: 5,
    borderRadius: 8,
    opacity: 0.85,
  },
  topRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  lowerRow: {
    backgroundColor: 'rgb(58, 73, 192)',
  },
  confirmTitle: {
    fontFamily: 'SFProText-Medium',
    fontSize: 18,
    color: 'rgb(146, 166, 249)',
  },
  confirmBodyText: {
    fontFamily: 'SFProText-Semibold',
    fontSize: 20,
    lineHeight: 28,
    letterSpacing: -0.3,
    color: 'rgb(199, 210, 255)',
  },
  confirmButton: {
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cancelText: {
    fontFamily: 'SFProText-Medium',
    fontSize: 18,
    letterSpacing: 0.18,
    color: 'rgb(146, 166, 249)',
  },
  confirmText: {
    fontFamily: 'SFProText-Bold',
    fontSize: 18,
    letterSpacing: -0.6,
    color: 'rgb(26, 71, 114)',
  },
})

export default ConfirmationModal;

As I said, this is not occurring in our release builds, but obviously makes debugging a pain .

[kozillla]

having exactly the same issue, sadly only downgrading to 0.57.x solved me issue

[chops318]

As a temporary workaround, when setting the modal position using an AnimatedValue with setValue, you must supply an x and y coordinates (lucky for me, my use case does not need anything but 0 as x).

By using this

      onPanResponderMove: (_event, gesture) => {
        if (gesture.dy > 0) {
          modalPosition.setValue({ x: 0 y: gesture.dy });
        }
      },

This fixes the issue on simulator. As a side note, the offending underlying API piece is essentially being passed NaN as a value, causing the error. Not sure what changes (or when) as we updated from 57 to 59. If I end up with free time I may dig into seeing when this changed (and maybe a contributor can tell us if the change is intended)

[steventilator]

I am having the same issue after upgrading to 0.60.4. Also, this might be related: #23835. Seems to me like all AnimatedValues are not passed correctly.

Is downgrading the only option?

[Subway19]

Getting the same issue on 0.59.10

  React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
      CPU: (4) x64 Intel(R) Core(TM) i3-3217U CPU @ 1.80GHz
      Memory: 403.07 MB / 7.69 GB
      Shell: 4.4.19 - /bin/bash
    Binaries:
      Node: 8.3.0 - ~/.nvm/versions/node/v8.3.0/bin/node
      npm: 5.3.0 - ~/.nvm/versions/node/v8.3.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 24.0.1, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64
    npmPackages:
      react: ^16.8.3 => 16.8.3 
      react-native: ^0.59.10 => 0.59.10 

[chops318]

@steventilator Correct, if you follow down to the Animated API level, you'll see that x is evaluated as NaN if not supplied

[niezw]

I found it in debug mode.

everything is all right in release mode

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.