2 - Adding NativeWind and Expo Router for TikTok Clone with React Native

In this video, we're taking our TikTok clone project further by integrating NativeWind for fast and reusable styling and setting up routing using Expo Router! 💻

Here’s what we’ll cover:
- *NativeWind* installation and setup for easy Tailwind CSS-based styling
- Configuring *Tailwind* with the right file paths in our React Native project
- Adding custom styles and components with NativeWind
- Setting up *Expo Router* for smooth navigation between multiple screens
- Creating tabs and pages for key features like Home, Friends, Camera, Profile, and more
- Adding authentication routes with a custom login page
- Debugging common issues with routing and file structure in Expo

By the end of this video, you’ll have a strong foundation for building out the UI and navigation flow for a social media app. 🚀

Don’t forget to subscribe and stay tuned for the next video where we’ll add icons and integrate Supabase for backend functionality!

[haal]

great video! Im new to React Native development and have been looking for good guides to get my feet wet. Love the slow tempo and that you take your time with each step and doesnt skip anything! It makes it so easy not to miss any little details

[SatoshiNakamono]

The file (auth)/index.tsx and (tabs)/index.tsx have the same file name, so the first is the default home screen.
We should change (auth)/index.tsx to (auth)/signin.tsx

[arijitdn]

Add /// <reference types="nativewind/types" /> in your expo-env.d.ts to ignore that className warning of typescript