Looking for a solution to the error message "React Native Splash Screen shows 'null is not an object

I have followed all the steps outlined in this guide: https://www.npmjs.com/package/react-native-splash-screen and also watched a YouTube tutorial covering the same process.

Here is the code snippet that I have implemented:

import * as React from 'react';    
import SplashScreen from 'react-native-splash-screen';
import HomePage from './src/Home';
import {navigationRef} from './RootNavigation';
import * as RootNavigation from './RootNavigation.js';

const Stack = createStackNavigator();

export default class App extends React.Component {
  componentDidMount() {
    setTimeout(1000);
    SplashScreen.hide();
  }
  render() {
    return (
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomePage}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Everything works fine except when I remove the componentDidMount method. The issue arises at the line where I call SplashScreen.hide();

The error message I encounter is:

TypeError: null is not an object (evaluating '_reactNativeSplashScreen.default.hide')

This error is located at:
    in App (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

componentDidMount
    App.js:47:4

I have attempted manual installation, ensured that react-native-splash-screen is properly installed, and ran npm install, but the problem persists.

Answer №1

When I executed the command react-native run-ios

I realized that I was manually connecting the react-native-splash-screen package even though the version of react-native I have supports automatic linking.

By removing the link using

react-native unlink react-native-splash-screen
and then running react-native run-ios, the problem was resolved.

Answer №2

My suggestion would be to include the SplashScreen.hide() function within the callback of the setTimeout() function. Like this:

componentDidMount() {
    setTimeout(1000, () => SplashScreen.hide());
}

If this solution doesn't resolve the issue, I recommend verifying the value stored in the SplashScreen object.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The iOS simulator running a Capacitor-converted web app is experiencing inconsistent data retrieval issues from the local development server

I have recently transitioned my web app, built in node.js, to also have a mobile app version using capacitorjs. In the web app, I utilized handlebars to parameterize views and served them using res.render(). However, with capacitorjs, it seems the approach ...

Uncovering secret divs with the power of jQuery timing upon reload

Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page. To achieve this functionality, I am uti ...

Protractor: How to Handle Multiple Browser Instances in a Non-Angular Application and Troubleshoot Issues with ignoreSynchronization

I have encountered an issue while using protractor to test a Non-Angular application. After implementing the browser.forkNewDriverInstance(), it appears that this function is no longer functioning correctly as I am receiving the following error message dur ...

Error: AJAX encountered an unexpected token

An error message has appeared stating: Uncaught SyntaxError: Unexpected token : This error relates to the following line of code: data: userCoupon: $('#couponCode').val(), Here is the script in question: $(function() { $("#signInButton2"). ...

"Troubleshooting a callback problem in jQuery involving JavaScript and AJAX

UPDATE3 and FINAL: The problem has been resolved with the help of Evan and meder! UPDATE2: To clarify, I need the existing function updateFilters(a,b) to be called, not created. My apologies for any confusion. The issue with the code below is that udpate ...

Tips for reducing code length in jQuery

Here's an interesting question that I've been pondering. Is there a more efficient way to optimize and condense code like the one below? Could it be achieved using functions or loops instead of having lengthy jQuery code? var panels = ["panel1", ...

Testing with Phantom/Casper in a browser-based environment

Currently, I am utilizing Casper for UI testing on websites. My main concern is regarding the compatibility testing in various browsers such as IE, Chrome, and Firefox using Casper. If this cannot be achieved with Casper, I am open to alternative methods ...

Invisible and Unrestricted automatic playback

Why is auto play muted in both Firefox and Chrome? How can we code it so that browsers don't block it? Here's the code I'm using: <audio id="audio1" src="https://notificationsounds.com/storage/sounds/file-sounds-1217-relax ...

Vue Testing Utilities - issue with data not updating upon click event activation

I recently created a basic test using Vue Test Utils: import { mount } from '@vue/test-utils' const App = { template: ` <p>Count: {{ count }}</p> <button @click="handleClick">Increment</button> `, ...

Options for a blank UIDocumentMenuViewController

I'm encountering an issue with importing files from iCloud. Once I select the location to import from (iCloud, Google Drive, Dropbox, etc.), I'm getting empty options. I have the necessary data on iCloud drive and the entitlements are set correct ...

JavaScript code to locate the most pertinent strings within an array based on a specific substring

I'm working with a large array containing names of people, such as: let names = [ "John Brown", "Tristan Black", "Carl Jobbs", "Aidan Burrows", "Taylor Joe" ]; When given an input, I want to return the top 5 most relevant results ...

Switch out bootstrap icons for angular material icons

I'm currently in the process of transitioning from using Bootstrap to Angular Material in an existing application. I need assistance with replacing the Bootstrap icons with Angular Material icons. Any help is greatly appreciated. <md-button class= ...

Adjusting the placement in Draw2D

I'm a newcomer to this library and I'm struggling to figure out how to properly size and position the canvas. If anyone could provide guidance on the best way to do this, I would greatly appreciate it. $(window).load(function () { // se ...

Why does the ng-click function fail to execute when using the onclick attribute in AngularJS?

Whenever I try to invoke the ng-click function using onClick, I encounter an issue where the ng-click function is not being called. However, in my scenario, the model does open with the onClick function. //Function in Controller $scope.editProductDetail ...

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

The initialization of Firebase is not being completed before it is being called in other files

I am currently working on a vue project and I am attempting to integrate firebase. However, I have encountered an issue where my other JavaScript files like auth.js are utilizing firebase before it is properly initialized in my main.js file (which acts as ...

Generating a container DIV with loops and ng-class in AngularJS

Currently, I am working on developing a dynamic timeline using AngularJS. To populate my timeline, I have successfully configured the data fetching from a JSON file. You can see what I have accomplished so far on PLNKR: http://plnkr.co/edit/avRkVJNJMs4Ig5m ...

What is the method for adding an HTML tag that includes an md-checkbox and md-icon?

I am currently utilizing angular material and angular js to dynamically add a new HTML div when a certain function is triggered from the view. Here is my view setup: <div id = "main_row" ng-click="defCtrl.submit()"> </div> This is wh ...

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

Issues with location forecasts and .getPlace() when utilizing the Google Maps loader for Place Autocomplete in Vue are causing functionality problems

After setting up a Vue 2 app using the vue cli, I noticed that when typing an address, no suggestions were populating from the dropdown. Checking the network tab, I observed the AutocompletionService.GetPredictions call triggering without any errors upon p ...