Issue with react native project after react-navigation & expo upgrade - firebase

Question

I have the issue below after upgrading my react-native application.
My package.json is shown below
{
"name": "react-native-expo-app",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null,
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"expo": "^25.0.0",
"firebase": "^4.9.1",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"native-base": "^2.3.2",
"react": "16.2.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
"react-native-chooser": "^1.6.2",
"react-native-datepicker": "^1.6.0",
"react-native-dropdown": "0.0.6",
"react-native-elements": "^0.16.0",
"react-native-ui-kitten": "^3.0.0",
"react-navigation": "^1.0.0",
"react-navigation-redux-helpers": "^1.0.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-persist": "^4.10.2",
"redux-thunk": "^2.2.0"
}
}
The app seems to be processing subsequent pages while loading the first one as the error message is complaining about HomePage, but it should only be rendering WelcomePage. Please see my App.js code below.
const config = {
key: 'primary',
storage: AsyncStorage
};
const HomeNavigator = TabNavigator({
home: {screen: HomePage},
popular: {screen: PopularPage},
search: {screen: SearchPage},
notifications: {screen: NotificationsPage}
}, {
...TabNavigator.Presets.iOSBottomTabs,
});
const RootNavigator = TabNavigator({
welcome: {screen: WelcomePage},
auth: {screen: AuthPage},
signUp: {screen: SignUpPage},
resetPassword: {screen: ResetPasswordPage},
main: {
screen: DrawerNavigator({
home: {
screen: HomeNavigator,
},
profile: {
screen: ProfilePage,
},
following: {
screen: FollowingPage,
},
bookmarks: {
screen: BookmarksPage,
},
contact: {
screen: ContactPage,
},
info: {
screen: InfoPage,
},
conduct: {
screen: ConductPage,
},
login: {
screen: LoginPage,
},
groupProfile: {
screen: GroupProfilePage
}
},
{
contentComponent: SideMenuPage,
drawerWidth: 250
}
)
}
}, {
tabBarPosition: 'bottom',
backBehavior: 'none',
navigationOptions: {
tabBarVisible: false
},
lazy: true
});
const initialState = RootNavigator.router.getStateForAction(RootNavigator.router.getActionForPathAndParams('welcome'));
const navReducer = (state = initialState, action) => {
const nextState = RootNavigator.router.getStateForAction(action, state);
return nextState || state;
};
const appReducer = combineReducers({
nav: navReducer,
auth,
signUp,
resetPasswordReducer,
home,
popular,
rules,
conduct,
profile
}
);
const middleware = createReactNavigationReduxMiddleware(
"welcome",
state => state.nav,
);
const addListener = createReduxBoundAddListener("welcome");
class AppSupport extends React.Component {
render() {
return (
<RootNavigator navigation={addNavigationHelpers({
// dispatch: this.props.dispatch,
state: this.props.nav,
addListener,
})} />
);
}
}
const mapStateToProps = (state) => ({
nav: state.nav
});
const AppWithNavigationState = connect(mapStateToProps)(AppSupport);
const store = createStore(
appReducer,
applyMiddleware(ReduxThunk),
);
export default class App extends React.Component {
state = {isReady: false};
async componentWillMount() {
const config = {
apiKey: “hidden”,
authDomain: "hidden",
databaseURL: "hidden",
projectId: "hidden",
storageBucket: "hidden",
messagingSenderId: "hidden"
};
firebase.initializeApp(config);
this.setState({isReady: true});
}
render() {
if (this.state.isReady) {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
);
} else {
return <Expo.AppLoading/>
}
}
}
See

Answer 1

The error message indicates that there is no current user on line 17 of HomePage.jsx, where you're trying to use currentUser.displayName.
Most likely (you didn't share the relevant code) you have a direct lookup of the current user, something like:
firebase.auth().currentUser.displayName
You'll want to wrap that in an auth state listener:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in, get its display name.
}
});
This way the code only runs when there actually is a current user. Also see getting the current user in the Firebase docs.