We are working on an app where a user can read a document, highlight as section and leave a comment. We've tried a few libraries for text highlighting and ultimately built our own, however most of the npm packages I see follow a similar approach: use a TextInput but make uneditable.
We have highlighting working, but the problem is the user needs to be able to see their previous comments by clicking on the section they highlighted. However, onPress on the Text elements within the TextInput don't work.
Here's a trivial example
<TextInput>
<Text onPress={() => console.log('hello')}>Some text</Text>
</TextInput>
The console.log('hello') will never fire. How can I keep the TextInput from blocking its children's onPress events?
And if not, does anyway else know of a way to make text selectable without using an input?
Note: I've only tested this on iOS -- I've seen some comments from people saying it works fine for Android
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'm struggling to understand and fix a problem I've been having when trying to use KeyboardAvoidingView to wrap some text inputs.
To aid my question, I've made an MVCE: https://snack.expo.io/#lee12f/brave-peanut
Please run this using the IOS simulator (or on IOS device) to reproduce the problem.
Clicking between the TextInput components (and around the screen) causes the KeyboardAvoidingView to toggle thus changing my View height. What am I doing wrong? How can I ensure the KeyboardAvoidingView remains enabled when clicking between the inputs?
As a bonus, it would be nice when clicking anywhere other than the inputs for the keyboard to close.
Thanks in advance
EDIT: If possible, without using 3rd party libraries.
try using react-native-keyboard-aware-scroll-view way easier to setup and it performs better in opinion
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView contentContainerStyle={{ flex:1,display:'flex' }} >
/... inputs here
</KeyboardAwareScrollView>
I'm using new pressable component of react native thinking that it's easy to add ripple effect to it.
But, I found that the ripple effect is being triggered only on long press.
i.e To see the ripple, I need to touch the button for atleast 120ms to 150ms. a rough guess.
I tried to recreate the issue on snack.expo.io but i'm getting Minified React error #130; I think snack won't support pressable.
I didn't found answer anywhere. And there is a active issue on github about this. But no where I found any workaround for this issue.
So, If anyone has a workaround for this kindly share here as it will help so many like me.
This is the code to add pressable with ripple effect
<Pressable
style={styles.buttonStyle}
android_ripple={{color: 'black', borderless: true}}>
<Text style={styles.buttonText}>Login</Text>
</Pressable>
I just explored different links followed by the GitHub link you provided and finally found a workaround.
Accordingly, you just have to add a prop onPress={() => {}} on your code even if you don't use it.
This will solve the ripple delay problem.
Hi Everyone,
I am fetching a few buttons from an API and displaying them in a view according to their names. Each of them is displayed as
<TouchableHighlight style={styles.button} onPress={this.onBtnClick.bind(this, item.apiurl)} >
<Text style={styles.Text}{item.displayName}</Text>
</TouchableHighlight>
The button click is not working all over the button except for the last one. It only works on specific areas. I have modified UI is several ways for the first few and checked. It still remains the same.
Any suggestions/Improvements are appreciated.
It's because you're binding the onBtnClick function everytime you click your button.
Simple fix would be onPress={() => this.onBtnClick(item.apiurl)
I have a dialog that contains a few text fields where the user can provide input, like this.
The problem im having is that whenever the user clicks on one of the textfields , the mobile keyboard messes everything up. It looks like this:
I want to have the dialog remain the same - as in, it shouldnt shrink and force the user to scroll down to see the full dialog. I tried using the FullscreenDialog-component, but the problem remains the same - the mobile keyboard just shrinks it and makes it scrollable for some reason. Is there any way to fix this?
EDIT I found a way to sort-of fix this, at least temporarily - add a minHeight to the bodyStyle in the dialog and the keyboard won't overwrite it. Obviously you have to move the dialog up so that the keyboard doesn't block it when it appears :)
I've experienced a similar problem but the solution may not help in every situation.
In my case, the main <Paper /> component height was set to window.innerHeight and another <Paper /> component inside it was set to about window.innerHeight * 0.6. I use this and not simply a CSS unit 'vh' since it compensates for the URL bar.
In the nested paper, I had a <TextField /> and the same problem you described occurred. The solution is basically to listen to onresize event since it fires when the keyboard opens, then you simply use the maxheight of all those measures.
To make it perfect you may want to respect device rotation since it really does require you to use the new height, and of course make sure the component is positioned correctly.