How to use the react-navigation.withNavigationFocus function in react-navigation

fontSize: 18,
      fontWeight: '600',
      color: theme.text02,
    },
    placeholder: {
      // textAlign: 'center',
      fontSize: 18,
      fontWeight: '600',
      color: theme.text03,
      paddingVertical: 20,
      // paddingHorizontal: 30
    }
  }
};

export default withNavigationFocus(HidelistReferral);

import PropTypes from 'prop-types'
import { withNavigationFocus } from 'react-navigation'

import { Mode as ModeBase } from './ModeScreen'

export class Mode extends ModeBase {

  componentDidMount() {
    console.log('MODE TV')
  }

  componentWillUnmount() {}

}

export default withNavigationFocus(Mode)

console.log('scanned...');
                props.navigation.navigate('Info', { data });
              }
            : () => {}
        }
        style={StyleSheet.absoluteFill}
      />
    
  );
};

BarCodeScreenBase.navigationOptions = {
  title: 'BarCodeView',
};

const BarCodeScreen = withNavigationFocus(BarCodeScreenBase);

const InfoScreen: NavigationStackScreenComponent = props => {
  return (
    
  );
};

InfoScreen.navigationOptions = {
  title: 'Info',
};

export default createStackNavigator(
  {
    Index: IndexScreen,

}
type Props = {|
  +isFocused: boolean,
|};

function TicketDeleteButtonWithContext(props: Props) {
  return (
    
      {({ bookingId }) => (
        
      )}
    
  );
}

export default withNavigationFocus(TicketDeleteButtonWithContext);

const styles = StyleSheet.create({
  icon: {
    alignSelf: 'flex-start',
  },
});

There are no meetups for this date yet.
            
          ))}
      
    
  );
}

Dashboard.navigationOptions = {
  tabBarLabel: 'Meetups',
  tabBarIcon: ({ tintColor }) => (
    
  ),
};

export default withNavigationFocus(Dashboard);

);
	}
}

const mapDispatchToProps = dispatch => ({
	setLockTime: time => dispatch(setLockTime(time)),
	setOnboardingWizardStep: step => dispatch(setOnboardingWizardStep(step)),
	passwordUnset: () => dispatch(passwordUnset()),
	seedphraseNotBackedUp: () => dispatch(seedphraseNotBackedUp())
});

export default connect(
	null,
	mapDispatchToProps
)(withNavigationFocus(CreateWallet));

}
}

const mapStateToProps = state => ({
  messages: state.messages,
  conversations: state.conversations
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(reduxActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withNavigationFocus(Conversation))

backgroundColor: theme.base01,
      paddingTop: 10,
      marginTop: 'auto',
    },
    title: {
      fontWeight: 'bold',
      fontSize: 28,
      color: theme.text01,
      textAlign: 'center',
      paddingHorizontal: 20,
      marginBottom: 20
    }
  }
};

export default withNavigationFocus(HidelistScreen);

container: {
      flex: 1,
      paddingTop: 40,
      backgroundColor: theme.base01,
    },
    title: {
      justifyContent: 'flex-end',
      color: theme.text01,
      fontSize: 38,
      paddingHorizontal: 28,
      paddingTop: isSmallScreen() ? 10 : 20
    }
  }
};

export default withNavigationFocus(SettingsScreen);

}}
            style={{flex: 1, flexDirection: 'column', backgroundColor: 'black'}}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={
              'We need your permission to use your camera phone'
            }
          />
        )}
      
    );
  }
}

export default withNavigationFocus(Camera);