0

I want to insert a header button for user to be able to sign out easily but I am having trouble with it. I am referring to https://reactnavigation.org/docs/header-buttons

Within my app.js

import { StatusBar } from 'expo-status-bar';
import React from 'react'
import { signOut } from 'firebase/auth';
import { auth } from '../firebase';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import RegisterScreen from './screens/RegisterScreen';
import ForgetPasswordScreen from './screens/ForgetPasswordScreen';
import SubScreen1 from './screens/SubScreen1';

const Stack = createNativeStackNavigator();

const handleSignOut = async () =>{
  try{
    await signOut(auth)
    console.log("Signed out successfully")
    navigation.replace("Login")
  }catch (error) {
    console.log({error});
}
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen options= {{ headerShown : false }} name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} options={{headerRight: () => (
            <Button
              onPress={handleSignOut}
              title="Sign Out"
              color="#0782F9" /> ),}} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="Forget Password" component={ForgetPasswordScreen} />
        <Stack.Screen name="SubScreen1" component={SubScreen1} options={{ title: 'Search Result' }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The button seems to appear but I cannot use it at all. It seems this line import { auth } from '../firebase'; is giving me issue. But I don't get it why. I used the same exact line in my home screen, login screen and register screen and it all worked.

import { auth } from '../firebase'; gives me the error of Unable to resolve "../firebase" from "App.js"

I searched online and tried import { auth } from 'firebase/app' gives me the error of {"error": [TypeError: undefined is not an object (evaluating 'util.getModularInstance(auth).signOut')]}

My directory to firebase: Projects/FYPAPP/node_modules/firebase

enter image description here

Under the firebase.js

enter image description here

L.Calvin
  • 251
  • 1
  • 10
  • Can you share a screenshot of your directory structure and code of file where you are initializing Firebase? – Dharmaraj Jan 30 '23 at 15:09
  • I have just uploaded the screenshot of both the directory and code @Dharmaraj – L.Calvin Jan 30 '23 at 15:18
  • No, directory structure that includes App.js and the file where firebase is initialized. Is that relative path correct? firebsae.js looks fine to me – Dharmaraj Jan 30 '23 at 15:23
  • The 2 files, App.js and firebase.js are at the same location. My first image has both of them though – L.Calvin Jan 30 '23 at 15:33
  • 1
    Right, then it should be `import { auth } from './firebase'`. Only one `.` before `/firebase`. – Dharmaraj Jan 30 '23 at 15:36
  • Oh my bad. Thank you ! But there is another issue now after this. I have just updated the post with the updated codes and the error. And also my idea on why I am putting this button. – L.Calvin Jan 30 '23 at 15:53
  • That's a different question and you should post a new one with relevant details of new issue only. – Dharmaraj Jan 30 '23 at 15:54
  • My bad. Sorry about that. I have transfer it to a new post. Can you help me to take a look and point out what is wrong? Thank you very much! The post is here: https://stackoverflow.com/questions/75286966/issue-with-usenavigation-in-react-native-expo-in-app-js-followed-up-from-the-pr – L.Calvin Jan 30 '23 at 16:01

0 Answers0