React Native For Absolute Beginners 2025 | Part 1

This mobile application has been developed using React Native, a popular framework for building cross-platform apps. The design process focused on incorporating the following key components: Text, TouchableOpacity, TextInput, StyleSheet, Image, ActivityIndicator, View, SafeArea, ScrollView, FlatList, and Alert.

To ensure code cleanliness and organization, the styles have been extracted into a separate file and imported into the relevant components where they are utilized. This approach promotes code modularity and maintainability.

State Management

In React components, there are two types of data that govern their behavior: props and state. Props are set by the parent component and remain fixed throughout the component's lifespan. On the other hand, state is used for data that can change over time. For clarification let’s take one use case of how we are going to be managing our state in our app. When capturing the changes in a text Input, this data changes every time a user type something in the text Input, so every time there’s is a change setstate is called onChangedText to store the context of the TextInput.

As good practice we initialize state in the constructor of a component. When you want to modify the state, using the setState method provided by React.

Backend

By the end of this course, you will gain proficiency in:

Timeline
00:00:00 Introduction
00:02:34 Install node on mac
00:05:42 Download and install vscode
00:06:43 Download install Android Studio
00:09:15 Create and run Android Emulator
00:14:18 Create first react native project
00:17:25 Understand package
00:28:22 Understand Export Default
00:34:07 Understanding alignItems, justifyContent and flex
00:41:07 More about flex and view and text
00:45:40 Learn about Flex direction
00:50:43 Learn basics of views
00:56:43 Deeper understanding of Flex and nested views
01:05:39 Separate styles
01:12:15 Create our first component
01:18:30 Separate the component
01:26:05 More about styling properties margin, padding and color
01:33:34 Reusable style component
01:42:52 TouchableOpacity click and Icons
01:55:20 Showing TextInput
02:02:23 SafeAreaView and Ionicons
02:08:40 Retouch color and look of WelcomeComponent
02:24:09 Display image
02:40:44 Understanding overflow
02:44:35 Understand the basics of FlatList
02:56:19 Understanding arrow function
03:00:46 FlatList and Dynamic Data
03:08:38 FlatList and show Images
03:20:28 FlastList and faster snapping
03:21:50 Refactor code with homescreen
03:26:09 Create header and Touchable opacity
03:41:26 React native navigation
03:54:23 React native code snippet plugin
03:57:35 Images and path in FlatList
04:04:05 Showing images in a column
04:06:09 Display images correctly
04:11:02 Showing Images with Text
04:19:34 Separate style objects and components
04:29:46 Install fonts
04:39:36 How hooks and callback function works
04:48:20 Change fontFamily
04:52:10 Understanding of useEffect
05:07:52 Deeper understanding of useEffect
05:15:54 Showing the loading text
05:19:54 useEffect and dependencies
05:24:26 Showing Lottie json files
05:31:31 Showing bottom navigation in React
05:40:37 Styling and more screens
05:49:37 Tabs and focus management
06:01:40 Create hook for home screen product
06:12:07 Finishing the hook with Promise and Resolve
06:31:07 Showing loading icon and load the images
06:40:40 ScrollView and home page scrolling
06:43:14 React native fragment and FlatList

Learn more about it here

Multi vendor app

[qhwecumexez]

Thanks for this awesome course. Waiting for the next part

[nadearo]

Thanks for awesome course! looking forwards to the next part 2 !!!

[oyepariolaoluwalonimi]

Please continue with react native
Thank you

[Pure_Islamic_Teachings]

awesome tutorial. we just waiting for the next part. Salam alaykum bro

[angelsureshkarki]

so happy to listen to ur voice sir....wanted to learn script for a long time..occassion has arrived sir

[programmingholic]

Thank you so much for starting this, Sir hat's of you to sir your effort.

[nunajah]

please continue sir
thank you very much

[sunjowilliammburli]

This course is top notch. Boss if you do have some time you can also consider making and flutter revenuecat tutorial for in app subscription, it'll help a lot

[n-zvwi]

I waiting for this course you make flutter better and I still continue learning React Native But Your sound not hear Good Are you get sick or something please take care your health

[arshmash]

can you do a similar for react js beginners bro!

[asadrao]

Is it just front end UI or it includes backend too?

[Familydrama]

Can you Make video on react native cli
pls

[usmanmarkaz]

sir what about React native Food App with driver side and API inetgration