UI issues on Landscape mode

react-native-elements / react-native-elements-app

Demo app for React Native Elements (w/ React Native Web)

https://reactnativeelements.com/

1.29k stars 417 forks source link

UI issues on Landscape mode #177

Closed HariAcidReign closed 3 years ago

HariAcidReign commented 3 years ago

Related to #176 PR

Created a checklist of all the UI components with issues in them. I will be fixing all of these latest by tomorrow.

[x] Login and Signup (Weird alignment on Landscape) [Inputs]
[x] Sign up and Beaux Voyages page alignment [Login Example]
[x] Slider Vertical [Slider] (The SliderVertical becomes small in size in Landscape but still maintains the maxVal of 50)
[ ] Overlay becomes portrait on clicking in Landscape mode [Overlay]
[x] Tooltips invisible [Tooltip]
[ ] Tooltips become portrait on clicking them in Landscape [Tooltip]
[ ] BottomSheet becomes portrait on clicking in Landscape mode [BottomSheet]

HariAcidReign commented 3 years ago

Key problems I faced:

ScrollView could not be added to Slider as it was messing up the fluidity of the Slider Vertical functionality. There are 2 ways of solving this (if necessary)
1. Add ScrollView for Slider page, but disable Scrollview when sliding the thumbProp of SliderVertical (makes code messy)
2. Separate window for SliderVertical (kinda overkill)
Overlay, Tooltip, and BottomSheet are inherently incompatible with Landscape mode right now. So, changes have to be made in ReactNativeElements for these to function fluidly in the app.

However, all the other remaining components have been modified to work fluidly on both Portrait and Landscape Modes

HariAcidReign commented 3 years ago

@flyingcircle Overlay, Tooltip, and Bottomsheet still force render into portrait mode even when Landscape is used, when interacted with. I think the problem lies not in the app, but inherently within the component structure itself in RNE. Should any fix be searched to make them Landscape compatible, or can these screens alone be locked into Portrait mode in the app?