As a developing assistant, I need to to track screens in order to use 'react-native-firebase' package. Firstly, I used analytics().setCurrentScreen('ViewName') with using useEffect hook. However, I think it is ineffective because there may be a lot of ways to access the screen. Moreover, when I use goBack function of react-navigation, useEffect hook can't track because the 'formerly opened' screen is not closed.
In order to track screens precisely, I want to find the function to track screen variables. Here is a part of the code that my team is developing
import {createStackNavigator, createAppContainer, } from 'react-navigation';
...
const MainNavigator = createStackNavigator({
Main: {screen: Main,},
...
)};
How can I track screens using react-navigation?
It seems to be well documented here:
https://reactnavigation.org/docs/screen-tracking/
Related
I am using version 4 react navigation and particularly createBottomTabNavigator with createStackNavigator for each tab. For all implemented tabs, if I scroll away from my landing screen called home screen and return back to it, useEffect is not invoked. I do this with the use of navigation.navigate() to navigate to the home screen. I tried adding 'resetOnBlur' option and set it to true for the createBottomNavigator but it still does not blur and re focus such that useEffect can be invoked as per documentation when using navigation.navigate to reach a bottom navigator tab:
https://reactnavigation.org/docs/4.x/bottom-tab-navigator/
I want to do something on home screen load every time the user returns back to it by not tapping the bottom bar but when redirected through code with the use of navigator.navigate. How can I achieve this in. navigation version 4 ?
You can use useFocusEffect of react-navigation, like below,
import {useFocusEffect} from '#react-navigation/native';
useFocusEffect(
useCallback(() => {
// Do your work
}, []),
);
I have two react native components, One is profile(showing logged user details) and another one for login.
In login component I set the user details to AsyncStorage.
import {AsyncStorage} from 'react-native';
Adding user to AsyncStorage:
const user = {
fname:"Tenusha",
lname:"Guruge"
}
AsyncStorage.setItem("user",JSON.stringify(user))
In the profile component I read the AsyncStorage
componentDidMount() {
AsyncStorage.getItem("user").then(user => {
console.log(user)
this.setState({user})
})
}
When logout I clear the AsyncStorage:
AsyncStorage.removeItem("user")
Problem is Once I log in and set the user details to AsyncStorage, it store the data and I can view them in profile component. Once user logout, the data in storage are cleared, but when I navigate to profile component the previously loaded data is still there.
I need a way to read the current AsyncStorage data when every time user navigate to profile component.
To be sure a component is unmounted you can use createSwitchNavigator.
You can use a loginScreen as child while the other child is your Drawer.
When doing a logout you clear your asyncStorage and then navigate to the loginScreen and the SwitchNavigator will unmount your Drawer.
DrawerNavigation will keep the screens active while moving between his childs after every screens's first focus, making every componentDidMount getting triggered only at first render.
Track navigation changes and clear state here
Consider state-manager like redux it will be cleanest approach
Your issue is that your state is not getting cleared when using DrawerNavigator instead you can use stackNavigator if you want your component to unmount when navigating out and clearing the state automatically.
Another approach can be of using state management library such as redux or flux and clear out state whenever user is logging out.
I am new in react-native I have two screens in my stack. Login and Home.
I want to go back to login from a button on home.
I am writing this code
this.props.navigation.navigate('loginScreen')
but in login screen componentWillMount method is not calling. I want to reset my form when user come on login screen from home.
Can anyone help me here?
Thanks in advance.
The this.props.navigation.navigate('loginScreen') don't work because you are now in loginScreen.
If you want to restart page this code isn't good. because have a loop!
correct code:
just when navigate to loginScreen from home use:
this.props.navigation.push('loginScreen')
NOT IN "componentWillMount"
To go back from login from home , you should use this.props.navigation.goBack() if the screen is immidiately before home.
Secondly, you should not use componentWillMount since it is deprecated and will be removed from React 17 onwards. Instead use componentDidMount
Since the component is already mounted therefore it won't call the react lifecycle events componentDidMount again. Therefore you should use the react-navigation listeners didFocus event.
didFocus: the screen focused (if there was a transition, the transition completed)
componentDidMount () {
this._onFocusListener = this.props.navigation.addListener('didFocus', (payload) => {
// Perform the reset action here
});
}
Since your Home and Login Screens are both under the same StackNavigator, when you go from Home back to Login the state stays the same as the component doesn't unmount. The recommended way to solve this is using the SwitchNavigator of react-navigation. Read this very helpful part of the documentation below
https://reactnavigation.org/docs/en/auth-flow.html
You may not be familiar with SwitchNavigator yet. The purpose of
SwitchNavigator is to only ever show one screen at a time. By default,
it does not handle back actions and it resets routes to their default
state when you switch away.
The perfect solution is with this.props.navigation.push('Login'), I tried with SwitchNavigator but it doesn't provide navigationOptions for header.
Im using createSwitchNavigator to seperate my auth flow from the rest of the app. While navigating from one context to another, is there anyway to trigger an animation? The default behaviour is to replace the screen in place which is a little bit.. unceremonious.
An example would be navigating to App from a Login screen via this.props.navigation.navigate("Login")
const SwitchNavigator = createSwitchNavigator(
{
Login: AuthStackNavigator,
App: AppStackNavigator,
}
);
If not i'd be happy to listen to how you handle this scenario. Thanks a lot.
I have problem about navigation from other script (screen)... I implemented navigation in App.js (with createStackNavigator and with screens). Everything works fine when I want to navigate (with OnPress{() => navigate("someScreen")} to screen which is defined in this script (App.js).
But, when I want to use that navigation from other script (outside of App.js), let's say in "NewPage.js"
which has own "export default class NewPage..." and inside I have button element which task is to navigate "onPress" to screen which is defined in the App.js stackNavigator...
I know that I can't use anymore navigate("pageName") because navigation isn't implemented in this script and I tried with import { NavigationActions } from 'react-native' and inside of button element I tried with code: "this.props.navigation.navigate('somePage')" and it's not working.
So I don't know how to use navigation property from other script in which isn't implemented navigation, how to reference/export/import that property?
Here is code App.js script: https://pastebin.com/tLEFdQrE and NewPage.js script: https://pastebin.com/aVQGiinJ
This code is short so you can easily see what I want and what is the problem...
Thank you in advance!
Use this for better navigation among screen as compared to default navigation this is the better one for navigating among the screens. We mostly use this than other navigator
https://github.com/aksonov/react-native-router-flux
You should import your pages [using the names of the exported components, not the names of the js files] into your App.js.
For example, I stored my pages in a folder called 'screens' so when I imported my 'Home' screen, I used
import HomeScreen from './screens/HomeScreen.js';
which was further referenced as
Home: HomeScreen,
Good luck!