OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Issue Screen with Navigator bottom tabs into my app React Native

  • Thread starter Thread starter Selim MB
  • Start date Start date
S

Selim MB

Guest
I try to make different screens after the client connects to the App. Connecting to Firebase works without a hitch. I can see the new user in my database. However, every time I try to put a navigator and a Tab.Screens in the AuthenticatedScreen const, I get nothing.

However, when I put a simple View, it works.

the code :

Code:
import React, { useEffect, useState } from 'react';
import { ScrollView, StyleSheet, View, Text } from 'react-native';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signOut, signInWithEmailAndPassword, createUserWithEmailAndPassword, initializeAuth, getReactNativePersistence } from 'firebase/auth';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { UserProvider, useUser } from './UserContext';
import AuthScreen from './AuthScreen';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Homescreen from './screens/Homescreen';

const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx"
};

const app = initializeApp(firebaseConfig);

// Utilisation de initializeAuth avec AsyncStorage
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage)
});

const Tab = createBottomTabNavigator();

const AuthenticatedScreen = () => {
  const { user } = useUser();
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Homescreen} />
    </Tab.Navigator>
  );
};

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLogin, setIsLogin] = useState(true);
  const { user, setUser } = useUser();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
    });

    return () => unsubscribe();
  }, [auth]);

  const handleAuthentication = async () => {
    try {
      if (user) {
        await signOut(auth);
      } else {
        if (isLogin) {
          await signInWithEmailAndPassword(auth, email, password);
        } else {
          await createUserWithEmailAndPassword(auth, email, password);
        }
      }
    } catch (error) {
      console.error('Authentication error:', error.message);
    }
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      {user ? (
        <AuthenticatedScreen />
      ) : (
        <AuthScreen
          email={email}
          setEmail={setEmail}
          password={password}
          setPassword={setPassword}
          isLogin={isLogin}
          setIsLogin={setIsLogin}
          handleAuthentication={handleAuthentication}
        />
      )}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#f0f0f0',
  },
});

export default () => (
  <UserProvider>
    <App />
  </UserProvider>
);

<p>I try to make different screens after the client connects to the App. Connecting to Firebase works without a hitch. I can see the new user in my database. However, every time I try to put a navigator and a Tab.Screens in the AuthenticatedScreen const, I get nothing.</p>
<p>However, when I put a simple View, it works.</p>
<p>the code :</p>
<pre><code>import React, { useEffect, useState } from 'react';
import { ScrollView, StyleSheet, View, Text } from 'react-native';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signOut, signInWithEmailAndPassword, createUserWithEmailAndPassword, initializeAuth, getReactNativePersistence } from 'firebase/auth';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { UserProvider, useUser } from './UserContext';
import AuthScreen from './AuthScreen';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Homescreen from './screens/Homescreen';

const firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx"
};

const app = initializeApp(firebaseConfig);

// Utilisation de initializeAuth avec AsyncStorage
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});

const Tab = createBottomTabNavigator();

const AuthenticatedScreen = () => {
const { user } = useUser();
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Homescreen} />
</Tab.Navigator>
);
};

const App = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLogin, setIsLogin] = useState(true);
const { user, setUser } = useUser();

useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setUser(user);
});

return () => unsubscribe();
}, [auth]);

const handleAuthentication = async () => {
try {
if (user) {
await signOut(auth);
} else {
if (isLogin) {
await signInWithEmailAndPassword(auth, email, password);
} else {
await createUserWithEmailAndPassword(auth, email, password);
}
}
} catch (error) {
console.error('Authentication error:', error.message);
}
};

return (
<ScrollView contentContainerStyle={styles.container}>
{user ? (
<AuthenticatedScreen />
) : (
<AuthScreen
email={email}
setEmail={setEmail}
password={password}
setPassword={setPassword}
isLogin={isLogin}
setIsLogin={setIsLogin}
handleAuthentication={handleAuthentication}
/>
)}
</ScrollView>
);
};

const styles = StyleSheet.create({
container: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
backgroundColor: '#f0f0f0',
},
});

export default () => (
<UserProvider>
<App />
</UserProvider>
);
</code></pre>
 
Top