🔥 Great Expo template - Expo Router v3 & Nativewind v4

🔥 In this video I'd like to quickly showcase how to bootstrap the new Expo template that include expo-router v3 and nativewind v4.
expo-router v3 comes with great features and it's the only file-based routing system on React Native.

◆ Expo Router v3 beta
◆ Nativewind v4
◆ src directory, typescript, aliases.

Installation command:

npx create-expo-app -e with-router-tailwind
bunx create-expo-app -e with-router-tailwind

---

----
----

You can find me on:

---

Timeline:
00:00 Introduction
00:22 install template using bun
00:46 open the template in VSCode
01:21 add userInterfaceStyle automatic
02:55 fix dark/light theme switch
03:57 nativewind automatically transition colors using system ui
06:30 create a second route using expo-router
07:06 navigate to the second page + awesome TypedRoutes
07:43 convert the navigator to Native Stack
08:01 cross-platform template - showcase web
08:35 closing

#react-native-template #expo-router-v3 #nativewind #expo-router

[Baconbrix]

Great video! Really exciting to see how quickly you can fly through building an app with Router and Tailwind!

[LearnPayload]

Nice! Side note: I have to have my volume up to its max to be able to hear you.

[RMReactive]

with-router-tailwind (Expo Router + Nativewind). "npm run start" stuck on "68.7% (400/498)". How to solve it?

[trenthm]

wonderful. love the chill vibe... but you still seemed excited

[masoom-theproudvegan]

which extenstion you are using for autocomplete

[tamaniphiri]

Great stuff Catalin, great stuff indeed

[alexisscuderi]

bro for some reason im using this comand (and i also tried several times to combine nativewind with expo router from scratch) but its not working for me, it always lands on a white screen and the app doesn't work

[franckngoubounkou]

The monster Catalin miron 😊.You are the best

[alvi]

How to do the theme animation using react state like useColorScheme

[vishalbhati]

That looks really simple and amazing. But as a beginner I've always had issues with the environment setup be it Android or iOS or Web, if you find time can you please create a video where you show how to properly set up the environment for React native apps?

[mustafazouari]

when i run command on mac it tells me Unknown arguments: -e

[bradpreston]

Such a great video! Thank you for this

[muhammadferdianiqbal]

Hi! Your video is awesome, but I have a problem when try to start the project. Error running TailwindCSS CLI, please run the CLI manually to see the error.
Command used: --input "jobpedia\src\global.css" --output --watch

what should I do? thanks

[alashish]

Great video my friend, i am learning a lot from your videos. Thanks man for this👍

[tiii]

--web is broken with this template as with most v4 installations of nativewind

[kennethpole]

Great tutorial, how do you setup a custom locally fonts in the assets folder?

[th_aeon]

how do i add custom fonts
please help

[chat-jpt]

What is your camera setup? I really like.

[TechHelpBD]

getting this ERROR Warning: You are setting the style `{ shadowOffset: ... }` as a prop. You should nest it in a style object. E.g. `{ style: { shadowOffset: ... } }`

[marvelbabalola]

Great video Catalin. I am actually new to your channel. I tried using this approach with Npm on my windows 10 machine but I can’t open the application on web. It keeps bundling and it stops halfway(55%). I don’t know if there are any resources that might help or direct me in the right path. Or some clarity if I am making a mistake somewhere