CODEWITHSUNDEEP
react-native
user938363
user938363

Reputation: 10358

Why React Native component unmounted after a few seconds

My React Native (0.61.5) app loads a component SplashScreen in App.js. But the SplashScreen only stays a few seconds after loading and is unmounted automatically by itself. I am not sure why the SplashScreen unmounts itself.

Here is the App.js:

import SplashScreen from './src/components/splashscreen/SplashScreen';

export default class App extends React.Component {
  state = {

  }

    render() {
    return <SplashScreen />;
    }
}

Here is the component SplashScreen:

import nodejs from 'nodejs-mobile-react-native';

class SplashScreen extends React.Component {

    state = {

    }

    _isMounted = false

    componentWillUnmount() {
        console.log("Unmount splash screen");
        this._isMounted = false;
    }

    componentDidMount()
    {
        this._isMounted = true;
        console.log("Nodejs obj : ", nodejs);
        nodejs.start("main.js");  //<<<<====this line causes the unmounting 
        nodejs.channel.addListener(
        "message",
        (msg) => {
            alert("From node: " + msg);
        },
        this
        );
    }

    render () {
        return (
            <View>
            <Button title="Message Node"
              onPress={() => nodejs.channel.send('A message!')}
            />
            </View>
         )
    }

};

export default SplashScreen;

The page of Message Node button only stays a few seconds. By design the Message Node page should stays as long as the App is loaded.

Here is the log output:

[23:13:20] D | ReactNative ▶︎ ReactInstanceManager.ctor()

[23:13:20] D | ReactNative ▶︎ ReactInstanceManager.createReactContextInBackground()

[23:13:20] D | ReactNative ▶︎ ReactInstanceManager.recreateReactContextInBackgroundInner()

[23:13:21] D | ReactNative ▶︎ ReactInstanceManager.onJSBundleLoadedFromServer()
                           │ ReactInstanceManager.recreateReactContextInBackground()
                           └ ReactInstanceManager.runCreateReactContextOnNewThread()

[23:13:21] D | ReactNative ▶︎ ReactInstanceManager.createReactContext()

[23:13:22] D | ReactNative ▶︎ Initializing React Xplat Bridge.

[23:13:22] D | ReactNative ▶︎ Initializing React Xplat Bridge before initializeBridge

[23:13:22] D | ReactNative ▶︎ ReactInstanceManager.attachRootViewToInstance()

[23:13:23] I | ReactNativeJS ▶︎ Running "ipat_testmbrn" with {"rootTag":1}

[23:13:23] I | ReactNativeJS ▶︎ 'Nodejs obj : ', { start: [Function: start],
                             │ startWithScript: [Function: startWithScript],
                             │ channel:
                             │ { _subscriber: { _subscriptionsForType: {}, _currentSubscription: null },
                             │ name: '_EVENTS_',
                             └ emitLocal: [Function: emit] } }

There is no console output from componentWillUnmount.

Upvotes: 0

Views: 559

Answers (1)

Sydney Y
Sydney Y

Reputation: 3152

https://code.janeasystems.com/nodejs-mobile/faq#can-i-run-two-or-more-nodejs-instances

You can only time one node instance at a time. It seems you are running a React app with node (I assume this because import is a node keyword) and then trying to use node to run another JavaScript file main.js.

I use React for web and I have to run a build script to make my React app ready for production. You probably have to do something similar.

Edit: Docs for building your React native app for production here

https://facebook.github.io/react-native/docs/running-on-device

Upvotes: 1

Related Questions