Giter VIP home page Giter VIP logo

Comments (4)

Hoolaf avatar Hoolaf commented on September 23, 2024

Uploading image.png…

from tamagui.

seanadkinson avatar seanadkinson commented on September 23, 2024

Also seeing this issue on Android. It appears the react context is somehow getting mangled, Android-only.

Using the out-of-the-box Bento example:

export function DatePickerExample() {
    const [selectedDates, onDatesChange] = useState<Date[]>([]);
    const [open, setOpen] = useState(false);

    useEffect(() => {
        setOpen(false);
    }, [selectedDates]);

    return (
        <DatePicker
            keepChildrenMounted
            open={open}
            onOpenChange={setOpen}
            config={{
                selectedDates,
                onDatesChange,
                calendar: {
                    startDay: 1,
                },
            }}
        >
            <DatePicker.Trigger asChild>
                <DatePickerInput
                    placeholder="Select Date"
                    value={selectedDates[0]?.toDateString() || ''}
                    onReset={() => onDatesChange([])}
                    onButtonPress={() => setOpen(true)}
                />
            </DatePicker.Trigger>
            <DatePicker.Content>
                <DatePicker.Content.Arrow />
                <DatePickerBody />
            </DatePicker.Content>
        </DatePicker>
    );
}

Produces the following error on Android:

 ERROR  TypeError: Cannot read property 'calendars' of undefined

This error is located at:
    in CalendarHeader (created by DatePickerBody)
    in RCTView
    in Unknown (created by DatePickerBody)
    in Provider (created by DatePickerBody)
    in DatePickerBody (created by DatePickerExample)
Screenshot 2024-07-19 at 3 42 45 PM

Here is a simpler example that shows the broken behavior, without any of the Bento code:

import { DatePickerProvider, useDatePickerContext } from '@rehookify/datepicker';
import { Popover } from 'tamagui';
import { useState } from 'react';

const TestComponent = () => {
    const [selectedDates, onDatesChange] = useState<Date[]>([]);
    return (
        <Popover keepChildrenMounted>
            <DatePickerProvider config={{ selectedDates, onDatesChange }}>
                <Popover.Content>
                    <InsidePopoverContent />
                </Popover.Content>

                <OutsidePopoverContent />
            </DatePickerProvider>
        </Popover>
    );
};

const InsidePopoverContent = () => {
    const dpContext = useDatePickerContext();
    console.log(`Inside Popover.Content, DP Context Data: ${typeof dpContext.data}`);
    return null;
};

const OutsidePopoverContent = () => {
    const dpContext = useDatePickerContext();
    console.log(`Outside Popover.Content, DP Context Data: ${typeof dpContext.data}`);
    return null;
};

Rendering this TestComponent produces the following in the console:

 LOG  Outside Popover.Content, DP Context Data: object
 LOG  Inside Popover.Content, DP Context Data: undefined  <---- ERROR

For some reason the Popover.Content (which is provided by DatePicker.Content in the Bento example) is messing up the useDatePickerContext() call.

Running the same code on iOS produces the following output:

 LOG  Inside Popover.Content, DP Context Data: object
 LOG  Outside Popover.Content, DP Context Data: object

I am using the latest version of all these libraries in this example:

  • "tamagui": "^1.102.3"
  • "@rehookify/datepicker": "^6.6.4"
  • "expo": "~51.0.21"
  • "react": "18.2.0"

This is with a Development Build, not Expo Go.

@natew, any hints? Happy to help debug / diagnose more, but I can't figure out what is special about Popover.Content that would cause this.

from tamagui.

seanadkinson avatar seanadkinson commented on September 23, 2024

I suspect it has something to do with this Note at the bottom of the sheet documentation:

Notes
For Android you need to manually re-propagate any context when using modal. This is because React Native doesn't support portals yet.

from tamagui.

seanadkinson avatar seanadkinson commented on September 23, 2024

Indeed, one workaround is to render another <DatePickerProvider> inside the <DatePicker.Content>:

Here is a working Bento example:

export function DatePickerExample() {
    const [selectedDates, onDatesChange] = useState<Date[]>([]);
    const [open, setOpen] = useState(false);
+   const dpConfig = {
+       selectedDates,
+       onDatesChange,
+       calendar: {
+           startDay: 1 as const,
+       },
+   };

    useEffect(() => {
        setOpen(false);
    }, [selectedDates]);

    return (
        <DatePicker
            keepChildrenMounted
            open={open}
            onOpenChange={setOpen}
-           config={{
-               selectedDates,
-               onDatesChange,
-               calendar: {
-                   startDay: 1,
-               },
-           }}
+           config={dpConfig}
        >
            <DatePicker.Trigger asChild>
                <DatePickerInput
                    placeholder="Select Date"
                    value={selectedDates[0]?.toDateString() || ''}
                    onReset={() => onDatesChange([])}
                    onButtonPress={() => setOpen(true)}
                />
            </DatePicker.Trigger>
            <DatePicker.Content>
                <DatePicker.Content.Arrow />
-               <DatePickerBody />
+               <DatePickerProvider config={dpConfig}>
+                   <DatePickerBody />
+               </DatePickerProvider>
            </DatePicker.Content>
        </DatePicker>
    );
}

from tamagui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.