I made my app responsive using react native responsive screen and using widthPercentageToDP as wp, heightPercentageToDP as hp and using these persentage values to scale across all devices and for most devices that seems to do the trick however when it comes to samsung specific devices that use onscreen buttons eg s8 s9 s10 note series etc it doesn't seem to detect the onscreen buttons and some content ends up being hidden
for example on all the pixel phones the screen height ends at the on screen buttons but when it comes to these samsung devices it seems like it doesn't knew there even there
Each component from my applications has a View that uses a
someStyle: {
flex: 1
}
Some of them do not have that style but their parent does.
Related
I have Text components in one Text component. Onpress for Text components fires on the Text below the one pressed on Android device.
On Web works good.
Seems like due to default extra top padding for a Text - this is why when pressing on one Text the finger touches the one below.
Any help apprecciated.
Line-height doesn't help, increasing padding-bottom works but since it's an inline component I have to change it to inline-block but it doesn't work for Android.
I have an svg element with multiple rect children, can be seen in this react codesandbox, on each rect i added onPointerEnter, and on the side in a show the color of the current rect, while this works fine on desktop, i expect that onPointerEnter would behave the same on a mobile device, but it is not!
If you open the same codesandbox on mobile, you will see that onPointerEnter triggers only when the touch event starts, and does not update when touch moves over the other elements, with that said, onTouchMove does has the same behavior as onPointerEnter (in this scenario)
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
I am using the material ui Slider Library and adding Thumbcomponent prop doesn't allow you to drag the slider around from the thumb on mobile, however, the slider does allow you to start dragging after tapping on a mark and resuming sliding that way. It seems that the thumb becomes static after tapping it.
I am trying to draw lines between the thumbs of three sliders by adding a ref to each thumb and running getBoundingClientRect() on each ref in the componentdidUpdate of the parent holding the sliders. I have add some additional hacky code to account for the fact that the sliders are located on a drawer. I do intend for the thumb to be an image as well.
Can find the demo on https://codesandbox.io/s/trial-map-svg-lines-8xluo
I tried removing the ref from the span (in Thumbcomponent, line 54) so that the custom location code goes away but the issue still prevails leading me to believe, its not the ref that is causing the issue and nor is it the custom code.
On desktop, this behavior doesn't occur but I've tried running this on android, IOS and the chrome dev tools mobile simulation where it does.
Kind of working with removing pointer events for the custom thumb:
pointer-events: none;
The problem seems to be that the touch events are not propagated from the thumb to the actual slider.
I am using the library airbnb/react-dates for the datepicker. I am using the standard code:
<SingleDatePicker
orientation={datePickerOrientation}
date={newEndsOn}
onDateChange={(date) => setNewEndsOn(date)}
focused={datePickerFocused}
onFocusChange={({ focused }) => setDatePickerFocused(focused)}
/>
where datePickerOrientation can get the values 'vertical' or 'horizontal', depending on mobile device or desktop.
In mobile device I can see the navigation arrows to move over months. Unfortunately, I can not see the arrows on the desktop version.
Does anybody know why? Is this expected behaviour?
I found in this issue that you can override the arrows, but unfortunately it just work for mobile:
https://github.com/airbnb/react-dates/issues/692
Somehow the arrows for desktop are not in the dom.