Comments (4)
from tamagui.
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)
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.
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.
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)
- Popover incorrect positioning on Android HOT 1
- Slider does not work properly when used inside a FlatList (on Android) HOT 1
- Losing context when using `.styleable`
- docs: document Sheet unmountChildrenWhenHidden prop HOT 4
- Cannot drag sheet up/down when there is scroll inside (Android only)
- Animation not working on Accordion HOT 2
- Broken links on documentation compiler installation page
- Dismissing Select re-focuses full page
- Input. Ref is undefined HOT 1
- Progress bar animates backwards from right to left HOT 4
- Expo Router template fails on start with `Error: createCSSVariable expected string, got: undefined` HOT 2
- Can't perform an iOS or an Android using Expo's EAS Build
- Support for Nextjs Turbopack
- [Bug]: `<Theme />` component not updating all components within provider starting at `v1.105.x` & up HOT 5
- [BUG] CSS Animations with exit/enter styles does not work
- useToastState() hook gets invoked twice HOT 5
- `tabIndex={0}` does not work for accessibility of iOS HOT 3
- Weird jumping issue with simple <Select /> on web
- Pressed state of button is active after returning from in app browser
- "Modal" Prop on Popover Obsolete, Documentation Needs Update HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tamagui.