Your code is appropriate ! Right here is a minimal demo of it engaged on Snack.
This implies the difficulty should come from the mission setup. Listed below are some troubleshooting steps in your Expo mission:
- Is there a
App.jsx/tsx
file on the root of your mission ? It’s now utilized by default because the entry level of Expo apps. Prior to now, you would need to run
import { registerRootComponent } from "expo";
import App from "./App";
registerRootComponent(App);
however now you’ll be able to simply put an the App.jsx/tsx
on the root of your mission. Do be certain that it’s there should you use a latest Expo model, or use registerRootComponent
as a substitute.
-
Guarantee peer dependencies are put in, with out different packages overwriting dependencies variations. Dependencies can have an effect on one another and trigger model points (although Yarn ought to repair that). Additionally,
@react-navigation/bottom-tabs
&@react-navigation/native
require thereact-native-safe-area-context
andreact-native-screens
dependencies, guarantee these are put in too (or at the least set as peer dependencies). -
Use Yarn as a substitute of different node bundle managers, as I’ve personally seen dependencies points utilizing NPM or PNPM with Expo up to now.
-
Guarantee all dependencies are updated & suitable along with your Expo model by operating
expo physician
. It would robotically repair dependency points.
If none of these assist, I’d suggest beginning a brand new mission from scratch utilizing the Expo with-tab-navigation
instance which has roughly the identical code because the one you tried.
You possibly can strive it through the use of npx create-react-native-app --template with-tab-navigation
. This can will let you have a mission operating the newest Expo model, and have a very good begin for a codebase.
For those who nonetheless run into a difficulty, please put up a remark !
Good luck along with your mission Ronan, I hope this reply helped.