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!
Related
I have a Text component which I would like to make selectable. I provided the Text component the selectable prop, however it isn't working. I am pretty sure that it is because I have it nested in a ScrollView and my pressing it is only registering on the scrollview. Any way to get past this?
Can provide a code example if needed.
I am using modal for React Native UI kitten.
But the problem is I did't find anything like onRequestClose prop like the React Native provides for the modal. Nothing mentioned on their API also.
So is there anything like I can close the modal on back button press?
I suggest react-native-modal which is easy to use and customize https://github.com/react-native-modal/react-native-modal
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
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).
I am creating an app in react-native and I'm having problem with the display.
I have a textinput in scrollview. When I tap on the textinput and it's focused, the display will go up and goes off screen.
I have seen the same issue posted in github.
Here is the link: Github issue posted by someone
This is the default behavior of they keyboard for Android. You have to manually change the android:windowSoftInputMode in AndroidManifest.xm to another option (adjustNothing is more iOS like). See the options here: https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft.
Also, keep in mind that keyboardWillShow() and keyboardWillHide() are not fired on Android, and if you opt to use adjustNothing, not even keyboardDidShow() or keyboardDidHide() are fired.
I would recommend keeping the default behavior of android:windowSoftInputMode, but use the keyboardDidShow() and keyboardDidHide() to manually adjust the ScrollView position.