38 Deprecated - Issues Updating to 42

[coinward]

SDK Version: 38
Platforms(Android/iOS/web/all): iOS

Updating from SDK 38 to 42 and having this issue x2:

[adamjnav]

Hey @coinward, I would suggest diving into our debugging docs as the knowledge there will help you get to the bottom of this error and better equip you to squash future bugs/errors.

Cheers,
Adam

[wildpastry]

Hey @coinward did you find a solution to this? I am having the same issue.
@adamjnav any other suggestions other than reading the docs and debugging?
I have been through stackoverflow multiple times. The app was working well before the upgrade.

[wodin]

Hi @coinward and @wildpastry

This is caused by React Native trying to render something that’s undefined. It’s hard to tell just based on the error what the problem is.

If you can’t find the problem based on the stack trace from the error message, I would try commenting out half the app to see if you still get the error. If so, comment out the other half of the app instead. This way you narrow down the problem to a smaller part of the code. Then you repeat the process by again commenting out half of the code you have narrowed it down to etc.

i.e. this is basically a binary search/bisection.

[wildpastry]

Hey @wodin thanks for the reply. Yeah so my app was working smoothly before the update, I can’t use your suggestion because of where my problem lies - which is the initial screen.

I think it might be something to do with my “registerRootComponent” but I can’t fix it so far.

I have been through stackoverflow multiple times and tried removing packages/re-installing/cleaning the npm cache etc.

I feel like my options now are:
Rebuild the app section by section in a new container in the new SDK.
Roll back to the old SDK.

Both of these feel like bad options.

Anyway here is my loading screen/entry point to my app if you can see anything:

Index.js:

// imports
import * as Expo from 'expo';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import React, { useState } from 'react';
import AppContainer from './navigation';
import Firebase, { FirebaseProvider } from './config/Firebase';
import { StatusBar } from 'react-native';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

// START Index
const Index = (props) => {
	// hook loading states
	const [isLoadingComplete, setLoadingComplete] = useState(false);

	// set status bar text colour
	StatusBar.setBarStyle('light-content', true);

	// app loading check
	if (!isLoadingComplete && !props.skipLoadingScreen) {
		console.log('Inside loading check from Index...');
		return (
			<AppLoading
				startAsync={loadResourcesAsync}
				onError={handleLoadingError}
				onFinish={() => handleFinishLoading(setLoadingComplete)}
			/>
		);
	} else {
		return (
			<FirebaseProvider value={Firebase}>
				<AppContainer />
			</FirebaseProvider>
		);
	}
};
// END Index

// load resources
async function loadResourcesAsync() {
	console.log('Inside loadResourcesAsync from Index');
	await Promise.all([
		Asset.loadAsync([require('./assets/brand.png'), require('./assets/icon.png')]),
		Font.loadAsync({
			...Ionicons.font,
			allerLt: require('./assets/fonts/Aller_Lt.ttf'),
			allerRg: require('./assets/fonts/Aller_Rg.ttf'),
			allerBd: require('./assets/fonts/Aller_Bd.ttf'),
			allerDisplay: require('./assets/fonts/AllerDisplay.ttf'),
		})
	]);
}

// errors
function handleLoadingError(error) {
	console.log(error);
}

// finish loading
function handleFinishLoading(setLoadingComplete) {
	setLoadingComplete(true);
	console.log('Inside handleFinishLoading from Index = ' + setLoadingComplete);
}

// register
export default Expo.registerRootComponent(Index);

AppContainer is this: const AppContainer = createAppContainer(SwitchNavigator);

app.json I have : "expo": { "entryPoint": "./Index.js", [ ... ] }

package.json I have: {"main": "./Index.js", [ ... ] }

And yeah the stack trace says it’s coming from the Index Component but it looks like I am exporting it correctly? Really stuck on this one.

[wildpastry]

Hey all thought I would post the solution for me. I don’t understand why to be honest but I changed “Index” from a functional component to a class component, I downgraded 2 of my packages that got automatically upgraded with sdk42.

Now the app seems to be running okay, though it’s giving me warnings of old/unsupported versions of react-navigation-stack and react-navigation. I’ll look at upgrading these “Carefully”.

Thanks.

[wodin]

Hi @wildpastry

So a newly created Expo app looks like this:

• App.js does not have a call to registerRootComponent. It just does something like export default App
• app.json has no mention of the entryPoint
• package.json has the following:

  "main": "node_modules/expo/AppEntry.js",

• node_modules/expo/AppEntry.js contains this:

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

I suggest you make your app look more like the above.

Also, get rid of any mentions of “import … from ‘expo’”. e.g. I see you have the following:

import * as Expo from 'expo';
import { AppLoading } from 'expo';

The first import is not needed if you let Expo handle the registerRootComponent call.
The second should be changed to:

import AppLoading from 'expo-app-loading';

EDIT: Also try running expo doctor to see if it complains about anything