3 Steps to Fix ‘Stack.Navigator’ cannot be used as a JSX component in React Native (expo, TS template)

4 min readMay 28, 2022

TL;DR

run yarn why @types/react pick the version (chances are you’d have more than one), which is closer to the one in your devDependencies (i.e “@types/react”: “17.0.45”), presumably the older one.
add resolutions object to your package.json with the selected version

"resolutions": {
  "@types/react": "17.0.45"
}

3. run yarn install all done!

4. refer to the sample repo for steps

Notice: it applies to any navigator with such an error (Drawer, BottomTabs…)

Steps to reproduce

Start an expo project and chose theblank (Typescript) option.

expo init rn-navigation-types-solution

2. Add reactnavigation and its dependencies according to their manual

yarn add @react-navigation/native

expo install react-native-screens react-native-safe-area-context

3. Add a navigator of your choice, we’ll deal with the StackNavigator

yarn add @react-navigation/stack

expo install react-native-gesture-handler

At this point, you should have something resembling this commit

4. Add minimal sufficient boilerplate to use the navigator (use the example from their official page or my commit)

TypeScript error! TS2786: ‘Stack.Navigator’ cannot be used as a JSX component.

Congrats! TypeScript is now yelling at you for blindly following a bunch of documentation and/or instructions of some third-rate author =)

Your bad joke could be here! Be grateful it’s mine ;-)

Steps to resolve:

Run why @types/react and find out, that you have two versions of this package

2. Go to your package.json and find out which version, which looks more like the one from your devDependencies (it should not be the latest one).

3. Add resolutions to your package.json

“resolutions”: {
 @types/react”: “17.0.45”
}

4. Run yarn install to apply changes.

5. Check if everything is ok, by running why @types/react again

In the end, you should have something like this. Error-free

Why would this happen in the first place?

Well, frankly speaking, I am not that qualified to answer this correctly but I’ll give you some leads to further research and more importantly the original post and the thread for this matter, where this is discussed in great detail.

Well, the post is really great and helpful, so I give it credit again to make sure, you check it out.

I will give you my understanding though. When we look at the git diff in resolutions commit there is a strange detail in yarn.lock file:

We know we had two packages of @types/react. Now with that in mind, I can see @types/react* caused to install the latest (18) version, which is not compatible with the 17. How on Earth did the users from the thread deduce it had some relation to the “@types/react-native”, I have no idea.

But somehow it is possible since the previously mentioned resolutions page suggests the full spec on resolutions. And there is an example with this very situation

Bonus (don’t do this!)

Actually do, to see it for yourself.

When I faced this issue, I followed the false trail and tried to change the package to version 18 manually and got downgraded back to version 17 on expo start command. And I was not alone

References

sample repo with all the steps: https://github.com/bseleng/rn-navigation-types-solution
create expo project: https://docs.expo.dev/get-started/create-a-new-app/#initializing-the-project
react navigation installation: https://reactnavigation.org/docs/getting-started#installation
stack navigator installation: https://reactnavigation.org/docs/stack-navigator
commit with initialized app and installed dependencies: https://github.com/bseleng/rn-navigation-types-solution/commit/6d26c209f0fbc485831b17222065e02c0014feda
Stack navigator example: https://reactnavigation.org/docs/stack-navigator#api-definition
Reproduced problem commit: https://github.com/bseleng/rn-navigation-types-solution/commit/da927ec7ae66376c0115a04516f0f26fa7cd985f
Yarn resolutions page: https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/
Fixed problem commit: https://github.com/bseleng/rn-navigation-types-solution/commit/5ebdf6167c93f87a5d541c59b82b0fac4ff90a660
ORIGINAL POST: https://github.com/react-navigation/react-navigation/issues/10507#issuecomment-1105809591
Full spec on resolutions: https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md
Resolutions problem example: https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md#example
False trail stackoverflow: https://stackoverflow.com/questions/71816116/stack-navigator-cannot-be-used-as-a-jsx-component
False trail, attempt to upgrade types: https://github.com/react-navigation/react-navigation/issues/10507#issuecomment-1103233229