Unable to open the Picker in Expo 52 SDK on Android

[MohammadUmer526]

Hello,

We upgraded the Expo version form 51 to 52. The Picker is working fine on iOS but having issue on Android device.

When we try to pen the Picker; it shows jerk and not open.

Version:

react-native-actions-sheet-picker is ^0.3.5

Code:

const onSelectDate = (date: string) => {
  setSelectedDate(date);
  onClose('date');
};

const onSelectTimeSlot = (timeSlot: string) => {
  setSelectedTimeSlot(timeSlot);
  onClose('timeslot');
};


<View className="flex flex-1 bg-white">
    <Picker
      actionsSheetProps={{ keyboardHandlerEnabled: false }}
      data={data.appointments.map((appointment) => appointment.date)}
      id="date"
      label={t('ePurchaseAppointment.dateTitle')}
      searchable={false}
      setSelected={setSelectedDate}
      renderListItem={function (item, index: number) {
        return (
          <Pressable className="mt-8 flex-row justify-between" onPress={(i) => onSelectDate(item)}>
            <View className="inline-fex flex-row items-center gap-x-4">
              <Text className="text-[14px]" font="bold">
                {item}
              </Text>
            </View>
            <View
              className={
                'inline-flex h-5 w-5 items-start justify-start rounded-full border p-0.5' +
                (selectedDate == item ? ' border-primary' : '')
              }
            >
              {selectedDate === item && <View className="bg-primary h-full w-full rounded-full" />}
            </View>
          </Pressable>
        );
      }}
    />
    <Picker
      id="timeslot"
      label={t('ePurchaseAppointment.timeslotTitle')}
      searchable={false}
      setSelected={setSelectedTimeSlot}
      i18nIsDynamicList
      data={
        data.appointments
          .find((appointment) => appointment.date === selectedDate)
          ?.slots.map((timeslot) => timeslot.time) || []
      }
      actionsSheetProps={{ keyboardHandlerEnabled: false }}
      renderListItem={function (item, index: number) {
        return (
          <Pressable className="mt-8 flex-row justify-between" onPress={(i) => onSelectTimeSlot(item)}>
            <View className="inline-fex flex-row items-center gap-x-4">
              <Text className="text-[14px]" font="bold">
                {item}
              </Text>
            </View>
            <View
              className={
                'inline-flex h-5 w-5 items-start justify-start rounded-full border p-0.5' +
                (selectedTimeSlot == item ? ' border-primary' : '')
              }
            >
              {selectedTimeSlot === item && <View className="bg-primary h-full w-full rounded-full" />}
            </View>
          </Pressable>
        );
      }}
    />
    <View className="h-full">
      <View className="w-full flex-[0.5] gap-y-6 px-6 py-8">
        <Pressable
          className="flex h-[56] w-full flex-row items-center justify-between rounded-lg border border-[#DCDCDC] bg-white px-5 py-4"
          onPress={() =>
             onOpen('date')
            }
       
        >
          <Text font={'bold'} className="text-secondary text-[16px] font-[700]">
            {selectedDate ? new Date(selectedDate).toLocaleDateString('en') : t('ePurchaseAppointment.dateTitle')}
          </Text>
        </Pressable>
        <Pressable
          className="flex h-[56] w-full flex-row items-center justify-between rounded-lg border border-[#DCDCDC] bg-white px-5 py-4"
          onPress={() => onOpen('timeslot')}
       
        >
          <Text font={'bold'} className="text-secondary text-[16px] font-[700]">
            {selectedTimeSlot ? selectedTimeSlot : t('ePurchaseAppointment.timeslotTitle')}
          </Text>
        </Pressable>

        <View className="px-3">
          <Button
            disabled={!selectedDate || !selectedTimeSlot || submitOrder.isLoading}
            className={`mt-6 w-full items-center justify-center`}
            onPress={onSubmit}
          >
            {t('ePurchaseAppointment.submit')}
          </Button>
        </View>
      </View>
    </View>
  </View>