I am using react-native-keyboard-aware-scroll-view to see the input box above the keyboard. It working fine.
But one of my input boxes has a dropdown. It is hidden behind the keyboard. I have tried setting the margin values. It did not work for me.
Any solution for this
React Native's EditText has theisFocused ()props that checks to see if it is focused.
You can call a function that raises your list when EditText is in focus, and to go down when focus is false.
Use a Timeout because otherwiseEditText will not go at the same time as your list.
Not a good solution I know, but you can also try this with animation to improve it a bit.
Related
So I have a restaurant listing with a filter at the top and below that the restaurants are updated as you type to match your filter. When your filter does not return anything the view is then changed to show a "No restaurants found, change your filter" type message. I have this set up as a KeyboardAvoidingView because I wanted it centered vertically, and when you have the keyboard open it's sitting just barely above it, and doesn't look great. With the view active however it's pushed up a bit and becomes centered with what is visible.
My problem is that once the filter is used enough to hide all restaurants, the KAV is then shown in the render function but doesn't recognize that the keyboard is open and it needs to move. If I get to that stage and then close/re-open the keyboard it works, but that is far from ideal.
I've already checked out this thread and tried the solution found there: KeyboardAvoidingView - Reset height when Keyboard is hidden but that did not work for me unfortunately.
And this thread seems to have the same problem as I do: react native KeyboardAvoidingView with already opened keyboard dont work properly but the solution was to hide the keyboard, which I do not want. I want them to correct their input and reduce the filter immediately using the already-open keyboard.
Is there a way I can introduce the KAV after the keyboard is already open and have it react to the already-opened keyboard?
trying to build an OTP input screen. From what I read, it can be achieved by hiding the TextInput component and displaying the inputted text in views. I have shared a basic Expo snack link. The text input is not taking the values I press on the keyboard. here is the expo link - https://snack.expo.dev/oD72PI5Xch. Can someone help me with what I am doing wrong?
Another issue I have noticed is that the keyboard doesn't show up if I press the back button and then again press the <Text> component from where I have called the onPress to call focus() on the TextInput. It will come up if I press the back button and then press the Text component only once. If I again close it using the back button, after that the keyboard stops coming up.
Below is the console log output based on the logging statements I have in the code snack (my actions are marked with >>>>>) -
1>>>>> App opens up
text input onfocus called
text input onblur called
keyboard did show
2>>>>> App stabilizes
3>>>>> I press the back button
keyboard did hide
4>>>>> I press the text component
calling focus
keyboard did show
5>>>>> I press the back button
keyboard did hide
6>>>>> I keep pressing the text component
calling focus
calling focus
calling focus
calling focus
calling focus
calling focus
I think the issue might be before the 2>>>>> part. The TextInput's onBlur is already called. That might be the reason why it is not taking keyboard inputs. Also, even after calling focus, the onFocus logging is absent, meaning that the text input never came into focus. What am I doing wrong? Thanks in advance :)
And if you solve this, please help me out with the issue of keyboard not appearing on pressing the Text component multiple times (6>>>>> part of the console output).
I don't clearly understand what are you trying to do by giving 0 height and width to TextInput, If you are trying to create an OTP input field you can simply use any third-party libraries like react-native-otp-input or try to use code from this existing snack
How can I automatically scroll the view up when I focus in a TextInput box and a keyboard is shown such that the TextInput box is not hidden behind the keyboard?
This question has been asked on StackOverflow a few times and I implemented the solution here which is the general solution advised in most of the answers. This solution works fine in the iPhone simulator but doesn't work on the actual phone. Has anyone else experienced this problem that the solution doesn't work on the actual phone?
Second thing that I noticed after adding this solution is that now if I am focussing in a TextInput box and keyboard is shown, if I press a button or try to focus into a different TextInput box, the first touch is always consumed to hide the keyboard and the button is not pressed or the other TextInput box is not focussed. It is a little annoying for the user to have to do the operation twice. Has anyone else observed this problem?
Please let me know if you have any inputs on how to solve these problems?
I assume you are using this solution. I ran into the same problem and made some adjustments (see gist). I addressed both problems you describe. keyboardShouldPersistTaps solves your second problem.
I have not found the exact reason why the spacing works in Simulator but not on a real device. It has something to do with the timing. The original code sets a timeout on input focus and tries to scroll down after 50ms. Increasing this to for example 500ms makes it work on devices too, but I don't really like adding magic timeouts that I don't understand. I changed it, so onFocus I look up the element to scroll to and store a reference. When onKeyboardDidShow fires I use the reference.
I am trying to use a custom number pad with a textfield to take advantage of blur and focus. But, how to disable the keyboard permanently on ios. Everything I tried does not work.
"Textfield": {
keyboardVisible: false
}
Well, i don't think there is a way to disable keyboard on textfield, but if you can call your custom keyboard on a onClick event, maybe you can use a label instead of textfield and open your keyboard on click.
I know that isn't a optimal solution but maybe it is useful.
Another way to solve this problem is open directly a default pad number with attribute keyboardType : Ti.UI.KEYBOARD_DECIMAL_PAD and use Keyboard Toolbar.
I hope this is helpful.
This is currently not possible in Titanium, but it seems achievable on iOS:
https://stackoverflow.com/a/16467767/4626813
You might want to do a Feature Request Appcelerator JIRA. Check if it has already been requested before you create a new ticket. Refer to this question and also link back to the ticket here so that others can watch it with you.
On Android 4, when press-holding a key with accented characters like "i", a popup menu for the accented characters is displayed. Then sliding the finger into the button of any accented character within the popup menu highlights/selects the button, and finally releasing the finger, inputs the accented character into the target textbox.
I'd like to reproduce this (with a vertical popup menu) in QML with the addition of a scrolling behaviour when finger reaches the top or bottom of the popup menu (typical application: select a temperature among a hundred of values)
I tried to use a ListView for the popup menu, but the default scrolling behavior is not the one I need.
So far I managed to make a lame hack, using a Timer to update the ListView's contentY, but the code as well as the result look wrong. I was wondering if there is a proper way to achieve that.
Thanks
Sorry for posting as an answer but dont have the 50 for commenting.
What do you mean with default scrolling behavior? Maybe the PathView is your answer, if I understood properly.
Further details will be appreciated