Unable to register user in Firebase error immutable violation: `new NativeEventEmitter()` requires non-null argument. , js engine: hermes

Question

I'm trying to build an app created with React Native, and I'm using @react-native-firebase/app": "^17.5.0", "@react-native-firebase/auth": "^ 17.5.0", "@react-native-firebase/firestore": "^17.5.0",

I use npx react-native run-ios to run the application

My ignorance stopped me from continuing with this project and it got stuck after a few days as I tried to register a user in Firebase using the logic shown below, an auth.js file (which contains the identity Validation) and firebase.js file firebase logic. This is impossible for me.

I have changed the configuration of these files multiple times and each change has failed to be added here, but it has been several times.

But I can't get it to register new users.

I edit the question I edited the question

I added the Podfile based on a colleague's suggestion. I also have to say that I've followed the instructions for React Native Firebase, but if I make all the changes suggested in AppDelegate.m and Podfile, the project breaks and won't start again from the terminal or Xcode.

The error involves the following files:

/node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js

The application is still running and the errors have changed, but I now have the following errors logged:

LOG  Running "Cositas enter code here" with {"rootTag":1,"initialProps":{}}
 ERROR  Invariant Violation: `new NativeEventEmitter()` requires a non-null argument., js engine: hermes
 at ?anon_0_ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.ApuntesDelCampo:132800:100)
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.ApuntesDelCampo:20867:26)
    at _next (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.ApuntesDelCampo:20886:29)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.ApuntesDelCampo:20891:14)
    at tryCallTwo (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:61:9)
    at doResolve (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:216:25)
    at Promise (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:82:14)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.ApuntesDelCampo:20883:25)
    at apply (native)

I know there could be multiple reasons, that's why I'm here because after many attempts and many changes based on other similar questions found on Stackoverflow, I can't find a solution. Maybe someone will see the error I'm making in my code or can suggest the correct configuration.

I don't understand if the iOS configuration affects it, whenever I run "pod install" all the dependencies are installed again and it says:

[!] The following Swift pods cannot yet be integrated as static libraries:

    The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.

I showed the files in the hopes that you could give me some ideas to be able to correct this and continue,

============ Podfile =======

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, min_ios_version_supported
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'ApuntesDelCampo' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    # Upcoming versions of React Native may rely on get_default_flags(), but
    # we make it explicit here to aid in the React Native upgrade process.
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'ApuntesDelCampoTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

========. RegisterScreen.js ==================

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, Alert } from 'react-native';
import { registerUser } from '../../services/auth'

import styles from './AuthStyles/RegisterScreenStyles'

const RegisterScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [username, setUsername] = useState('');

  const handleRegister = async () => {
    if (email && password && username) {
      const { success, error } = await registerUser(email, password, username);

      if (success) {
        // Registro exitoso
        Alert.alert('Registro exitoso', '¡Usuario registrado correctamente!');
      } else {
        // Error en el registro
        Alert.alert('Error de registro', error);
      }
    } else {
      // Validación de campos vacíos
      Alert.alert('Campos vacíos', 'Por favor, completa todos los campos.');
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Registro</Text>
      <TextInput
        style={styles.input}
        placeholder="Nombre de usuario"
        value={username}
        onChangeText={ setUsername}
      />
      <TextInput
        style={styles.input}
        placeholder="Correo electrónico"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="Contraseña"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <TouchableOpacity style={styles.button} onPress={handleRegister}>
        <Text style={styles.buttonText}>Registrarse</Text>
      </TouchableOpacity>
    </View>
  )
}

export default RegisterScreen;

============. auth.js. =============

import { firebaseFirestore, firebaseAuth } from "./firebase";


// Registro de usuario
export const registerUser = async (email, password, username) => {
  try {
    const { user } = await firebaseAuth.createUserWithEmailAndPassword(email, password);

    // Almacenar el nombre de usuario en Firestore
    await firebaseFirestore.collection('users').doc(user.uid).set({
      username,
    });

    return { success: true, user };
  } catch (error) {
    return { success: false, error: error.message };
  }
};

========. firebase.js. ========

import firebase from '@react-native-firebase/app'
import '@react-native-firebase/firestore'
import '@react-native-firebase/auth'

// Configura Firebase
const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  projectId: "cxxxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxxxx"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

const firebaseFirestore = firebase.firestore();
const firebaseAuth = firebase.auth();

export { firebaseFirestore, firebaseAuth }

Answer 1

When you run pod install without the static library, it will throw an error and Firebase will not actually be installed.

Disable Flipper because Flipper does not work with static libraries:

# Note that if you have use_frameworks! enabled, Flipper will not work if enabled
# :flipper_configuration => flipper_config, 
Inside the  target "ApuntesDelCampo" Add the following two contents above flags = ...: 
use_frameworks! :linkage => :static

$RNFirebaseAsStaticFramework = true

# Flags change depending on the env values.
flags = get_default_flags()
Also make sure you have added GoogleService-Info.plist to your project. 
Now run pod install again and try to install the application.