00:05 Build a coffee shop app using React Native 02:42 Exploring the details screen of the app 08:07 Building a Coffee House app using React Native CLI and setting up initial project 10:53 Dependencies for React Native coffee shop app 16:47 Configure app for portrait mode and install dependencies for React Native app development 19:19 Installing navigational and elemental dependencies for the app. 24:52 Adding required asset folders for the Coffee Shop App 27:37 Copying and pasting specific folders and files for project setup. 33:18 Setting up data, theme, and assets for the app 36:06 Setting up State Management Library folder 41:58 Creating six screens using React Native 45:42 Creating a stack Navigator and setting up a tab Navigator 52:12 Configuring Navigator options and tab bar style in React Native 55:28 Customize tab bar style and background blur in React Native app 1:01:19 Creating a store for coffee app data display 1:04:28 Creating and using a store in the coffee shop app 1:10:48 Understanding the structure of the data and extracting the categories 1:14:32 Creating a property and setting values in data 1:20:16 Adding styles and header to the Coffee Shop App using React Native 1:23:36 Creating and defining header bar props for the app. 1:30:04 Creating gradient backgrounds and profile picture in React Native 1:33:36 Adding basic properties and styles for the header component 1:39:43 Building custom search icon and text input in the app 1:42:37 Styling the text input and custom icon 1:48:43 Dynamically creating a list based on data size 1:51:17 Rendering different views based on index 1:57:08 Changing category and setting coffee list 1:59:46 Setting up Flat List and its properties 2:05:32 Configuring and handling properties for the coffee shop app 2:09:19 Adding background image to the coffee app 2:15:50 Styling and adding text, price, and button 2:18:43 Styling functional components in React Native 2:25:21 Styling and customizing various components in the Coffee Shop app 2:28:27 Building a card list with specific styling requirements. 2:34:18 Fixed scrolling and search functionality 2:36:58 Adding custom icon and functions 2:42:25 Implementing search and reset functionality for coffee list 2:44:58 Handling display of empty flat list 2:50:35 Creating functionality to add items to the cart. 2:53:07 Using the produce function from immer package for state manipulation. 2:58:44 Implement custom sort function based on item size for the cart list. 3:01:21 Updating or adding items to cart and calculating cart price in React Native app. 3:06:58 Calculating cart price and adding item to favorite list 3:09:36 Updating the coffee list item and adding to the favorite list 3:14:44 Updating functionality using set and produce methods 3:17:23 Using the splice method to remove an item from the favorite list. 3:22:43 Implementing dynamic item display based on type and index 3:25:44 Adding scroll view and customizing its properties 3:31:12 Setting up design elements with the required properties 3:34:42 Adding image background and setting up details screen. 3:41:01 Adding styles to the view for the coffee shop app 3:43:39 Handling navigation function and adding a toggle favorite feature in React Native app. 3:48:48 Building the view for displaying information in the app 3:51:39 Defining conditional styles based on the type of item 3:57:12 Styling the info container and inner container 4:00:26 Styling the user interface with font, container, and text adjustments. 4:06:23 Adjusting visual elements for proper alignment and appearance 4:09:18 Creating a state variable for conditional rendering 4:15:52 Creating a dynamic UI for a coffee shop app 4:18:40 Styling the container and setting price 4:24:21 Creating a payment footer component with props 4:27:17 Handling different functionalities for the payment component 4:33:07 Styling the price and pay button components 4:36:11 Implementing add to cart functionality 4:41:43 Adding items to the cart and implementing cart functionality. 4:44:42 Adding functionality to the home screen 4:50:10 Building functionality for the cart screen 4:52:35 Implement functions to increment and decrement item quantity in the coffee shop app using React Native 4:58:11 Logic of removing and decreasing quantities in a coffee shop app. 5:00:37 Implementing functions for removing and adding items to cart and order history list 5:05:29 Updating order history list based on conditions 5:07:58 Functional part of store completed, moving forward to card screen. 5:13:24 Completing the header setup with conditional rendering 5:15:52 Setting the style for the card container with Flex 1 5:22:34 Adding items inside the item container and mapping cart items 5:25:37 Conditionally render cart list and payment footer 5:31:29 Implementing card item display and layout customization based on data 5:34:51 Creating a linear gradient and styling the card item 5:41:19 Adding multiple sizes and changing styles for items. 5:44:28 Styling and layout configuration for the coffee shop app 5:50:29 Styling and positioning text elements 5:53:26 Creating and styling buttons and text in the app. 5:59:24 Creating multi-size and single layout for the app. 6:02:12 Customizing styles for the coffee shop app 6:08:00 Adding properties for layout design 6:11:12 Implementing store functions for card item quantity management. 6:16:38 Copying and pasting the detailed screen 6:19:21 Fixing spelling mistakes and initializing functions in the favorite list and details page. 6:26:59 Building components for the Coffee Shop App using React Native. 6:30:20 Implementing styling and properties 6:36:18 Building the payment screen for the coffee shop app. 6:40:04 Adding a scroll view and header container with styles 6:46:36 Creating and handling payment method component 6:49:47 Building the payment method component and adding styles. 6:56:06 Setting dynamic border color and other styles for the app components 6:59:39 Implementing payment functionality 7:05:36 Setting up payment screen and credit card view. 7:09:01 Creating styles for credit card details display 7:15:33 Formatting credit card details 7:18:29 Implementing font styles and alignment for credit card details 7:23:57 Conditional rendering of animation before navigating to history screen. 7:27:00 Setting up the container and animation for the coffee shop app using React Native 7:33:10 Setting up scroll view and styles for the container. 7:35:51 Creating and populating the order history screen. 7:41:24 Building order history card component 7:44:22 Setting up header and subtitle components with styles 7:50:26 Fixing syntax error in order history card component. 7:53:25 Building the UI for the order item card 7:59:40 Styling card elements for the coffee shop app. 8:02:48 Creating a table view component in React Native. 8:08:24 Designing layouts with borders and alignment in React Native 8:11:31 Designing the layout for the app 8:17:47 Creating a download button with proper styling and adding functionality for animation 8:20:53 Implementing timeout method for function execution and animation setup 8:25:59 Creating and customizing app logo and splash screen 8:28:28 Installing and configuring React Native Splash Screen package 8:33:21 Add splash screen to the app for successful loading 8:35:46 Customizing App Design and Icons 8:41:28 Build a Coffee House app with React Native 8:44:03 Coffee shop app completed using React Native
Thank you very much ❤, I have completed this project and gained lots of knowledge for building apps in react native, Thank you again for making this type of projects 👍
@@buildwithcodex Hello, please can you tell me how can i fix an issue i'm having when i'm creating a new React native project using this command : npx react-native CofeeShopApp, once I open the project I found that the project chooses Kotlin instead of Java as a backend! please do you know how to fix that ???
I wanted to build an apk for people to use , so it doesn't make sense building expo apps & publishing to expo store. I have really been searching a lot on building apps with react native cli & I found a perfect video. Thanks for the video & pls upload videos wrt cli only thus it makes you unique
you are too much, you rarely find this kind of contents on youtude, adding the figma makes it unique....thank you very much...i will help advertise your channel to my colleagues its really worth it. your channel worth more 1m subscribers
Thank you for making this amazing project tutorial for free, really appreciate it bro. Can you please tell me specification of your PC or just tell me how much ram are you using in it.
Hi! I'm looking forward to see the whole video and build the proyect to learn more about React Native development. Can you tell us which emulator do you use? Thanks!
The design of this app is brilliant !! i'm gonna try to build the app on my on to practice the concepts I learned from react and tailwind, after I finish the app is it okay to use it in my portfolio and give you credit for the design, if you're not ok with it i'm not gonna use it.👍🏿 and me as a junior developer do you think it's important to learn how to design web apps using tools like figma or should focus more on developing in this stage ?
"Hey, can you make a video about creating an app with Flutter? It's user-friendly, and your viewers could learn a lot. Maybe start with setting it up and adding features. What do you say?"
Really perfectly made UI. Great work with dedication. Could you make next app using redux toolkit and redux-persist combination please. and then one more offline first react native app please. Thanks
How rigorous would it be to incorporate a points-based rewards system with a DB connection do you imagine? With added features such as recognizing an existing customer based on their card details?
First of all, great work. But i have a question. You use React Navigation V6 in your repo and write in your App.tsx this: options={{animation: 'slide_from_bottom'}}. But in V6 whe don´t have this "options" for the Stack.Screen?! I´m confused.
Thank you very much for the useful and interesting explanation❤❤ I would like to inquire about whether there is a supplement to it by linking it to a database and how the request reaches the application manager
Thank you so much. Currently it's only Frontend Application. So everything is present in the app itself. I will bring a full stack development tutorial in future. Stay tuned for that.
Very nice and Very helpful video. Thank you so much bro. And also if its okay for you. What app or emulator are you using to test your mobile app>? Thanks again!
Because this looks good this not means it useful, peoples can use google pay instead of this app and they prefer manual menu then online. Still your content is wonderful thank you for sharing, i really appreciate
No. It's manually grouped and typed and not exported from figma at all. It's a lengthy process but if you do it once, then you can directly use it again in different projects as well.
actually I'm interested in knowing how much ram are you using in pc , because I hava 16 gb of ram but when I open emulater , vs code project and then browser then my laptop is crashing
In the HomeScreen the functiion getCategoryFromData the error that comes is : cannot read property 'length' of undefined, i.e some problem in data.length, what to do?
Hi, I'm facing an issue with Gradle while running a React Native project on Windows. The build fails with the following error: 'java.io.UncheckedIOException: Could not move temporary workspace to immutable location.' I've tried running the command prompt as an administrator, clearing the Gradle cache, and ensuring I have the correct permissions. Has anyone encountered this issue before or knows how to resolve it? Thanks!
Are you showing here the backend of the app as well? If not, can you please do full backend write to database, retrieve from database using something like MySQL? But not clouds please, we need to learn to use our own database servers
@@buildwithcodexhey, are you calling apis from your app, like is it posting and getting data from anywhere? if yes i would love to make the backend for it in spring boot and join them together to put in resume, but if not thn can you make some app similar to this just the frontend part coz i know nothing about react native or any frontend framework
@@Rajdweep No, there are no calls for the APIs, and it's not posting or getting the data from the server. All the Data is already present and created directly inside of the App itself (No Network Calls). Although I am planning to build a full stack Mobile App with the backend using Node and other Backend Tech as well. Stay Tuned for that. Meanwhile, you can have a look at the Tutorial and search how you can integrate Backend into the Zustand State Management. I hope this can help with your resume.
@@buildwithcodex okk np, please bring a frontend project with react native or something similar so that i can make backend for it and combine together to put in cv
@@buildwithcodex 3rm when you look at the system navigation area (the place that contains back button and the rest)for android emulator you would see that there is some default black color there unlike iOS that it simply changes to the color you set you navigation tabs
@@D_bugit I found this solution on stackoverflow stackoverflow.com/questions/45928061/change-navigation-bar-color . You can have a look and see if it is helpful. And these are the packages mentioned there, you can check them out as well. - www.npmjs.com/package/react-native-system-navigation-bar - www.npmjs.com/package/react-native-navbar-color - www.npmjs.com/package/react-native-navigation-bar-color
Hello, why did you use let spliceIndex = -1 at 3:19:06? Will there be a case that the id is not found, then would it splice the last item from the FavoritesList? I just did not understand the purpose of spliceIndex = -1. Thank you
Thank you so much for pointing this out. It's an error on my side. I meant to use it in this manner, where if there is no occurrence of the Item to remove then we will not remove anything but if we find one with the given ID then we will surely remove it. Because sometimes misfire happens and we have to keep in mind that it's asynchronous so we have to cross-check all condition and edge cases every time. correct statement => spliceIndex == -1 ? null : state.FavoritesList.splice(spliceIndex, 1);
It was all very smooth until you ask to clean the folder. cd android for some reason not working. it says cd: Can not find path because it does not exist. At line: 1 char:1 Do you know why this happened?
When I create a project, it outputs the Kotlin language, not the Java language. Can you help me create a project in java language?
Use this updated command to create project
- npx react-native init Coffee_Shop_App --version 0.72.4
@@buildwithcodexThank you very much
@@buildwithcodexplease come back brother, we are waiting for you, God bless you 🙏
God bless all the Indians programmers on UA-cam! Love you.
Thank you so much. Bless you too.
Honestly! Honestly!!!! These guys are life savers
@@aneneemmanuel7985 Thank you so much.
Adding the Figma file is very nice. with this we can now exactly what we are building
Yes, this helps a lot me too.
00:05 Build a coffee shop app using React Native
02:42 Exploring the details screen of the app
08:07 Building a Coffee House app using React Native CLI and setting up initial project
10:53 Dependencies for React Native coffee shop app
16:47 Configure app for portrait mode and install dependencies for React Native app development
19:19 Installing navigational and elemental dependencies for the app.
24:52 Adding required asset folders for the Coffee Shop App
27:37 Copying and pasting specific folders and files for project setup.
33:18 Setting up data, theme, and assets for the app
36:06 Setting up State Management Library folder
41:58 Creating six screens using React Native
45:42 Creating a stack Navigator and setting up a tab Navigator
52:12 Configuring Navigator options and tab bar style in React Native
55:28 Customize tab bar style and background blur in React Native app
1:01:19 Creating a store for coffee app data display
1:04:28 Creating and using a store in the coffee shop app
1:10:48 Understanding the structure of the data and extracting the categories
1:14:32 Creating a property and setting values in data
1:20:16 Adding styles and header to the Coffee Shop App using React Native
1:23:36 Creating and defining header bar props for the app.
1:30:04 Creating gradient backgrounds and profile picture in React Native
1:33:36 Adding basic properties and styles for the header component
1:39:43 Building custom search icon and text input in the app
1:42:37 Styling the text input and custom icon
1:48:43 Dynamically creating a list based on data size
1:51:17 Rendering different views based on index
1:57:08 Changing category and setting coffee list
1:59:46 Setting up Flat List and its properties
2:05:32 Configuring and handling properties for the coffee shop app
2:09:19 Adding background image to the coffee app
2:15:50 Styling and adding text, price, and button
2:18:43 Styling functional components in React Native
2:25:21 Styling and customizing various components in the Coffee Shop app
2:28:27 Building a card list with specific styling requirements.
2:34:18 Fixed scrolling and search functionality
2:36:58 Adding custom icon and functions
2:42:25 Implementing search and reset functionality for coffee list
2:44:58 Handling display of empty flat list
2:50:35 Creating functionality to add items to the cart.
2:53:07 Using the produce function from immer package for state manipulation.
2:58:44 Implement custom sort function based on item size for the cart list.
3:01:21 Updating or adding items to cart and calculating cart price in React Native app.
3:06:58 Calculating cart price and adding item to favorite list
3:09:36 Updating the coffee list item and adding to the favorite list
3:14:44 Updating functionality using set and produce methods
3:17:23 Using the splice method to remove an item from the favorite list.
3:22:43 Implementing dynamic item display based on type and index
3:25:44 Adding scroll view and customizing its properties
3:31:12 Setting up design elements with the required properties
3:34:42 Adding image background and setting up details screen.
3:41:01 Adding styles to the view for the coffee shop app
3:43:39 Handling navigation function and adding a toggle favorite feature in React Native app.
3:48:48 Building the view for displaying information in the app
3:51:39 Defining conditional styles based on the type of item
3:57:12 Styling the info container and inner container
4:00:26 Styling the user interface with font, container, and text adjustments.
4:06:23 Adjusting visual elements for proper alignment and appearance
4:09:18 Creating a state variable for conditional rendering
4:15:52 Creating a dynamic UI for a coffee shop app
4:18:40 Styling the container and setting price
4:24:21 Creating a payment footer component with props
4:27:17 Handling different functionalities for the payment component
4:33:07 Styling the price and pay button components
4:36:11 Implementing add to cart functionality
4:41:43 Adding items to the cart and implementing cart functionality.
4:44:42 Adding functionality to the home screen
4:50:10 Building functionality for the cart screen
4:52:35 Implement functions to increment and decrement item quantity in the coffee shop app using React Native
4:58:11 Logic of removing and decreasing quantities in a coffee shop app.
5:00:37 Implementing functions for removing and adding items to cart and order history list
5:05:29 Updating order history list based on conditions
5:07:58 Functional part of store completed, moving forward to card screen.
5:13:24 Completing the header setup with conditional rendering
5:15:52 Setting the style for the card container with Flex 1
5:22:34 Adding items inside the item container and mapping cart items
5:25:37 Conditionally render cart list and payment footer
5:31:29 Implementing card item display and layout customization based on data
5:34:51 Creating a linear gradient and styling the card item
5:41:19 Adding multiple sizes and changing styles for items.
5:44:28 Styling and layout configuration for the coffee shop app
5:50:29 Styling and positioning text elements
5:53:26 Creating and styling buttons and text in the app.
5:59:24 Creating multi-size and single layout for the app.
6:02:12 Customizing styles for the coffee shop app
6:08:00 Adding properties for layout design
6:11:12 Implementing store functions for card item quantity management.
6:16:38 Copying and pasting the detailed screen
6:19:21 Fixing spelling mistakes and initializing functions in the favorite list and details page.
6:26:59 Building components for the Coffee Shop App using React Native.
6:30:20 Implementing styling and properties
6:36:18 Building the payment screen for the coffee shop app.
6:40:04 Adding a scroll view and header container with styles
6:46:36 Creating and handling payment method component
6:49:47 Building the payment method component and adding styles.
6:56:06 Setting dynamic border color and other styles for the app components
6:59:39 Implementing payment functionality
7:05:36 Setting up payment screen and credit card view.
7:09:01 Creating styles for credit card details display
7:15:33 Formatting credit card details
7:18:29 Implementing font styles and alignment for credit card details
7:23:57 Conditional rendering of animation before navigating to history screen.
7:27:00 Setting up the container and animation for the coffee shop app using React Native
7:33:10 Setting up scroll view and styles for the container.
7:35:51 Creating and populating the order history screen.
7:41:24 Building order history card component
7:44:22 Setting up header and subtitle components with styles
7:50:26 Fixing syntax error in order history card component.
7:53:25 Building the UI for the order item card
7:59:40 Styling card elements for the coffee shop app.
8:02:48 Creating a table view component in React Native.
8:08:24 Designing layouts with borders and alignment in React Native
8:11:31 Designing the layout for the app
8:17:47 Creating a download button with proper styling and adding functionality for animation
8:20:53 Implementing timeout method for function execution and animation setup
8:25:59 Creating and customizing app logo and splash screen
8:28:28 Installing and configuring React Native Splash Screen package
8:33:21 Add splash screen to the app for successful loading
8:35:46 Customizing App Design and Icons
8:41:28 Build a Coffee House app with React Native
8:44:03 Coffee shop app completed using React Native
Wooow, this is one of the best react native project ever created on UA-cam ! thank you so much !
Thank you so much. And Happy Learning.
Very useful video, explained very well 🎉
Super design waouh
Real think lerson i see in my live very more video isso good i.m so mach keep continu maker this .
thank you for the most useful tutorial video and also for the provided doc,
Thanks.
indians are great
you are the only person that adds the figma design link...Thank you😇
Welcome.
Where is the fixma file?
@@maxping5660 Link to Figma Design - www.figma.com/file/RyVLhDKrymZhThABrSgzIK
Thanks for real React Native cli ❤
Beautiful Project, tanks a lot for guiding us through creating this wonderful app.
can you please make more video like this inwhich really help us ,again thanks alot
Please upload more ❤❤
This is great work man, bless you plus all the resources supplied
Thank you so much.
Well this one is great 👍 thanks for this looking forward to see more of such contents
Thank you so much. Stay Tuned, More content coming soon.
Now I am feeling confident while building the best project in react Native by CODEX. Thank you brother for creating such content
Well done Sir.
Thank you so much.
The best R.N. Project!
Thank you very much ❤, I have completed this project and gained lots of knowledge for building apps in react native,
Thank you again for making this type of projects 👍
Thank you so much. Happy Learning 🚀
@@buildwithcodex Hello, please can you tell me how can i fix an issue i'm having when i'm creating a new React native project using this command : npx react-native CofeeShopApp, once I open the project I found that the project chooses Kotlin instead of Java as a backend! please do you know how to fix that ???
I wanted to build an apk for people to use , so it doesn't make sense building expo apps & publishing to expo store. I have really been searching a lot on building apps with react native cli & I found a perfect video. Thanks for the video & pls upload videos wrt cli only thus it makes you unique
Thank you so much. Stay Tuned. Amazing projects coming soon.
thank for sharing!
Welcome.
This is the first time I watch your channel and I am impressed, I hope you make a big react native app with express js backend
Thank you so much. And Yes, Full-Stack Projects are on my list. Stay Tuned.
wow,
thanks.
Thank you for all the efforts!!
Welcome. Happy Learning.
nice thank you, liked and subscribed 👍
Welcome.
thank you so much. it's super awesome video.
Welcome, and Stay Tuned for More Such Content.
Great Tutor! subscribed!
Thank you so much.
Great Work.
Thank you.
This is amazing , it will be cool if you can implement the payment logic.
Thank you. Yes I am working on something which is more Full Stack. Stay Tuned for that.
Perfect
You should make more long videos like this. It will boost your views
Thanks.
great tut bro, keep going u deserve more subs
Thank you so much.
Eagerly waiting for next react native project❤
Stay Tuned, They are Coming Soon.
thanks, sir
Welcome.
Thanks you so much ❤
Welcome. Happy Learning 🚀
Great job Bro. I really like your work
Thank you so much.
This is a great video 🎉
Thank you so much.
Bro thanks for sharing.
Welcome.
I download this video ❤
Great video
Thank you so much.
you are too much, you rarely find this kind of contents on youtude, adding the figma makes it unique....thank you very much...i will help advertise your channel to my colleagues its really worth it. your channel worth more 1m subscribers
Thank you so much for these kind words. I really appreciate it. 💯
@@buildwithcodexdo you have videos on react.Js ?
great video, tks so much and I hope you can guide the account storage part in the sign in and login screen
Yeah Sure.
Cool
Waiting for more videos
Thank you for making this amazing project tutorial for free, really appreciate it bro.
Can you please tell me specification of your PC or just tell me how much ram are you using in it.
You're most welcome. Currently I have 16GB RAM, i7 8th Gen. Gonna upgrade soon.
@@buildwithcodex bro laptop use krte ho kya pc ??
Excelente 👏
Thank you so much. Happy Learning.
Thanks man i subbed , you worth more 1m sub
Great tutorial!!! Can you please explain the purpose of the selection.json file at 28:08
thank you so much since your video is very helping me to get technically skilled even i subscribe too
Thank you so much. I'm glad it helped. Happy Learning.
Hello bro
export const useCoffeeStore = create(
persist(
(set, get) => ({
CoffeeList: CoffeeData,
BeanList: BeansData,
CartPrice: 0,
FavoritesList: [],
CartList: [],
OrderHistoryList: [],
}),
{
name: 'coffee-app',
storage: createJSONStorage(() => AsyncStorage)
}
)
);
const CoffeeList = useCoffeeStore((state: any)=> state.CoffeeList);
console.log(CoffeeList.length). I am getting 0 when i tried accessing my CoffeeList on my HomeSrceen. Who has done this should help please.
This is too much sir, thanks for this you are the best!
Thank you so much. I appreciate that. Happy Learning.
great job bro
Thank you so much.
Thank you so much for this app buiding journey. I got to learn a lot.
Welcome.
Hello bro.
export const useCoffeeStore = create(
persist(
(set, get) => ({
CoffeeList: CoffeeData,
BeanList: BeansData,
CartPrice: 0,
FavoritesList: [],
CartList: [],
OrderHistoryList: [],
}),
{
name: 'coffee-app',
storage: createJSONStorage(() => AsyncStorage)
}
)
);
const CoffeeList = useCoffeeStore((state: any)=> state.CoffeeList);
console.log(CoffeeList.length). I am getting 0 when i tried accessing my CoffeeList on my HomeSrceen. Who has done this should help please.
Thanks
👍
Great tutor for beginners.. could you please share the video link of custom font and icon creation
Yes, I am going to drop that video soon. Stay Tuned.
Nice bro thanks for sharing your experience with us could you make with expo SDK 49 similar to this awesome design
Yes I am going to make some expo projects as well.
Hi! I'm looking forward to see the whole video and build the proyect to learn more about React Native development. Can you tell us which emulator do you use? Thanks!
One project without Expo. Finally. I like Expo, but not all projects are, or will be created with this.
The design of this app is brilliant !! i'm gonna try to build the app on my on to practice the concepts I learned from react and tailwind, after I finish the app is it okay to use it in my portfolio and give you credit for the design, if you're not ok with it i'm not gonna use it.👍🏿
and me as a junior developer do you think it's important to learn how to design web apps using tools like figma or should focus more on developing in this stage ?
Nice Tutorial, please tell us how to implemented Rest API in this project to fetch the data
Yeah Actually I am planning something for full stack. Stay Tuned.
"Hey, can you make a video about creating an app with Flutter? It's user-friendly, and your viewers could learn a lot. Maybe start with setting it up and adding features. What do you say?"
Thank you for this amazing tutorial. Can I follow along with plain React?
Welcome. Happy Learning.
Yes Plain React is enough to start and it is beginner friendly.
"Hey there! Can you please create a course on building React Native apps with WooCommerce API integration? It'd be super helpful! Thanks a bunch! 🙌"
Thank you so much, can u make a backend for this using mongodb and express
In this video, do you teach how to integrate a payment gateway API?
Amazing app, it could upgrade to a multivendor application? Any coffee shop can create their account and display there available coffee?
How did you get inspired to get such amazing design ?
Really perfectly made UI. Great work with dedication.
Could you make next app using redux toolkit and redux-persist combination please.
and then one more offline first react native app please.
Thanks
Thanks, And yes I am already making the next app with redux toolkit and redux persist. Stay Tuned. It's Coming very very soon.
I will migrate zustand to Redux toolkit
What's the point of developing in typescript and put : any everywhere???
How rigorous would it be to incorporate a points-based rewards system with a DB connection do you imagine? With added features such as recognizing an existing customer based on their card details?
First of all, great work. But i have a question. You use React Navigation V6 in your repo and write in your App.tsx this: options={{animation: 'slide_from_bottom'}}. But in V6 whe don´t have this "options" for the Stack.Screen?! I´m confused.
Thank you very much for the useful and interesting explanation❤❤
I would like to inquire about whether there is a supplement to it by linking it to a database and how the request reaches the application manager
Thank you so much. Currently it's only Frontend Application. So everything is present in the app itself. I will bring a full stack development tutorial in future. Stay tuned for that.
Thank you
Hello bro
export const useCoffeeStore = create(
persist(
(set, get) => ({
CoffeeList: CoffeeData,
BeanList: BeansData,
CartPrice: 0,
FavoritesList: [],
CartList: [],
OrderHistoryList: [],
}),
{
name: 'coffee-app',
storage: createJSONStorage(() => AsyncStorage)
}
)
);
const CoffeeList = useCoffeeStore((state: any)=> state.CoffeeList);
console.log(CoffeeList.length). I am getting 0 when i tried accessing my CoffeeList on my HomeSrceen. Who has done this should help please.
Very nice and Very helpful video. Thank you so much bro. And also if its okay for you. What app or emulator are you using to test your mobile app>? Thanks again!
Thank you so much. Android Emulator Pixel 6a API 33.
Because this looks good this not means it useful, peoples can use google pay instead of this app and they prefer manual menu then online.
Still your content is wonderful thank you for sharing, i really appreciate
Hi, thanks a lot for this video) I'm wondering how did you prepare theme.tsx with all properties? Did you export it from figma ?
No. It's manually grouped and typed and not exported from figma at all. It's a lengthy process but if you do it once, then you can directly use it again in different projects as well.
@@buildwithcodex thanks 🙏
can i get a video on how to setup andriod studio completely?
Hi, thanks for such a useful tutorial. I have a question, how much does an app like this costs?
I have request to make more on react native with Firebase and Nodejs plz sir
Yes, I will be making more than just Full Stack Projects. Exploring in-depth all the technologies. Stay Tuned.
Hi sir can u make multilanguage and light dark mode project with react native please
Loved your work I want to know more about this. can we conect
Yeah sure. Ping me on twitter.
Pinged already please check.
@@buildwithcodex
@@buildwithcodex hey You checkin your twitter??
I don't know javascript but i want to learn react native how much javascript is required to learn it. Or i chose flutter.
Any crash course on Javascript will help you get started with react native. This tutorial is beginner-friendly as well.
are you using a pc or laptop , and what are the specifications of it can you please tell me
actually I'm interested in knowing how much ram are you using in pc , because I hava 16 gb of ram but when I open emulater , vs code project and then browser then my laptop is crashing
Please do a video on how to build a apk file and also deploy in play store 🙏🏻🙏🏻
In the HomeScreen the functiion getCategoryFromData the error that comes is : cannot read property 'length' of undefined, i.e some problem in data.length, what to do?
@@sohamdwivedi6340 try to use data?.length to handle undefined value.. everywhere.
Does this have backend?
No
Hi, I'm facing an issue with Gradle while running a React Native project on Windows. The build fails with the following error: 'java.io.UncheckedIOException: Could not move temporary workspace to immutable location.' I've tried running the command prompt as an administrator, clearing the Gradle cache, and ensuring I have the correct permissions. Has anyone encountered this issue before or knows how to resolve it? Thanks!
Hiii bro..
Bro pls maintain playlist bro
Yes can you do it pls
Can you guide me to add login/signup to the app? Thank you .
Yeah Sure I can guide you on that. Join Discord Server - discord.com/invite/hf8YmsmNAD
I would be fantastic, a app fow Schools, for exemple, when a student receive good notes, he receives a bedget e etc... kkk
Bhaiya when will next video come?
Next Tutorial is coming very soon. A couple of weeks work is remaining. Stay tuned.
Are you showing here the backend of the app as well? If not, can you please do full backend write to database, retrieve from database using something like MySQL? But not clouds please, we need to learn to use our own database servers
Backend is not covered here. But I will be building Full Stack Apps as well. Stay Tuned.
@@buildwithcodexhey, are you calling apis from your app, like is it posting and getting data from anywhere? if yes i would love to make the backend for it in spring boot and join them together to put in resume, but if not thn can you make some app similar to this just the frontend part coz i know nothing about react native or any frontend framework
@@Rajdweep No, there are no calls for the APIs, and it's not posting or getting the data from the server. All the Data is already present and created directly inside of the App itself (No Network Calls). Although I am planning to build a full stack Mobile App with the backend using Node and other Backend Tech as well. Stay Tuned for that. Meanwhile, you can have a look at the Tutorial and search how you can integrate Backend into the Zustand State Management. I hope this can help with your resume.
@@buildwithcodex okk np, please bring a frontend project with react native or something similar so that i can make backend for it and combine together to put in cv
@@Rajdweep Yes, I will make full stack projects in such fashion that if you wish you can create your custom backend in your desired TechStack.
more on typescript
Yes. Stay turned.
I know this is a bare react native project but can i follow along using expo?
Yeah sure you can follow along. But some of the package might not work directly. In those cases you may have to look for their expo implementation.
Okay thanks, I tried reaching out to you on twitter but I'm unable to. Do you have an instagram?
@@buildwithcodex
Hey! I am new ro React Native. Can I build this project using expo instead of react native CLI?
can you try to get rid of the black color on the system navigation area i was told we have a package to do that but i cant find the type
Can you add the time stamp of that black color on the system navigation area, so that I can understand that more clearly.
@@buildwithcodex 3rm when you look at the system navigation area (the place that contains back button and the rest)for android emulator you would see that there is some default black color there unlike iOS that it simply changes to the color you set you navigation tabs
@@D_bugit I found this solution on stackoverflow stackoverflow.com/questions/45928061/change-navigation-bar-color . You can have a look and see if it is helpful. And these are the packages mentioned there, you can check them out as well.
- www.npmjs.com/package/react-native-system-navigation-bar
- www.npmjs.com/package/react-native-navbar-color
- www.npmjs.com/package/react-native-navigation-bar-color
@@buildwithcodex thank you🙂🙂
19:54
Hello, why did you use let spliceIndex = -1 at 3:19:06? Will there be a case that the id is not found, then would it splice the last item from the FavoritesList? I just did not understand the purpose of spliceIndex = -1. Thank you
Thank you so much for pointing this out. It's an error on my side. I meant to use it in this manner, where if there is no occurrence of the Item to remove then we will not remove anything but if we find one with the given ID then we will surely remove it. Because sometimes misfire happens and we have to keep in mind that it's asynchronous so we have to cross-check all condition and edge cases every time.
correct statement => spliceIndex == -1 ? null : state.FavoritesList.splice(spliceIndex, 1);
It was all very smooth until you ask to clean the folder. cd android for some reason not working. it says cd: Can not find path because it does not exist. At line: 1 char:1 Do you know why this happened?
@@SGTrader check list of files and folder with command ls. Then navigate