When i press an input in react-native , the keyboard pops an opens.
I would like to close the keyboard (ONLY) when pressing some button.
How can i do this?
You can dismiss the keyboard by using Keyboard.dismiss.
import { Keyboard } from 'react-native';
<Touchable onPress={Keyboard.dismiss}>...</Touchable>
If you're using a ScrollView you'll need to set keyboardShouldPersistTaps prop to true.
Related
Problem:
Using "TextInput" in react native shows keyboard, and on pressing return, cursor moves to new line, however at this i do not have "done" button to hide the keyboard.
Again, there is props called "returnKeyType={done}, which adds "done" button but now "return" button is gone. I believe user could tap to new line inside "TextInput" box, but it seems to highlight the words typed.
Solution attempt:
Like in numeric keyboard, i thought there should be some props to add "done" button on top of keyboard so that we will have both "return" and "done" botton visible at the same time, but i could not find it.
... another option is i could create my own component with done button, and wrap keyboard as child, but i could not figure out how i do it.
This is basic component, i believe there must be some elegant way to do it. any help is appreciated.
You cannot have done and newline button at the same time.
There should only be one submitting button in keyboard.
But you can make a similar work around.
Custom Button
First option is making custom button like you mentioned.
Make a "Done" button next to your textfield or above the keyboard.
onSubmitEdit
Second option is using onSubmitEdit
Make a custom function that controls what return button should do.
e.g.)
const [textInputValue, setTextInputValue] = useState("");
const returnPressed = () => {
if(need_new_line){
setTextInputValue(textInputValue+"\n");
} else {
returnFunction();
}
};
return (
<TextInput
value={textInputValue}
onChangeText={(text)=> setTextInputValue(text)}
onSubmitEditing={()=> returnPressed()}
/>
);
I'm using Button component from NativeBase, is there any way to giving feedback that showing user has pressed the button like TouchableOpactiy does?
If I have data in a ScrollView, FlatList, or SectionList, and that data includes a button that the user can press on, tapping on the button once hides the Keyboard as expected:
onScroll={() => Keyboard.dismiss()}
but it does not trigger the button callback. It only works if you tap the same button a second time after the keyboard is hidden. Is there any way to fix this?
I figured out the answer from the docs, setting keyboardShouldPersistTaps="always"
I would like to know if there is a way to show keyboard always if it focuses out from the TextInput in react native.
You can wrap your TextInput by a ScrollView and then use the keyboardShouldPersistTaps='handled' prop in ScrollView to avoid dismissing the keyboard and handle the keyboard dismiss by using Keyboard.dismiss() function in somewhere else.
Read this for more documentation.
I want to close the keyboard when the user clicks a particular tab.
What's happening now is that when the keyboard is open and the user wants to switch to another tab, he must close/minimize the keyboard first.
The prop on a ScrollView keyboardShouldPersistTaps does what I want, but only for a ScrollView, not for a TabNavigator component.
You can use a function to hide the keyboard and call it from onClick of that tab.
This is the function you should declare in the same class in which onClick of that tab exists.
#SuppressWarnings("ConstantConditions")
public void hideKeyBoard(View view){
InputMethodManager imm = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),0);
}
And then from the onClick, just call this by using hideKeyBoard();.
This will hide the keyboard whenever that tab is tapped.
And You should provide some of your code if seeking help.