Getting Started with React Native and Expo | DEVember Day 1

DEVember is a special initiative by notJust.dev, where we will post a live tutorial every day in December. This is the beginning of our exciting journey through DEVember, in which we will dive deep into mobile development using React Native, while supporting an amazing cause!
On Day 1 of #DEVember we're showing you how to set up your development environment, create a new project with Expo, and get started with Expo Router. We'll also dive into the core features of our Challenge App, including displaying lists, styling, screen navigation, and organizing an effective project structure for smooth development. Let's begin this exciting journey together!
🌟DEVember Day 1: www.notjust.dev/projects/deve...
💡Submit your idea for DEVember on our Idea Board:
github.com/notJust-dev/DEVemb...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Introduction to DEVember
2:23 GitHub Collaboration: Sharing and Voting for Project Ideas
3:03 Fundraiser Announcement
4:28 Incentives for Fundraiser Donations
6:21 Getting Started with Expo Project Setup
10:15 Essential Tools: Node.js and Git Installation
11:50 Initializing and Configuring the Expo Project
14:07 Choosing the Right Expo Template
15:30 Running and Testing the Project with Visual Studio Code
17:31 Emulator Setup for Android and iOS
20:34 Understanding React Native Project Structure
23:12 Git for Version Control Introduction
25:52 Connecting to GitHub: Local Repository Setup
27:13 Creating and Managing GitHub Repositories
29:24 GitHub Committing and Pushing Changes
31:36 Cloning GitHub Repositories
33:11 Setting Up the Project from GitHub
35:15 Installing Dependencies and Running Cloned Project
37:07 Building the Core of the Application: Advent Calendar
39:21 Benefits of Using Expo for Development
41:32 Transitioning from React.js to React Native
45:49 User Interface Inspiration and Design
48:09 Implementing the Advent Calendar Design
50:20 React Native Styling Techniques
55:28 Flex Properties for Alignment and Spacing
58:08 Custom Fonts and Styling Techniques
59:37 Optimizing with Arrays and Key Properties
1:03:02 Introduction to FlatList Component
1:07:33 Styling FlatList for Multi-Column Layouts
1:10:43 Responsive Design Adjustments
1:12:09 Fine-Tuning Styles for Item Spacing
1:14:07 Generating a Dynamic Array for Calendar Days
1:15:58 Concept of Reusable Components
1:17:20 Building Custom Components for Scalability
1:20:30 Importing and Rendering Custom Components
1:23:48 Simplifying Components and Understanding Props
1:26:34 Introduction to TypeScript in React Native
1:28:06 Using TypeScript for Typing Properties
1:30:10 Code Updates and GitHub Committing
1:31:43 Community Interaction and Collaboration
1:34:09 Understanding File Extensions (JS, TS, JSX, TSX)
1:35:00 JavaScript and TypeScript Syntax
1:38:07 Choosing File Extensions for Projects
1:39:08 Expo Build Types and Ecosystem
1:40:20 Integrating Google Fonts in React Native
1:45:51 Utilizing Expo Splash Screen for Asset Loading
1:57:17 Introducing Expo Router for Navigation
1:58:37 Community Engagement and Fundraiser Updates
2:00:11 Expo Build and Native Code Integration
2:05:39 Setting Up Expo Router: Navigation and Configuration
2:13:15 Enabling Metro Web Support
2:17:36 Creating File-Based Screens in Expo Router
2:20:22 Demonstrating Web Support in Expo Router
2:22:04 Setting Up Dynamic Routing in Expo Router
2:30:04 Dynamic Routing to Specific Days in the App
2:33:27 Implementing Optional URL Segments
2:35:09 Customizing Stack Navigator in Expo Router
2:39:25 Setting Up a Root Layout for Global Configuration
2:43:38 Configuring Global Header Styles
2:45:32 Managing Screen Titles and Options
2:47:12 Entry Point and Global Configuration in Expo Router
2:49:33 Ensuring Global Asset Loading
2:53:30 Implementing TypeScript Path Aliases
2:57:18 Finalizing TypeScript Path Alias Setup
2:58:44 Recap and Closing Remarks
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative

[@danielfernandez5709]

Very good explanation on how to load fonts and the splash screen logic!! Congrats Vadim!!

[@danielfernandez5709]

This tutorial is great! Setting up expo router, manually from scratch, made understand how it works. Thanks for sharing your knowledge Vadim!!

[@notjustdev]

Thanks Daniel

[@usmaniCodes]

Awesome Day0 Completed ✅

[@notjustdev]

Keep it up

[@ricardohernandezmendez4207]

I just want to tell you Vadim. What an introduction! The entire time the video lasts I was always focused on everything that was done in the video tutorial. At no point did I feel like I was doing something boring. Thank you I have learned a lot.

[@notjustdev]

That's great to hear, thank you for your appreciation! 🙌

[@gtgt1851]

Great content Vadim! Thank you very much for your effort.

[@notjustdev]

Thanks 🙏

[@mathhack8647]

Interesting Programming Approach. I just bought his course and it's with the same pleasure I am following DEVcember Courses as well. Thanks Vadim.

[@novaardiansyah6254]

Very, very helpful. May the spirit of sharing never fade for you, Vadim 👌.

[@batahumphrey576]

thanks, bro i am in Africa Cameroon , and I am learning a lot from your channel

[@user-sf8eq1zq5k]

Thanks for your content 🤞🇺🇦

[@notjustdev]

My pleasure

[@aseroboiobi]

looking forward to starting this!

[@mhslekbar]

this is the best series of react native great job bro

[@priyamshah7117]

Great video I was unable to catchup with the live streams but will surly watch the videos

[@codewithrohit2927]

Great❤❤

[@JatinnSharma]

Thx bro

[@notjustdev]

Welcome

[@alzearafat]

Thank you so much!

[@notjustdev]

You’re welcome

[@AdityaSingh-dz9tx]

is there a better way of making these screens dynamic, like reusing a component because designing a separate screen for every button seems redundant. PS:- I am new to react native

[@ImIrish]

Anyone Struggling around 2:35:00 to get the folder to apply the ( ) to the folder name, you may need to stop the emulator from running to allow it to make the changes, this happened in may case anyway (CTRL + C) to close it. Then make the changes to the folder and then run (-npm start) again in the terminal

[@user-sq7si4jz5h]

Je vous remerci boeur❤

[@notjustdev]

Avec plaisir 🙌

[@SinuraWahalathanthri]

Hey Vadmin, I really love these live streams your doing really helped me with my 1st year project in my uni, just a quick question whats the icon theme your using in vs code

[@UnchartedWorlds]

did you ever find this theme? Asking for friends

[@user-kr6lp7rm5y]

Can you compare tamagui and gluestack-ui?

[@emporteme]

thank you

[@OmarFaruk-bz4gw]

My ract-native teacher

[@coder_one]

If someone has problems with font loading try this: npx expo install --fix (it will check the compatibility of expo packages and tries to fix it)

[@giovannijuliao]

With expo-router, any one facing error with multiple files match the route name?

[@Pablograma]

hi! first of all thx so much for all of this!! such a great content dude!! and.. anyone knows why mi app doesnt render the colors that i declare, its about my phone device? tnks!

[@Pablograma]

forgot it xD, its all about my phone configurations...

[@samuelblackk6106]

ERROR ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'deprecated-react-native-prop-types' package. been having this error message for a long time, and really don't know what to do, tried a couple of things and still having the issue...

[@coder_one]

Just stop using PropTypes in your project

[@JosephM1M5A4]

8:24

[@birukmengistu8187]

I got trouble to publish my React native project

[@birukmengistu8187]

I need your help