[Bug]: Multiple date pickers in the same view do not work

[bmatasar]

Describe the bug

In the attached sample App.tsx I try to add to RNDP side-by-side to selecte start and end times.

However, only the first one works correctly. The second does not trigger onDateChanged.
The reason is that in DatePickerAndroid.js, thisId is always the id of the first of the components you interact with. id is correct though, and due to the mismatch the function exits early.

Expected behavior

All date pickers should trigger correctly onDateChange.

To Reproduce

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import { format, startOfToday } from 'date-fns';
import { useState } from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import DatePicker from 'react-native-date-picker';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const [startTime, setStartTime] = useState<Date>(() => startOfToday());
  const [endTime, setEndTime] = useState<Date>(() => startOfToday());

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.row}>
        <View style={styles.item}>
          <Text style={styles.titleText}>{format(startTime, 'HH:mm')}</Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.titleText}>{format(endTime, 'HH:mm')}</Text>
        </View>
      </View>
      <View style={styles.row}>
        <DatePicker
          mode="time"
          date={startTime}
          onDateChange={setStartTime}
          theme="light"
          style={styles.picker}
        />
        <DatePicker
          mode="time"
          date={endTime}
          onDateChange={setEndTime}
          theme="light"
          style={styles.picker}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 32,
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
  },
  item: { flex: 1 },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  picker: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    marginLeft: 4,
    marginRight: 4,
  },
});

export default App;

Operating System

• Android
• iOS

React Native Version

0.83.0

Expo Version (if applicable)

No response

react-native-date-picker version

5.0.13

React Native Architecture

• Old Architecture (Paper)
• New Architecture (Fabric)

Relevant log output

[bmatasar]

It looks like the cleanup of the effect removes all listeners for a component, not only those added by it. In order to fix that, remove the subscriptions individually.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-date-picker/src/DatePickerAndroid.js b/node_modules/react-native-date-picker/src/DatePickerAndroid.js
index a8a1e71..c4db8a1 100644
--- a/node_modules/react-native-date-picker/src/DatePickerAndroid.js
+++ b/node_modules/react-native-date-picker/src/DatePickerAndroid.js
@@ -46,11 +46,11 @@ export const DatePickerAndroid = React.memo((props) => {
 
   useEffect(() => {
     const eventEmitter = new NativeEventEmitter(NativeModule)
-    eventEmitter.addListener('dateChange', onChange)
-    eventEmitter.addListener('spinnerStateChange', onSpinnerStateChanged)
+    const subscriptionDateChange = eventEmitter.addListener('dateChange', onChange)
+    const subscriptionSpinnerStateChange = eventEmitter.addListener('spinnerStateChange', onSpinnerStateChanged)
     return () => {
-      eventEmitter.removeAllListeners('dateChange')
-      eventEmitter.removeAllListeners('spinnerStateChange')
+      subscriptionDateChange.remove();
+      subscriptionSpinnerStateChange.remove();
     }
   }, [onChange, onSpinnerStateChanged])

This issue body was partially generated by patch-package.