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.
Related
Note: Nesting Text components is not an option for me!
I am trying to get a third party tooltip text to wrap correctly but I believe the same is true for Text components so I will base my problem on Text components!
If I have a paragraph of text displayed in a single Text component then the text is rendered on the mobile device as expected - if the space available towards the end of the line is not enough for the width of the next word in the paragraph then the word is wrapped, perfect.
My problem occurs when I try and get the same results but by combining components, eg. Say the screen is 400px wide and my first Text component is 200px - this is place in the correct location. The next text component takes up 300px. As there is only 100px left on the current line the entire next block of text starts on a new line, see image below:
<Text style={style}>And this is a popup</Text><Text style={style2}>. You can have multiple tooltips in one</Text>
Unfortunately, nesting Text components is not an option as I am using a 3rd party component from react-native-walkthrough-tooltip and nesting causes my tooltip to be displayed no where near where it should be when displayed.
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.
When resizing using react-bootstraps navbar collapseOnSelect the hamburger menu works properly but at xs or below xs rather the hamburger menu is dropping down onto a new line below the logo creating a larger block than I would like the navbar to be on phone displays I'd like for it to stay on the same line.
If I understand that right, the problem that you are facing is when the hamburger change it’s behavior for the smaller devices you would like it to stay dripping down directly below it and not taking the whole screen, right?
If I’m right, that’s the usual behavior for bootstrap hamburger. I would say that it will be better to follow this UX due to smaller devices having very different sizes of screens. But if you would like to change it’s normal behavior you could remove the following css class from your navbar
.collapse.navbar-collapse
The effect I'm looking for is a bit hard to describe, but I'm basically trying to implement a header above a scrollView which allows you to scroll normally when touching inside the scrollView, but then when you drag up out of the scrollView onto the header, it moves the header up.
This effect is used with the iPhone keyboard as a footer for messages for example, where you can scroll through messages normally and the keyboard will stay. However, if you scroll down into the keyboard, it drags the keyboard down.
https://facebook.github.io/react-native/docs/scrollview.html#keyboarddismissmode 'interactive' is the effect I'm trying to achieve, but instead of for a keyboard I'm looking to do it for some custom header component which is above my scrollView.
I figure I could match the scroll to the components Y translate Y, however I only want to do this depending on where my touch is. Sadly, the onScroll event doesn't seem to contain any information on the touch location, so I can't tell where the user is dragging. Any help or ideas for other ways to implement this would be greatly appreciated.
I've a GUI built app and I set many Icon images in the code for some components.
The thing is I've made sure all "padding" and "margin" values are the same for the different states of the components (unselected, pressed, etc) but when I try to input data into the TextFields, it seems like the dimensions of some components change without notice and they completely mess with my layout.
Even sometimes some of the icons partially disappear. Please see the following screenshot of before and after text input, where the Container and TextFields shrink
I really don't know what else I can do. I have tried many things, but stil the same outcome. Please help.
You need to make the container housing all this components scrollable.
Use Millimeters for your TextField padding and margin, don't use Screen Percentage. From the image in the images you posted, 2mm top and bottom and 1mm left and right would be suitable.
If the components having those icons are pressable like a button, be sure to set their pressedIcon to the same icon.
Lastly, style your TextField Unselected state and copy this to Selected and Pressed states, to avoid erroneous styling.