I'm currently building an order page that takes in only selected characters for my TextInput element.
My requirement is that when I focus on TextInput, the keyboard doesn't appear but I can still point the cursor around in the TextInput.
Tried using editable={false}, works for keyboard not appearing but disables cursor.
Is there a workaround to this where I can hide my keyboard but still use cursor?
What you are trying to do is not currently posisble in React Native, see this Github thread
Related
There is a way to create a component that run when KeyboardAvoidingView is running. For example, in a screen there are a TextInput (in the bottom like footer) and a Text. When I click in TextInput to edit (KeyboardAvoidingView is enable) I want the Text disappear. I know how can disappear the Text but I should find a way to detect when KeyboardAvoidingView open.
I have a password confirmation form inside WebView and I need it to be usable with hardware keyboard.
When I connect hardware keyboard and hit Tab, once focus enters WebView component it skips first focusable element and goes to the second one. Here's simplified version of the screen.
Video. Has anyone faced this issue and how do you overcome it?
I use react-native-webview library.
As a workaround: inside the page that appears inside the WebView add following
document.body.tabIndex = 0;
This will set body as first focusable element and focus will jump over it (almost invisible).
I am working on a react native android app that needs a search bar. I am using the SearchBar from react-native-paper, and I checked their documentation and couldn't find any sort of way to find if the user pressed the little search button on their keyboard.
Not sure if there is an official name for this input or the button itself as I am unfamiliar with mobile app development, but here is an screenshot from the app in case it is unclear. I am referring to the search button on the keyboard itself, which is in this case blue.
From some digging I found out that TextInputs in react native have an onSubmitEditing={} that triggers whatever return key action you want.
Essentially I was wondering if there was an equivalent prop for the SearchBar in react-native-paper.
If you take a look at the implementation of react-native-paper SearchBar https://github.com/callstack/react-native-paper/blob/master/src/components/Searchbar.tsx it looks like you can pass a onSubmitEditing prop to it and, as react-native-paper uses a TextInput, that input will receive that prop
Ok so it seems that as tintef pointed out, you can just pass onSubmitEditing to the SearchBar since it uses a TextInput. I just tested this and it works perfectly!
Hi is there a way to make an multiline TextInput go fullscreen onFocus and return to its normal size after the user finished editting (for ex: when the user hits the android Back button).
I plan to allow user to type a long paragraph in my App, and I think it would improve the UX if I can make the multiline text go fullscreen when user typing.
I imagine a multiline TextInput like that would be a helpful for many other developers as well, it's shocking that I couldn't find a pre-built component like that.
I think the best way to achieve this is to put a TouchableOpacity with an onPress listener around the TextInput and have it navigate to another screen which has a full-screen text input and receives the onChange listener via params (there will be a warning with react-navigation-5 but in most cases you can safely ignore it).
In a react-native form, when switching from one TextInput to the next one, the second grabs focus for an instant and then suddenly RN dismisses the keyboard.
I have onSubmitEditing coded to move to next input, but the user needs to click on enter in the keyboard, I can also override onEndEditing however that forces you to move to the next input and maybe you didn't touch that one.
I found out that the problem is related to having TextInputs within a ScrollView, focus between inputs in this component doesn't work as expected.
keyboardShouldPersistTaps={true} is deprecated so need to use keyboardShouldPersistTaps="always"