React Native “interactive” keyboardDismissMode throws error when dragged

[lbaldy]

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 29.47 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 24.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.0, 28.0.2
API Levels: 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.0 AI-171.4408382
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

The issue occurs on iOS when the TextInput is wrapped in a ScrollView inside a KeyboardAvoidingView (this is not a necessary condition most likely). It occurs when the scrollview has the bounces={true} and when the user tries to swipe down the keyboard quickly enough after swiping the list. The issue is intermittent. Described as well as a stack question: https://stackoverflow.com/questions/52699542/react-native-interactive-keyboarddismissmode-throws-error-when-dragged

RCTLayoutAnimationGroup expects timings to be in ms, not seconds

is thrown when this happens.

Reproducible Demo

Minimal project is the AwesomeProject from the RNT tutorial with just this component as main.

export default class App extends Component<Props> {

constructor(){
  super();
  this.state = {
    bounces: true
  }
  this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
}

_keyboardDidShow(){
  this.setState({bounces: false});
}

_keyboardDidHide(){
  this.setState({bounces: true});
}

  render() {
    return (
      <KeyboardAvoidingView style={styles.container}  behavior="padding" enabled>
      <ScrollView keyboardDismissMode="interactive" bounces={this.state.bounces}>
      <TextInput
        style={{height: 40, width: 150, borderColor: 'gray', borderWidth: 1}}
      />
      </ScrollView>

      </KeyboardAvoidingView>
    );
  }
}