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
Related
In my app there are five tabs, each has there owned back buttons. I want to navigate back to the previous tab on the click of back button, without knowing that from which tab it has navigated.
Here is my code:
goBackPreviousTab = () => {
this.props.navigation.goBack()
}
Right now it doesn't work for tabs but it works fine for normal navigations. What can I try?
I'm using Button component from NativeBase, is there any way to giving feedback that showing user has pressed the button like TouchableOpactiy does?
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)
My react component hierarchy looks like
StackNavigation
- MainScreen
- List
- Row
- Button
My usecase involves go to a new screen on click of the button. My main screen receives react-navigation's navigation props. How do I pass it down to my button in a sane manner.
You'd better pass a callback to your button through all the hierarchy and call it when button is pressed. Afterwards when you know which button is pressed (on which row) you can navigate to necessary screen from your MainScreen.
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