Android Crash when unmounted the component where DatePicker modal is used.

[dev-pkk]

Describe the bug Error: Exception in HostFunction: TurboModule method "removeListeners" called with 1 arguments (expected argument count: 0).

This error is located at: in DatePickerAndroid (created by DatePickerWrapper) in DatePickerWrapper (created by UploadSkinPictureScreen) in RCTView (created by View) in View (created by UploadSkinPictureScreen) in RCTView (created by View) in View (created by UploadSkinPictureScreen) in RCTView (created by View) in View (created by UploadSkinPictureScreen)

To Reproduce When the screen is unmounted or moves to another screen where DatePicker component is used as modal app crashes.

import {
  Image,
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

import moment from 'moment';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import React from 'react';
import DatePicker from 'react-native-date-picker';

export default class UploadSkinPictureScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isDateTimePickerVisible: false,
      pictureDate: 'Date and Time of Picture Taken',
      remark: '',
    };
  }

  handleDatePicked = date => {
    var picDate = moment(date, "yyyy-MM-dd'T'HH:mm:ss").format(
      'DD MMM YYYY | hh:mm A',
    );
    this.setState({
      pictureDate: picDate,
      isDateTimePickerVisible: false,
    });
  };

  inputText = text => {
    this.setState({
      remark: text,
    });
  };

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar backgroundColor="#4ABC96" barStyle="light-content" />
        <SafeAreaView style={{flex: 1, backgroundColor: '#4ABC96'}}>
          <View style={{flex: 1, backgroundColor: '#FFFFFF'}}>
            <KeyboardAwareScrollView>
              <View
                style={{
                  marginTop: 30,
                  alignSelf: 'center',
                  flexDirection: 'column',
                }}>
                <TouchableOpacity
                  onPress={() =>
                    this.setState({isDateTimePickerVisible: true})
                  }>
                  <View
                    style={{
                      height: 40,
                      borderWidth: 1,
                      borderColor: 'grey',
                      borderRadius: 24,
                      alignItems: 'center',
                      flexDirection: 'row',
                      marginHorizontal: 10,
                    }}>
                    <Text style={styles.robotoMediumText}>
                      {this.state.pictureDate}
                    </Text>
                    <Image
                      resizeMode="contain"
                      style={{height: 15, width: 20, marginRight: 20}}
                      source={require('../assets/icons/calendar-icon.png')}
                    />
                  </View>
                </TouchableOpacity>
                {/* Name View */}
                <View
                  style={{
                    height: 40,
                    borderWidth: 1,
                    borderColor: 'grey',
                    borderRadius: 24,
                    alignItems: 'center',
                    flexDirection: 'row',
                    marginTop: 10,
                    marginHorizontal: 10,
                  }}>
                  <TextInput
                    style={{
                      flex: 1,
                      marginLeft: 22,
                      fontSize: 13,
                      fontFamily: 'Roboto-Medium',
                      color: 'grey',
                    }}
                    returnKeyType={'done'}
                    autoCapitalize="none"
                    placeholder={'Remark'}
                    placeholderTextColor={'grey'}
                    onChangeText={text => this.inputText(text)}
                    maxLength={200}
                    value={this.state.remark}
                  />
                </View>
              </View>
            </KeyboardAwareScrollView>
            <DatePicker
              modal
              open={this.state.isDateTimePickerVisible}
              date={
                this.state.pictureDate === 'Date and Time of Picture Taken'
                  ? new Date()
                  : moment(this.state.pictureDate, 'DD MMM YYYY')?.toDate() ??
                    new Date()
              }
              onConfirm={this.handleDatePicked}
              mode="datetime"
              maximumDate={new Date()}
              minimumDate={new Date('1950-01-01')}
              confirmBtnText="Confirm"
              cancelBtnText="Cancel"
              onCancel={() => this.setState({isDateTimePickerVisible: false})}
            />
          </View>
        </SafeAreaView>
        <SafeAreaView style={{flex: 0, backgroundColor: '#FFF'}} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  robotoMediumText: {
    color: 'grey',
    fontSize: 13,
    fontFamily: 'Roboto-Medium',
    marginLeft: 22,
    flex: 1,
  },
});

Smartphone (please complete the following information):

• OS: Android
• React Native version 0.72.4
• react-native-date-picker version ^4.3.2

Please help to fix this issue I am looking for this. Thanks

[henninghall]

@dev-pkk thanks for reporting this, a fix has been released in version 4.3.3