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()}
/>
);
Related
I'm currently trying to close the keyboard programmatically:
https://imgur.com/a/3gBlyZp
But it does not work. It actually closes, then reopens when the screen changes, whereas there is no input on the second screen.
I already tried to put Keyboard.dismiss() just before changing the screen and in the componentDidMount() of the second screen, without success.
This happens everytime you have an open Alert while trying to hide the Keyboard. It's quite hacky but you can try to wrap your Alert in a timeout.
setTimeout(() => {
//... open your alert here
}, 50)
I am building an app in react native with the use of react-navigation. On one screen I need to display a simple dialog to make sure user really wants to exit that screen.
I've tried to add BackHandler listener but that does not apply when the user clicks on the back arrow in the header. Is there any way, how I can prevent transition back before user click on the alert button?
implement "headerLeft" of Screen Navigation Options, like
headerLeft=()=>{
return <Button onPress={}>
}
then you can do anything you want in onPress callback
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.
I'm new to react-native.
I'm struggling on keyboard now. I have TextInput and a button. What I want is that, when user entered input through keyboard, he/she can go to next page with just one click on the return button. So what I simply want is that onSubmit method should be called when user clicks "return" button on keyboard.
Is there anyone can help me?
You can use onSubmitEditing callback of TextInput
Example.
<TextInput
onSubmitEditing={(event) => this.onSubmitHandler(event)}
/>
You can get more information from docs
I want to pop up a tool tip when mouse moves over button, to explain what will happen if the user clicks on the button.
This code seems to do the job ( except for a big snag )
wxHelpProvider::Set(new wxSimpleHelpProvider);
...
btnDisplay = new wxButton( this, -1,
"DISPLAY", wxPoint(10,35));
btnDisplay->SetHelpText("Click to display this dimension");
btnDisplay->Bind( wxEVT_ENTER_WINDOW, &cHiddenDimensionPanel::OnDisplayHelp, this );
...
void cHiddenDimensionPanel::OnDisplayHelp(wxMouseEvent& event)
{
wxHelpProvider::Get()->ShowHelp((wxWindowBase*)event.GetEventObject());
}
The snag is that the tooltip obscures the button! If I click on it, the tool tip vanishes for a moment, but immediately pops back up. It is not possible to click the button under the tooltip.
You should be using the SetToolTip(const wxString &tipString) method, and letting wx handle showing/hiding the tooltip - not re-appropriating the HelpText property and manually managing the tooltip display.