Native Module cannot be null (ios) – Expo

I am developing a Expo-managed (not bare) mobile application. I recently ran into this issue: it crashes on start on ios. and I understand that this has to do with some of my packages requiring ios native modules, therefor I have to eject before I can use this package.

However, my goal here is not to eject but to find the package causing this issue, however, unable find it so far.

What suprises me is that android runs without issues, even though it looks like it requires native modules.

Please note everything runs fine on android

Error

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@microsoft/signalr": "^3.1.9",
    "@react-native-community/async-storage": "~1.12.0",
    "@react-native-community/datetimepicker": "3.0.4",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.9.2",
    "@react-navigation/native": "^5.7.6",
    "@react-navigation/stack": "^5.9.3",
    "expo": "^40.0.0",
    "expo-asset": "~8.2.1",
    "expo-av": "~8.7.0",
    "expo-camera": "~9.1.0",
    "expo-constants": "~9.3.3",
    "expo-document-picker": "~8.4.1",
    "expo-file-system": "~9.3.0",
    "expo-font": "~8.4.0",
    "expo-image-manipulator": "~8.4.0",
    "expo-image-picker": "~9.2.0",
    "expo-linking": "~2.0.0",
    "expo-media-library": "~10.0.0",
    "expo-notifications": "~0.8.2",
    "expo-splash-screen": "~0.8.1",
    "expo-status-bar": "~1.0.3",
    "expo-web-browser": "~8.6.0",
    "i": "^0.3.6",
    "install": "^0.13.0",
    "jwt-decode": "^3.0.0",
    "moment": "^2.29.1",
    "npm": "^6.14.9",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-audio-record": "^0.2.2",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-image-view": "^2.1.9",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-modal-datetime-picker": "^9.0.0",
    "react-native-paper": "^4.2.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-spinkit": "^1.5.1",
    "react-native-status-bar-height": "^2.5.0",
    "react-native-toast-message": "^1.3.4",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
    "react-navigation-material-bottom-tabs": "^2.3.3"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "babel-preset-expo": "8.3.0",
    "jest-expo": "^40.0.0",
    "typescript": "~4.0.0"
  },
  "private": true
}

Line 4 of MessagesScreen.tsx: import AppHeader from '../components/AppBar'; AppHeader.tsx

import * as React from 'react';
import { Appbar, Divider, Menu } from 'react-native-paper';
import { AppStyles } from '../AppStyles';
import { INav } from '../models/INav';
import { NavigationUtil } from '../utils/NavigationUtil';
import { ListenerPersona } from './Persona';

export interface AppHeaderProps {
    title: string;
    actions?: any[];
}

class AppHeader extends React.Component<AppHeaderProps & INav, { menuShown: boolean }>
{
    constructor(p: any) {
        super(p);
        this.state = { menuShown: false }
    }

    public render() {
        return (
            <Appbar.Header style={{ backgroundColor: AppStyles.color.tint }}>
                <Appbar.Content title={this.props.title} color={AppStyles.color.white} />
                {
                    this.props.actions
                }
                <Menu
                    visible={this.state.menuShown}
                    onDismiss={() => this.setState({ menuShown: false })}
                    anchor={<Appbar.Action color={'white'} icon="dots-vertical" onPress={() => this.setState({ menuShown: true })} />}>
                    <Menu.Item icon={() => <ListenerPersona size={30} />} onPress={() => { }} title="Account" />
                    <Divider />
                    <Menu.Item icon="exit-to-app" onPress={() => {
                        NavigationUtil.reset(this.props.navigation, [{
                            name: 'Login',
                            params: { disableAutoLogin: true }
                        }])
                    }} title="Logout" />
                </Menu>
            </Appbar.Header>
        );
    }
}

export default AppHeader;

Answer

Solution 1:

Solution by @Nick Prozee he got the issue from react-native-audio-record

Well basically that is a pain in the ***. What I did is outlined all my components 1 by 1 to narrow down which one was causing the error. This led me to the package react-native-audio-record. The problem is that the details you get from expo, are wrong, I did not find any logical way to approach this issue rather then outlining all of my code until error disappears

Solution 2:

it has a bug in react native which is not resolved yet

https://github.com/facebook/react-native/issues/26813

can you try it with remote debugging mode? because it is working with remote debugging mode yet.