Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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

wants to merge 1 commit into from

Conversation

SoyDiego
Copy link
Contributor

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.

image

Layout when you change from landscape to portrait.

image

@SoyDiego
Copy link
Contributor Author

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

Thanks

@RichardLindhout
Copy link
Member

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
Copy link
Member 


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

@RichardLindhout
Copy link
Member

react-native-paper-dates/src/Date/DatePickerModal.tsx

Line 106 in 60e1ea0

dimensions.width > 650 ? styles.modalContentBig : null,

@RichardLindhout
Copy link
Member

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

@RichardLindhout
Copy link
Member

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
Copy link
Member

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

@SoyDiego
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Datepicker: Cannot scroll on calendar (Landscape)
2 participants
@SoyDiego @RichardLindhout