React Native - createContext + useContext returning undefined

Question

I have a file named AuthProvider.js which holds the processing functions within a context as follows:

import React, { createContext, useState } from 'react';
import auth from '@react-native-firebase/auth';

export const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  
  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        login: async (email, password) => {
          
          try {
            await auth().signInWithEmailAndPassword(email, password);
            
            await clearData()

            return {status:'success'}
          } catch (e) {
            var mess = (e.toString().indexOf('[auth/invalid-email]') > -1 || e.toString().indexOf('[auth/wrong-password') > -1) ? "Incorrect email address or password. Enter your valid registered information, or request a password reset." 
            : e.toString().indexOf('[auth/user-disabled]') > -1 ? "Sorry, your access has been restricted."
            : e.toString().indexOf('[auth/user-not-found]') > -1 ? "Opps! There seem to be error with this account. Ensure this email has been registered." 
            : e.toString().indexOf('[auth/network-request-failed]') > -1 ? "Unable to connect. Make sure you have active internet network." 
            : e.toString()
            
            return {status:'error', message:mess}
          }
        },
        register: async (email, password) => {
          ///Code here
        },
        resetMail: async (email) => {
          ///Code here
        },
        passwordUpdate: async (email, code, password) => {
          ///Code here
        },
        profilesubmit: async (firstname, lastname) => {
          ///Code here
        },
        phonecode: async (country, phone) => {
          ///Code here
        },
        phonesubmit: async (country, phone, code) => {
          ///Code here
        },
        faceCapture: async (file) => {
          ///Code here
        },
        logout: async () => {
          ///Code here
        },
        /*...Other functions...*/

Example usage in Login.js

import React, { useState, useContext } from 'react';
import { AuthContext } from '../../navigation/AuthProvider';

export default function LoginScreen({ navigation }) {
    const { login } = useContext(AuthContext);

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const proceed = async () => {

      /***Email and Password validation are handled here***/

      const res = await login(email, password) //Error is triggered at exactly here
              
      if(res.status == 'success') navigation.navigate('')

      else /***Error callback function***/

      return
    }

/***Other part of the project goes here***/

Once process() is triggared in Login.js as in every other files with functions linked to the AuthProvider.js it is expected to process triggered function in useContext. Instead I receive the error:

Possible Unhandled Promise Rejection (id: 1):
TypeError: undefined is not a function
TypeError: undefined is not a function

I have used this context in previous projects, and everything work as expected; until in the current project, and I can't seem to lay my hand on what I did wrong. Perhaps there's a change in the usage of createContext() / useContext()

Support is appreciated.

React Native - createContext + useContext returning undefined

0 Answers0