web-ridge / react-native-paper-dates

Smooth and fast cross platform Material Design date and time picker for React Native Paper

https://www.reactnativepaperdates.com

MIT License

637 stars 161 forks source link

fix(calendar): Detect orientation and change scrollMode #356

Open SoyDiego opened 7 months ago

SoyDiego commented 7 months ago

Fix #355.

Read below ⚠️

POSSIBLE SOLUTION AT THE MOMENT

landscape mode

Is not 100% ok, we should improve it. I was able to made scrollable the calendar and works perfectly If you are in mode portrait all time or if you are in mode landscape all time. But if you open the modal in portrait and you rotate to landscape the scroll will works, but the layout will breaks. @RichardLindhout I hope can help us to solve this problem.

Layout when you change from `portrait` to `landscape`.

Layout when you change from `landscape` to `portrait`.

SoyDiego commented 7 months ago

Could you give me a hand / ideas / opinions @RichardLindhout?.

Thanks

RichardLindhout commented 7 months ago

I think we could reduce states by useWindowDimensions hook and not use state's at all. I'm not sure why the layout won't change do we have hardcoded width somewhere maybe?

RichardLindhout commented 7 months ago


const dimensions = useWindowDimensions()
const isLandscape = dimensions.width > dimensions.height

RichardLindhout commented 7 months ago

https://github.com/web-ridge/react-native-paper-dates/blob/60e1ea0562ffc4c354ab36d3345a1d2a20adbf05/src/Date/DatePickerModal.tsx#L106

RichardLindhout commented 7 months ago

What about tablets we only need to change scrollMode if height is not enough right?

RichardLindhout commented 7 months ago

I think te problem is here: https://github.com/web-ridge/react-native-paper-dates/blob/master/src/Date/AutoSizer.tsx#L27

Does the onLayout get called is device is rotated?

RichardLindhout commented 7 months ago

I think the swiper.native.ts + Autosizer have some problems maybe on rotate?

SoyDiego commented 7 months ago

What about tablets we only need to change scrollMode if height is not enough right?

Thanks for your reply. I didn't check in tablets because I don't have iOS, for that I would like your help to manage this problem. I can try some things that you told me above, but my level in react-native is not in your level hahaha. I hope we can improve it because is very important this things for accessibility.

Thanks again