TypeError: Cannot read property 'setGenericPasswordForOptions' of null

Question

import React, { createContext, useContext, useReducer } from "react";
import * as Keychain from "react-native-keychain";

// Initial state
const initialState = {
  user: null,
  access: null,
  refresh: null,
};

// Reducer function
const appReducer = (state, action) => {
  switch (action.type) {
    case "SET_USER":
      return { ...state, user: action.payload };
    case "SET_ACCESS":
      console.log(action.payload);
      Keychain.setGenericPassword("ACCESS", action.payload);
      return { ...state, access: action.payload };
    case "SET_REFRESH":
      Keychain.setGenericPassword("REFRESH", action.payload);
      return { ...state, refresh: action.payload };
    default:
      return state;
  }
};

// Create the context
const AppContext = createContext();

export const useAppContext = () => {
  return useContext(AppContext);
};

export const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(appReducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

When trying to login or register I am unable to set my tokens to Keychain. I keep getting an error of cannnot set property to null but the value going in is a string token. I verified this by console.logging it before setting it to keychain. I have also installed all the packages correctly and I am running the dev environment through expo on my iphone.

EDIT

---

const appReducer = (state, action) => {
  switch (action.type) {
    case "SET_USER":
      return { ...state, user: action.payload };
    case "SET_ACCESS":
      if (action.payload) {
        Keychain.setGenericPassword("ACCESS", action.payload);
        return { ...state, access: action.payload };
      }
    case "SET_REFRESH":
      if (action.payload) {
        Keychain.setGenericPassword("REFRESH", action.payload);
        return { ...state, refresh: action.payload };
      }

    default:
      return state;
  }
};

still no luck after validating if action.payload exists

Answer 1

I encountered the same issue and managed to resolve it in my project. The problem was related to the iOS project configuration. Here’s what worked for me:

1. Navigate to your iOS directory and run the pod install. This will install the RNKeychain library for your project.
2. Open your iOS project’s Info.plist file and add a value for Privacy - Face ID Usage Description. This is required to provide a description for Face ID usage.

After making these changes, my project worked fine.

Note: My React Native version is 0.76.1, and the react-native-keychain version is ^9.2.1.