Passing function into context in react-native using typescript

Question

const AuthContext = React.createContext({ currentUser: null, signUp: null});

export function useAuth() {
    return useContext(AuthContext);
}

export function AuthProvider({ children }) {
  const [ currentUser, setCurrentUser ] = useState();

  function signUp(email?: string, password?: string){
    if (email && password && email.length > 3 && password.length > 5){
      return auth.createUserWithEmailAndPassword(email, password);
    } 
    return auth.signInWithPopup(googleAuthProvider);
  }

  useEffect(() => {
      const unsubscriber = auth.onAuthStateChanged( user => {
          setCurrentUser(user);
          })

      return unsubscriber;
      }, [])

  const value = {
    currentUser,
    signUp,
  }

    return (
        
          {children}
        
      ) 
}

This is how i imported, deconstructed and used

import {useAuth} from "./{some-path}/AuthContext";

function SignUp() {
 const { signUp } = useAuth();

 function insideSomeFunction(){
   signUp!();
 }

 return (
 {simple react-nataive componenst to call insidesomefunction}
 )
}

Problem is whenever I try to use signUp by importing useAuth and deconstructing it to get signUp function, it always give null, even tho I have provided the implementation in the AuthProvider function.

I am new to react-native and using context in react

user_2138752 · Answer

undefined value is error prone. So, initialize user with null:

const [ currentUser, setCurrentUser ] = useState(null);

user_1679754 · Answer

Make sure that you are wrapping the All Childs in the AuthProvider component so we can access the context in our children.

Like:

And using the useAuth context in the Child Component.

user_10262805 · Answer

AuthContext implementation is correct. Make sure you wrapped the entire app with AuthProvider.

export default function App(): ReactElement {
    return (
        
                   // I belive your app has  a navigator         
                                 
        
    );
}

Passing function into context in react-native using typescript

3 Answers