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.

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

Enable landscape orientation for android #64

Merged
merged 4 commits into from
Jun 3, 2020
Merged

Enable landscape orientation for android #64

merged 4 commits into from
Jun 3, 2020

Conversation

sbearben
Copy link
Contributor

@sbearben sbearben commented May 28, 2020

Related to: #11

  1. enable landscape orientation for Android by changing screenOrientation in the manifest from portrait to unspecified
  2. Areas around the app that used the static Dimensions object have been changed to use the useWindowDimensions hook in order to be dynamic
  3. In HomeScreen conditionally show lottieView
  4. HomeScreen/BottomSheet maxWidth 500 when landscape
  5. Onboarding maxWidth 500 when landscape

BottomSheet was tricky - when using percent snapPoints the BottomSheetRaw component doesn't seem to update its internal height/width values that it uses to evaluate the points based on percent when screen dimensions change (see this issue for related discussion: osdnk/react-native-reanimated-bottom-sheet#72).

Tried getting around this by passing it a key that changed on rotation in order to force remount, but this had other issues that needed working around and offers poor UX. In the end opted for passing in dynamic values as snap points, based on current width/height of the viewport.

Edit: Did not see the recent design updates here: #11 (comment). Feel free to close if this doesn't go deep enough.

Home:
Screenshot_1590855477

Screenshot_1590678283

Onboarding:
Screenshot_1590868512

Comment on lines +61 to +65
useEffect(() => {
bottomSheetRef.current?.snapTo(isExpanded ? 0 : 1);
}, [width, isExpanded]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't ideal - unfortunately without it when the bottom sheet is collapsed, on rotation it sometimes would disappear.

import {useOrientation} from './useOrientation';
import {Theme} from './theme';

export const useMaxContentWidth = (): number | undefined => {
Copy link
Contributor Author

@sbearben sbearben May 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rationale for this hook is that if we later want to change how the maxWidth is determined (say, maybe percentage of viewport), we can just make the modification here.

Copy link
Member

@jordanAtShopify jordanAtShopify left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks a lot better, there are some weird things still but this is worth getting in and iterating

@jordanAtShopify jordanAtShopify merged commit 54b3256 into CovidShield:master Jun 3, 2020
henrytao-me pushed a commit that referenced this pull request Jun 21, 2020
lpcox pushed a commit to covidsafe/CovidShieldExposure that referenced this pull request Jul 7, 2020
Enable landscape orientation for android
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants