continued error reference to Expo SDK 33 version

Please provide the following:

  1. SDK Version: 34.0.1 manually installed – error references 33
  2. Platforms(Android/iOS/web/all): - Android
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

Hi folks, I’ve got an odd issue again with Expo. This time I’ve cleared the cache and data, and manually installed different versions and they’re listed in the dependencies, but still the error persists.

I’ll include my dep here below"

“dependencies”: {
“expo”: “^34.0.1”,
“expo-font”: “~5.0.0”,
“react”: “16.8.3”,
“react-dom”: “^16.8.6”,
“react-native”: “^0.59.10”,
“react-native-gesture-handler”: “~1.2.1”,
“react-native-reanimated”: “1.0.0-alpha.11”,
“react-native-web”: “^0.11.4”,
“react-navigation”: “^3.13.0”,
“react-navigation-header-buttons”: “^3.0.5”,
“react-redux”: “^7.2.3”,
“redux”: “^4.0.5”
},

I did have a reference on react-native of “react-native”: “https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz”,. I manually changed it to 34 and tried to run with npm start. DIdn’t work, so I installed the above RN ver manually.
For whatever reason, I still get an error running Expo that tells me 33.0.0 is not a valid SDK ver and that the valid ones are 34-37. Even trying to install expo 34.0.1 gives me this error.

Any ideas here, folks?
Thanks!

First make sure you don’t have a reference to SDK 33 in app.json. Recent versions of expo do not need that there, but I am not sure if it needs to be there in an SDK 34 app. I suspect not, though.

If that doesn’t work, I suggest you create a new SDK 34 app as follows:

$ expo init -t blank@34.0.1 newapp

Then install the dependencies with expo install. Then compare the package.json and onther files between the real app and the new app.

Here are the dependencies I get if I try that:

{
  "expo": "^34.0.1",
  "expo-font": "~6.0.1",
  "react": "16.8.3",
  "react-dom": "^16.8.6",
  "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
  "react-native-reanimated": "~1.1.0",
  "react-native-web": "^0.11.4",
  "react-navigation": "^4.4.4",
  "react-navigation-header-buttons": "^7.0.1",
  "react-redux": "^7.2.3",
  "redux": "^4.0.5"
}

I see you’re using React Navigation 3. Maybe that’s OK. Not sure.

Anyway, comparing the apps like this might point you in the right direction.

If not, you could copy all your code into the new app and see if it still has the same problem.

If this doesn’t help, please give us the actual error messages you’re getting? It’s hard to troubleshoot with partial information :slight_smile:

Thank you wodin, for the concise and yet thorough reply and instructions. I will try this. I didn’t realize, I guess, that react-nav 4.4.4 was React Nav3. I downloaded a tutorial package on a class I’m taking to get this to work, hence some older package references sandwiched in here. Let me try these steps and see.
Many thanks!
AND, I looked, and as you inferred, there indeed WAS a ref to SDK33 in app.json. I’ll change it to 34.0.0. For starters, anyway.

Try removing the sdk version from app.json. Pretty sure it’s not needed even in an SDK 34 app. You can always put it back if necessary.

I was not saying that React Navigation 4.4.4 was the same as React Navigation 3. That’s just what is installed by default in an SDK 34 app if you use expo install react-navigation (without specifying the version.)

You’ll probably want to upgrade to React Navigation 4 (and later 5) soon, but first make sure the app works as-is on SDK 34.

Thanks, I will try these steps. I very much appreciate the feedback!
I have installed new dependencies here with react-nav 4.0.4.
Some of these were auto done on the react-nav-stack cmd I used to install…
Here’s my new dependencies.
“dependencies”: {
@react-native-community/masked-view”: “^0.1.10”,
“expo”: “^34.0.1”,
“expo-font”: “^6.0.0”,
“react”: “16.8.3”,
“react-dom”: “^16.8.6”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz”,
“react-native-gesture-handler”: “~1.3.0”,
“react-native-reanimated”: “~1.1.0”,
“react-native-safe-area-context”: “^3.2.0”,
“react-native-screens”: “1.0.0-alpha.22”,
“react-native-web”: “^0.11.4”,
“react-navigation”: “^4.0.4”,
“react-navigation-header-buttons”: “^4.0.3”,
“react-navigation-stack”: “^2.10.4”,
“react-redux”: “^7.1.0”,
“redux”: “^4.0.4”

I still get one error though on the react-navigation-tabs though. They aren’t included in the dependencies but I wasn’t seeing in the doco where to install them and with what manner - npm or expo.

1 Like

Hey @bpropes20, the current supported SDK versions are 37-41. If possible, I would strongly suggest upgrading to the latest version that you can.

Cheers,
Adam

Yes, I am definitely getting ready to do that. I’m relatively new to react native and the course I’m learning from starts with RN4 before upgrading to 5.

I have tried reinstalling the tabs with the command, npm install @react-navigation/bottom-tabs, and I still get this error.

Unable to resolve “react-navigation-tabs” from “node_modules\react-navigation\src\react-navigation.js”
Failed building JavaScript bundle.
Unable to resolve "react-navigation

I am not really finding much on Stack Overflow on specifically addressing these tabs, or what is wrong here. I ran an npm -c after installing some dependencies needed with expo and then installing some other react-nav dep’s with npm.
Any thoughts on the tabs installation approach?

Hi. You should generally use expo install ... instead of npm install ... because expo knows about compatible versions of certain packages like react navigation and will install the right one, whereas npm will just install the latest version which might not be compatible with the version of the Expo SDK you are using.

Also, the react navigation docs have instructions for installing the relevant react navigation packages and transitive dependencies. Just make sure you’re looking at the version of the docs that matches the version of react navigation you’re using:

Since you seem to be using version 5 now:

https://reactnavigation.org/docs/getting-started

npm install @react-navigation/native

and

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

And then for the bottom tabs:

https://reactnavigation.org/docs/tab-based-navigation

It says this, but use expo install instead:

npm install @react-navigation/bottom-tabs

See also:

https://reactnavigation.org/docs/upgrading-from-4.x

Thanks, Wodin! I believe I’m still on 4? : /
:grimacing:

I tried this a moment ago - expo install react-navigation-tabs and it kicked in automatically to this Installing 1 other package using npm.> npm install --save react-navigation-tabs
I had been taught to use expo for those other pkgs, and had done so,
I’ll try the above again specifically and see. Right now, I keep getting different errors upon each install I’m trying to fight through. Might have to just dump the node mods and start over. But I should still be on React Nav 4 for now. I’ll upgrade to 5 later,

Well, that attempt got this error -

Found - GET https://registry.npmjs.org/@react-navigation-tabs%2fbottom-tabs - Not found npm ERR! 404

I realize this may be a hot mess, but here’s my current setup now
“dependencies”: {
@react-native-community/masked-view”: “^0.1.10”,
@react-navigation/bottom-tabs”: “^5.11.10”,
“expo”: “^34.0.1”,
“expo-font”: “^6.0.0”,
“react”: “16.8.3”,
“react-dom”: “^16.8.6”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz”,
“react-native-gesture-handler”: “~1.3.0”,
“react-native-reanimated”: “~1.1.0”,
“react-native-safe-area-context”: “^3.2.0”,
“react-native-screens”: “1.0.0-alpha.22”,
“react-native-web”: “^0.11.4”,
“react-navigation”: “^4.1.1”,
“react-navigation-header-buttons”: “^4.0.3”,
“react-navigation-stack”: “^2.10.4”,
“react-navigation-tabs”: “^2.11.0”,
“react-redux”: “^7.1.0”,
“redux”: “^4.0.4”
},
So the outlier (at the very least) is react-navigation/bottom-tabs": “^5.11.10”,
So I wonder, how I can address that version while keeping the others in tact?

Thanks!

Ok, I’m not sure what your tutorial says, but the package name you’re installing (for bottom tabs) looks like react navigation 5.

I suggest you uninstall all the stuff related to react navigation. Then switch to the version 4 docs (there’s a dropdown at the top of the page to select the version) and follow those instructions.

But! Where the docs say npm install blah you should run expo install blah

Good enough, Wodin.

On uninstall, I’ve seen mixed instructions. Do I just delete the node mods, because some people have reported Uninstall cmds not working so well. I’m on windows with this build so is it just npm Uninstall react-navigation-___?

Thanks.

OK, how about this?

Edit package.json and remove any of the following (from the React Navigation “getting started” and “tab navigation” documentation):

(version 4)
react-navigation
react-native-gesture-handler
react-native-reanimated
react-native-screens
react-native-safe-area-context
@react-native-community/masked-view

(version 5, excluding ones already mentioned above)
@react-navigation/native
@react-navigation/bottom-tabs

(from upgrading from 4.x documentation, excluding stuff already mentioned above)
@react-navigation/compat
@react-navigation/stack

Then remove the package-lock.json file and the node_modules directory and contents.
Then run “npm install” to install the dependencies that are left in package.json.
Then follow the React Navigation docs for the version you want to install, but instead of using npm install blah, you should use expo install blah.

Ok, so remove all those listed below in ver 4 from package.json, delete the node mods, npm install, then expo install for these same mods for ver 4 below?

Got it. Let me try that and see.

Thanks!

Ok, did all of that. Despite your good instructions and my best effort, I got this error:

unable to resolve "./getChildEventSubscriber" from "node_modules\@react-navigation\core\lib\module\getChildNavigation.js"
Failed building JavaScript bundle.
events.js:180

throw er; // Unhandled 'error' event

Not sure how easily this can be resolved, if at all.
Thanks again for your help!

Ok, I see something kind of amiss. At the end, I did expo install for @react-navigation/bottom-tabs. Misread in the 5 ver deal. I need to delete that mod. But I wonder if I can use a different tabs ver install?

Might be improving some…in my navigator file (ShopNavigator) I’m getting the error createStackNavigator has been moved to react-navigation-stack
I have import { createStackNavigator, createAppContainer } from 'react-navigation';

Maybe I need to manually do an expo install of react-navigation-stack?

Well, I did that and now on to this error.

Deprecation in 'navigationOptions':
- 'headerRight: <SomeElement />' will be removed in a future version. Use 'headerRight: () => <SomeElement />' instead
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:67:8 in warn
- node_modules\expo\build\environment\muteWarnings.fx.js:17:23 in warn
- node_modules\react-navigat```
What an odyssey, huh?
: )
and FWIW, headerRight code is

headerRight: (
<Item title=‘Cart’ iconName={Platform.OS === ‘android’ ? ‘md-cart’ : ‘ios-cart’}
onPress={() => {
navData.navigation.navigate(‘Cart’)
}} />

)};

I would suggest you follow the instructions on https://reactnavigation.org for 4.x (except for using “expo install xxx” instead of “npm install xxx”).

That shows that you have one or more React Navigation 5 packages installed, so…

exactly!

Ah, I’ve just found where in the 4.x docs the package names for the tabs are. On the left (assuming a desktop browser big enough to show the menu on the left) there is a list of Navigators:

If you look at the createBottomTabNavigator page you’ll see the instructions to install that package. But as mentioned previously, you should use “expo install react-navigation-tabs” instead of “npm install react-navigation-tabs

There is also a createBottomTabNavigator page in the 5.x docs which lists what to install for 5.x when you get to that point.

Going back to the Navigators in the 4.x docs there is a createStackNavigator page which shows what to install. If you check that you will see that you are correct.

OK, that is not actually an error. It’s a deprecation warning. So not something you absolutely need to solve right away, but you will need to fix it for 5.x.

Right, so like the warning says, the value of associated with the headerRight key is just a component. In your case it’s wrapped in parentheses, but that doesn’t make any difference. But React Navigation wants a function there instead that returns the component.

Instead of:

headerRight: (<Item .../>)

You need:

headerRight: function_that_returns_item

The most straightforward way to do that is just add the following in there before the opening parenthesis to turn it into an anonymous arrow function that returns the component:

() =>

so:

headerRight: () => (
<Item title=‘Cart’ iconName={Platform.OS === ‘android’ ? ‘md-cart’ : ‘ios-cart’}
onPress={() => {
navData.navigation.navigate(‘Cart’)
}} />

)

If you want an example app with bottom tabs to compare yours to, use expo init to create a new app and choose the option that mentions tabs.

Good stuff, wodin. Let me go back and cherry pick the needed fixes.
Very good, informative stuff. I appreciate your patience and insight!

Barry

Ok, well, I reinstalled navigation-tabs with expo install react-navigation-tabs and then reran npm start and get this error.

- node_modules\react-navigation-header-buttons\src\HeaderButton.js:41:27 in HeaderButton` 


In that I get a reference to this line in that HeaderButton file - `const CustomHeaderButton = props => {
    return <HeaderButton {...props} IconComponent={Ionicons} iconSize={23} color={Platform.OS === 'android' ? 'white' : 'teal'} />;
}`


I would think this would be ok. I was getting some errors with the Colors constant file I built but then hardcoded these colors for the conditional statement. I'd think it would be ok. If you see anything amiss here that stands out let me know,

Thank you.

I don’t off hand see anything wrong with that line, but would need to see the error message to see what the problem is.

Looks like some of it got cut off in this email view. I’ll try to repost it better.