I am using React native router-flux for navigation.
From my sidebar, there is a link to navigate to add address Screen.
After the API submission of address details, app redirects to the home screen.
For adding another address, again moved to add address Screen, then without adding an address, just press back button.
On Pressing Back button App redirect to Home screen but my app completely stuck, and I cannot perform any actions.
Here is my code for BackHandler. Please Help
componentDidMount(){
BackHandler.addEventListener('hardwareBackPress', () => this.backAndroid())
}
componentWillUnmount(){
BackHandler.removeEventListener('hardwareBackPress', () => this.backAndroid())
}
backAndroid() {
Actions.drawer1();
return true
}
Related
I have a react-native app
and I define one splash screen. when user is Authenticated, it navigate to home and when user is not Authenticated, it navigate to login
its work correctly, but:
I want to when the app is in develop mode and when reloaded, it navigate to last route
can you help me to fix this ux problem?
You can access to the state of navigation, source here https://reactnavigation.org/docs/use-navigation-state/
import { useNavigationState } from '#react-navigation/native';
const usePreviousRouteName =() => {
return useNavigationState(state =>
state.routes[state.index - 1]?.name
? state.routes[state.index - 1].name
: 'None'
);
}
I setup notification system with firebase and react native. It's working fine, but when i receive notification in any state of app(killed, fore or background) and do click notification push me to home screen. I want to go on notification screen when someone click on notification.
How it will possible?
First, you have to add a Firebase Notification listener at the top-level component. I'll suggest placing it in App.js.
Foreground Listener
Background Listener
After that, You have to navigate to a particular screen with the help of a navigation prop. if you place the listener at App.js then you will not have access to the navigation prop since App.js will return the navigation container.
For that, you have to create one helper function like this navigation without prop
e.g.
export const App = () => {
messaging().setBackgroundMessageHandler(async remoteMessage => {
navigate('Notification'); //navigate to notification screen
});
const unsubscribe = messaging().onMessage(async remoteMessage => {
//generate local notification using your preferred library
//handle navigation
})
return <RootNavigator />;
};
I built a react-native app and if user clicks a link then app opens a default web browser and go to the link.
Linking.openURL(notification.link);
If user push back button from the android or ios devices, is there any way we can detect the back move?
You can add a listener for the same in react native.
There are total 4 listners for the same.
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)
Try the below code
componentWillMount(){
const didFocusSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
console.warn('didFocus ', payload);
# just write your code/call a method here which you want to execute when the app comes from background
}
);
}
Dont forget to remove it when it is done.
componentWillUnmount(){
didFocusSubscription.remove();
}
More you can read here. Thanks :)
I am handling the Android back button in React-Native using BackHandler in home page its working fine, when i navigate to home page from login page. But when i go to page 2 from home page and came back to home page by clicking the device back button, now when i click device back button in home page its taking me to login page, this should not happen.
Navigation used in home page is a drawer navigation.
I am removing the backpress event handler when i am navigating to page2, because it is disabling the back button in page 2 also.
You just have to implement the Backhandler in your home page, and don't perform any action on it.
BackHandler.addEventListener('hardwareBackPress', () => {
return false
});
Just return false. So It won't navigation to Login screen again.
I already checked similar existing issues on stack-overflow or gihub, like:
NavigationCard will only re-render when the route changes, Help: renderScene is executed just once and does not refresh updated props, etc. But my case is different.
Page list:
sign in page
home page: user can only see this page after sign in;
Transition logic:
In "sign in page", after sign in, it shall go to "home page"
In "home page", there is a sign out button, after user click, it shall go back to "sign in" page.
My implementation
I created a top level component called App, and the code looks like the below:
// app.js
class App extends Component {
componentWillMount() {
const {doNavigateReplaceAtIndex} = this.props;
let {isSignedIn} = this.props;
doNavigateReplaceAtIndex(isSignedIn? 'home': 'sign-in');
}
render() {
const {globalNavigationState} = this.props;
return (
<NavigationCardStack
navigationState={globalNavigationState}
style={styles.container}
onNavigate={()=>{}}
renderScene={this._renderScene}
/>
);
}
_renderScene({scene}) {
const { route } = scene;
switch(route.key) {
case 'home':
return <Home />
case 'sign-in':
return <SignIn />
}
}
}
export default connect (
state =>({
isSignedIn: !! state.auth.token,
token: state.auth.token,
globalNavigationState: state.globalNavigation
}),
dispatch => ({
doNavigateReplaceAtIndex: (key) => dispatch(navigateReplaceAtIndex(0, key))
})
)(App);
// sign in page
// after signin, it will doNavigateReplaceAtIndex(0, 'home');
// home page
// after clicking "sign out", it will doNavigateReplaceAtIndex(0, 'sign-in');
// doNavigateReplaceAtIndex basically is just call NavigationStateUtils.replaceAtIndex
Symptoms
At beginning, it shows sign in page, after signing in, it goes to home page, it is good. In home page, when click the sign out button, it didn't move anywhere, but when refresh, it shows sign in page.
What I got so far
It is not because of this issue: NavigationCard will only re-render
when the route
changes,
because I debugged into rn source code, the shouldComponentUpdate didn't block;
I am not sure if I didn't right for doNavigateReplaceAtIndex, usually we use push or pop, but my case I cannot use push/pop, because after sign in, we should not allow use to go back sign in page by clicking "BACK" button on Android.
I think the issue may because of NavigationScenesReducer(which is called by NavigationAnimatedView used in NavigationCardStack), it will mark all previous routes as stale, and will not show it them.
Any help will be welcome, thanks.
My environment
react native: 0.29.1
react native cli: 1.0.0
node: 5.6.0
OS: ios 9.3