Skip to content

Question regarding a crash in a simple example #301

@fellenabmb

Description

@fellenabmb

Ask your Question

Simple question, I'm trying to implement the date picker, the single variant, in particular, is crashing with the following error:

Simulator Screenshot - iPhone 14 Pro - 2023-07-07 at 14 35 08

The other variants (input, range, multiple) seem to work just fine replicating the code in the example from the librarie's repository.

The component implementation:


import React, { useCallback, useState } from 'react';
import { DatePickerModal } from 'react-native-paper-dates';

import type { CalendarDate } from 'react-native-paper-dates/lib/typescript/Date/Calendar';
import type { DatePickerProps } from './data-picker-props';

type Props = { date: CalendarDate };

const Single = ({ visible, onDismiss, onConfirm }: DatePickerProps) => {
  const [date, setDate] = useState<CalendarDate>(new Date('2023-07-07T03:24:00'));

  const confirm = useCallback(
    ({ date }: Props) => {
      setDate(date);
      onConfirm(date as CalendarDate);
    },
    [date]
  );

  return (
    <DatePickerModal
      locale="es"
      mode="single"
      visible={visible}
      onDismiss={onDismiss}
      onConfirm={confirm}
      date={date}
    />
  );
};

export default Single;

The example screen:

import registerTranslation from '@objects/data-picker-registerTranslation';
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import DatePicker from '../components/ui/atoms/data-picker/data-picker-single';
import { Button } from '@components/ui';

const styles = StyleSheet.create({
  container: { justifyContent: 'center' }
});

const RNDatePicker = () => {
  const [visible, setVisible] = useState(false);
  registerTranslation;

  return (
    <SafeAreaView style={styles.container}>
      <Button onPress={() => setVisible(true)}>show date picker</Button>
      <DatePicker
        visible={visible}
        onDismiss={() => setVisible(false)}
        onConfirm={date => alert(date)}
      />
    </SafeAreaView>
  );
};

export default RNDatePicker;

Am I missing something? 🤔

My setup:
Macbook M1, running MacOS 13.4
Xcode 14.3
"react": "18.2.0",
"react-native": "0.71.8",

Activity

github-actions

github-actions commented on Jul 7, 2023

@github-actions
Contributor

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs reproNeeds reproducible examplequestionFurther information is requestedstale

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @iM-GeeKy@fellenabmb

        Issue actions

          Question regarding a crash in a simple example · Issue #301 · web-ridge/react-native-paper-dates