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>
Related
Basically, when I open a textInput, the keyboard takes up half the bottom half of the screen and the screen is then forced to take up the remaining space in the top half. This results in my entire app being squished into half of a screen. I'm using Expo so I can't use android.xml. I'm using React Native Expo and I tried to use Keyboard Avoiding View, added " "softwareKeyboardLayoutMode": "pan" " inside my app.json, and tried using scrollview but none of these helped. I heard that this problem was caused because I used percentages to set dimensions of elements in my app. What do I need to do to remove it?
Maybe you have an KeyboardAvoidingView around all your screen, try to let the KeyboardAvoidingView only around what you want to avoid when you click on a text input.
In React Native, I would like to achieve the following outcome (example):
example1 example2
On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?
Any help would be appreciated!
If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.
Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.
For the overlay I suggest you a cool library like:
https://reactnativeelements.com/docs/tooltip/
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
I'm building a React Native app which has a screen containing a list of several items the user can see. I wrapped up the elements by using a ScrollView component and it works fine as shown below:
However, I'd like to have the vertical scrollbar always visible just to let the user know he can see more items than the ones shown in the first place. I've read the ScrollView documentation but it seems that there is not an option to make it happen.
Does anyone know if there is a way to achieve that or perhaps a workaround to make it intuitive to the user that there is a scroll on the list?
Try this ,Its working for me
persistentScrollbar={true}
https://facebook.github.io/react-native/docs/scrollview#flashscrollindicators
The closest thing to showing the scroll indicator constantly that is available in React Native is flashing the indicator. You can obtain a reference to the scrollview and call the flashScrollIndicators() method. There is no known way to disable hiding the indicator without writing native code. If you want to go down that path, you could try something like this for iOS.
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.