Ufdjrw

I have a react native app in which i am using react navigation v3. I want to create an event on pressing a particular tab bar. On my home tab bar i have a barcode scanner. When the user scans, the app directs to different tab with the barcode data setting the data to async storage.But when i try to scan again it goes blank.

So, i want to create an event on which i can clear the async storage when the user goes to home tab to scan again. How can i add that event on home tab bar?

Try below code it will help you,

import NavigationEvents from "react-navigation";


<NavigationEvents
 onWillFocus=payload => console.log('will focus',payload)
 onDidFocus=payload => console.log('did focus',payload)
 onWillBlur=payload => console.log('will blur',payload)
 onDidBlur=payload => console.log('did blur',payload)
 />

NavigationEvents component you can added in your render method of page where you want to track event of users, and handle like AsyncStorage and whatever action you want.

Only add one event if you don't need all

For more detail you may visit here

Thank you

You could listeners to the navigation lifecycle events.

It is fairly straight forward to set up. Here is an example of how to set it up in your screen.

import React, Component from 'react';
import View, StyleSheet, Text from 'react-native';

export default class Screen2 extends React.Component 

 // 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)
 componentDidMount () 
 // add listener 
 this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocusAction);
 this.didFocusSubscription = this.props.navigation.addListener('didFocus', this.didFocusAction);
 this.willBlurSubscription = this.props.navigation.addListener('willBlur', this.willBlurAction);
 this.didBlurSubscription = this.props.navigation.addListener('didBlur', this.didBlurAction);
 

 componentWillUmount () 
 // remove listener
 this.willFocusSubscription.remove()
 this.didFocusSubscription.remove();
 this.willBlurSubscription.remove();
 this.didBlurSubscription.remove();
 

 willBlurAction = () => 
 console.log('willBlur Screen', new Date().getTime())
 

 didBlurAction = () => 
 console.log('didBlur Screen', new Date().getTime());
 

 didFocusAction = () => 
 console.log('didFocus Screen', new Date().getTime());
 

 willFocusAction = () => 
 console.log('willFocus Screen', new Date().getTime());
 


 render() 
 return (
 <View style=styles.container>
 <Text>Screen</Text>
 </View>
 )
 

You don't need to add all the listeners, only the ones that you require.
Most likely you will want to clear your value from AsyncStorage inside the willFocus event. That way it occurs before the screen has come into focus.