Hey Sonny, appreciate your hardwork man. This build is insane 🔥. I've been following you and your projects from 2020 and from building Whatsapp clone with Reactjs CSS and firebase to all these new projects with Nextjs, React Native, Stepzen, GraphQL and many more you have come a long way and the best part of that is you carried us with you. Thankyou for the value and knowledge you are providing through these live streams....💯💯and also I got a job because of you as a React Native Developer❤😃
At 1:35:48 you forgot to include transforms as part of the type query get Orders: [OrderList]@rest(transforms: [{ pathpattern: [], editor: "objectToArray" }])}
Hey Sonny new dev & sub here. Thank you for sharing your knowledge. Starting out with the backend first has made things make more sense now. Im finished with the tutorial & the app is lit! I got the repo pack off u recently. Imo you got some of the best tutorials in the game. Keep up the great work & energy!
is is amazing! We are also going to go ahead and break the world record for saying "go ahead" the most times in a single stream! In all seriousness you are awesome and ths is much appreciated. Go ahead and get it done guys!
Intro sounds like a nice EDM-Radio-Stream haha instantly good nice party vibes like it is weekend hahaha and it is the first day of the week. Thanks for that 😎 and for the video of course too
at 1:35:46 it was not the naming which was off, the @materializer directive expected "query" instead of "name". It should be like this: @materializer( query: "getTrackingItemsById" arguments: [{name: "id", field: "trackingId"}] ) If you use VSCode and add the following to your VSCode Settings: "tailwindCSS.classAttributes": [ "class", "className", "ngClass", "style", "containerStyle" ], You can have intellisense for TailwindCSS classes inside of style or containerStyle attributes in react-native using tailwind-rn. Assuming that the Tailwind CSS Intellisense Extension is installed. Maybe that helps :)
at 2:23:15 if you want to search irrespective of case sensitive means insensitive includes checks if the lowercase version of the array element contains the lowercase version of the input...👇👇👇👇 filter((customer: CustomerList) => customer.value.name.toLocaleLowerCase().includes(input.toLocaleLowerCase()) )
you might get an issue while rendering the card if you just blindly copy the useOrders hook in useCustomer hook You might probably make mistakes in customer hooks
Hey Sonny loving this build getting through it well half of it anyway. I notice snippets pop up during you typing out what extension? is that thanks Neill
dude, you're @ the ↑. Love the videos and love the presentation. You r amazing. what amazes me is that i always Learn new things and new ways. i never think that would be possible. but You've done it. AMAZING.
Funny because i did in the i-phone simulator and everything works perfectly , and when i try on my android device , the cards , map ,etc is missing , my question is why ?
Yeah my guys i can't get it to map data on customer screen even though i folled the steps in queries theough to hooks . Any help would be appreciated 👍
hi Sonny， thanks for the great video，I use expo command line to package APK，the question is How to package APK to my own computer instead of expo platform ？
stepzen import curl is throwing the error A problem occurred while processing your import. Please check that the given curl command is valid. The StepZen introspection service has timed out.
Does anyone complete that project 2:15:00 customer card didn't render even i used machine ip and localhost and main url it does not it did not fetch the data
In the CustomerScreen at const {loading, error, data} = useQuery(GET_CUSTOMERS); I got an undefined. The interesting fact is that in the playground the query returned the needed props but in runtime it gave me an undefined. Does it know somebody how can I solve it?
For who is struggling with this problem I would say that this error appears when you are using Android emulator. The emulator will not know what is a localhost. You only need to use you ip address instead and it will work
Change the localhost in ApolloClient connection. Example: const client = new ApolloClient({ uri: '192.168.100.101:5001/api/aged-gnat', cache: new InMemoryCache(), });
I never understand how you know all these external types, from where to import, when to use,... That's the part of typescript that I am not really getting. For example at 1:10:09 => Line 14 - 17. Can someone help me on when/how to know what to use? 🙏
I have problems with CORS: has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. How can I solve this problem Sonny?
Hello! Thanks for knowledge sharing. Can you please explain which tailwind react native library you like and why? i.e. twrnc, NativeWind and tailwind-rn.
Sonny i really like React Native, and all your tuts was helped me. But, in indonesia so many job using flutter. Do i need to learn Flutter? Or React Native is enough
Also gutted this uses local api address so cant be deployed or used outside of house to show, have to be logged into your computer to get the graphQL database stuff working in the app.
Problem: Network request failed Everything was perfect, until I install apollo. I did all configuration, my stepzen in working well, but the data is not showing - 2h15m. I am using iPhone and Expo app. did you guys have similar problem? I tried to reinstall apollo, restart several times...nothing
I tried diferent approachs - reinstalling Apollo, looking at the documentation - didn't find the solution. The information is not been passed through Apollo, but stepzen is working.
but enjoyed the build anyway. got to about 90% hate leaving code unfinished but will come back to this as bit bored of it to be honest. need to do something fresh.
I can't render the data 2:15:00. When I try to enter my API url after starting the stepzen service the following appears: {"errors":[{"message":"401 Unauthorized: missing or not allowed","code":401}]}. console.log(data) return undefined.
I don't get how people are not distracted by music. I mean, dude is talking, and the music is playing.. wtf? I mean everyone can open another tab and play their own music..
This is awesome!!!!! I have a question as a designer when you change the font of the app does it affect native elements like the navigation bar and alerts or it stays in SF pro font, especially the nav bar. thanks
Please I am facing the same issue here, is there a way anyone can assist me. (Your local schema has the following GraphQL errors: Error: Unknown type "TrackingItems".) this is the error message i keep getting.
Can you do a video without Expo please? And also dont use npx, install everything with npm and create every file and directory from scratch is way better. You wont have files, folders and libraries you dont need!
Was kinda excited to learn native until I made it midway through this video. Like bruh, I am trying to learn native, an hour and 40 mins in and most of the content is about random junk like stepzen, firebase, graphql, tailwind and icons.
@@konrad50023 I'm gonna prove that, because it's weird. But also, it doesn't show me anything If console.log(data) either. I'll change the apollo uri as you said, thanks 🙌🏻
I'm stuck on getting customer cards to render any ideas? i thought it was apollo just not getting data but console logged inside the map and it shows the correct info but the card will refuse to render
I'm in the same boat. The app will load and while populating the cards, I get render error - undefined is not an object it's pointing to useCustomerOrders.tsx line with the code (order) => order.trackingItems.customer_id === userId. I'm searching online and it seems like the predicate "order" is not defined and causing the render issue.
@@nicholasbazzoni7084 Hi, I had the same problem, in my case it was simply because I was typing the getcustomers query in queries file as JSON instead of an array of Custemers List :)
cheers for the build Sonny! different to your others, only complaint. Few things dont work on android! SHADOW Effects!, header title in deliveries card screen wont display DELIVERIES IN PINK, and the main one for me FULLWIDTH doesnt work on android just displays the same blue card. What i will have to do is just implement the deliverycard screen to create a screen with the data in full width and maybe change the information and display a different screen as looks way too similar to the customers screen. Really dissapointed what works on IOS doesnt work on ANDROID? i thought react native would eliminate all the hassle of developing on both platforms but keep coming across bugs and problems. Sure this works fine on IOS but deploying this to a store would'nt work on android 100%. gutted. cant believe fullWidth? doesnt work! and its not worth my time trying to figure out how to fix it, when i can just build the delivery Card screen to render what i want? and not doctor the card? annoyed IOS / ANDROID so niggly! really gutted. but enjoyed the build anyway. got to about 90% hate leaving code unfinished but will come back to this as bit bored of it to be honest. need to do something fresh. thanks anyway sonny.
YEAH!! Perfect stream 🚀
wooo stepzen!!!
you guys are awesome and helped me so much!!!
@@beastnighttv Thank you! What are you building?
Hey Sonny, appreciate your hardwork man. This build is insane 🔥. I've been following you and your projects from 2020 and from building Whatsapp clone with Reactjs CSS and firebase to all these new projects with Nextjs, React Native, Stepzen, GraphQL and many more you have come a long way and the best part of that is you carried us with you. Thankyou for the value and knowledge you are providing through these live streams....💯💯and also I got a job because of you as a React Native Developer❤😃
This was great to practice Navigation with TypeScript and GraphQL with StepZen! I built along!!
Are you complete this project???
@@hubesh716 sure! it's finished and looking great
@@SuperYoda7 okay plz share your instgram handle i want to connect you thanks
@@SuperYoda7 hi can you listen me?
@@hubesh716 can we chat on discord?
At 1:35:48 you forgot to include transforms as part of the type query get Orders: [OrderList]@rest(transforms: [{ pathpattern: [], editor: "objectToArray" }])}
please do more of react native projects in TS . YOU'RE AMAZING
Hey Sonny new dev & sub here. Thank you for sharing your knowledge. Starting out with the backend first has made things make more sense now. Im finished with the tutorial & the app is lit! I got the repo pack off u recently. Imo you got some of the best tutorials in the game. Keep up the great work & energy!
is your app running fine?
@@SuperYoda7 yes everything works.
did not even know you could use tailwind for react native this makes everything so much easier
is is amazing! We are also going to go ahead and break the world record for saying "go ahead" the most times in a single stream! In all seriousness you are awesome and ths is much appreciated. Go ahead and get it done guys!
Hahahaha I’m sorry il try to shift the habit I’m glad you enjoyed the content though! It’s autonomous after all certain point🤣
Intro sounds like a nice EDM-Radio-Stream haha instantly good nice party vibes like it is weekend hahaha and it is the first day of the week. Thanks for that 😎 and for the video of course too
You energy and charming face alone can serve as a motivational factor!
You should consider deployment part as well.
I finished this project, Thank You very much!!!.
sir can you help me??
Sonny Really always kills it👌What a legend.
would love to see push notifications (with attached data to be used when its clicked upon) in one of these builds utilizing expo-server-sdk-node
amazing build, but i suggest using "nativewind" instead of "tailwind-rn"
I did what you did but I can't fetch getCustomers data
Great build. This is my first react native project
Hi Sonny, I appreciate your hardwork as I have learnt so much from your videos.
You are great. 👍👍
Waiting for some more React Native Builds.
Helped me a lot to learn many different technologies in just a few hours.
Oke bos tengkiu terimakasih bayak kita jowin aja dulu ikutin perjalanan nya dan lihat cara kerjanya 👍🙏
I would love to learn about Microservices architecture from you, Sonny!
at 1:35:46 it was not the naming which was off, the @materializer directive expected "query" instead of "name". It should be like this:
@materializer(
query: "getTrackingItemsById"
arguments: [{name: "id", field: "trackingId"}]
)
If you use VSCode and add the following to your VSCode Settings:
"tailwindCSS.classAttributes": [
"class",
"className",
"ngClass",
"style",
"containerStyle"
],
You can have intellisense for TailwindCSS classes inside of style or containerStyle attributes in react-native using tailwind-rn. Assuming that the Tailwind CSS Intellisense Extension is installed. Maybe that helps :)
Again !! World Class project ! 😍
Thank you!!
did you finished the project as i need help regarding this build
at 2:23:15 if you want to search irrespective of case sensitive means insensitive includes checks if the lowercase version of the array element contains the lowercase version of the input...👇👇👇👇
filter((customer: CustomerList) => customer.value.name.toLocaleLowerCase().includes(input.toLocaleLowerCase()) )
And by the if an app gets way more reads than writes its better to use realtime database as it would cost 2 times lesser than firestore
Hi from Spain LOVE YOU ENERGY
🙏🏽🔥
What are the benefits of using Stepzen and all those tools in between, and not using the tools provided by Firebase?
You're a legend bro
you might get an issue while rendering the card if you just blindly copy the useOrders hook in useCustomer hook You might probably make mistakes in customer hooks
If anyone knows why the data is fetched but the DeliveryCard are not rendered ??? in the web version it renders but not on my iphone ://
Hey, bro, did you solve this issue ? i just have the same problem
@@maximkireenkov7867 I have the same problem bro
Hey Sonny loving this build getting through it well half of it anyway. I notice snippets pop up during you typing out what extension? is that thanks Neill
search for ES7 snippets
dude, you're @ the ↑. Love the videos and love the presentation. You r amazing. what amazes me is that i always Learn new things and new ways. i never think that would be possible. but You've done it. AMAZING.
Awh thank you so much bud!!! That’s what the PAPAFAM is all about!
@@SonnySangha ❤❤
sonny thanks great tutorial you got i like it even more than brad traversy
Thank you Sonny. What you have done here is so mush time and work into. Appreciate you my guy
Thank you so much!! #PAPAFAM
YEAHH, you are amazing, bruh
Funny because i did in the i-phone simulator and everything works perfectly , and when i try on my android device , the cards , map ,etc is missing , my question is why ?
Nice video, well done, thanks :)
Great! I'll watch it tomorrow.
What is the name of the map? Do you use Google maps?
Yeah my guys i can't get it to map data on customer screen even though i folled the steps in queries theough to hooks . Any help would be appreciated 👍
hi Sonny， thanks for the great video，I use expo command line to package APK，the question is How to package APK to my own computer instead of expo platform ？
stepzen import curl is throwing the error A problem occurred while processing your import.
Please check that the given curl command is valid.
The StepZen introspection service has timed out.
fantastic vidéo ! thanks 👌👌👌👌
KeyboardAvoidingView does not pop up the keyboard in IPHONE 14 simulator..That is weird
when you run it in an actual device, the keyboard keeping coming up and hiding the content and also it doesn't disappear.
This is such a good content!
did you finished the project as i need help
Does anyone complete that project 2:15:00 customer card didn't render even i used machine ip and localhost and main url it does not it did not fetch the data
Sonny literally does the best content for React JS and React Native development what a top G 😎😎😎😎
In the CustomerScreen at const {loading, error, data} = useQuery(GET_CUSTOMERS); I got an undefined. The interesting fact is that in the playground the query returned the needed props but in runtime it gave me an undefined. Does it know somebody how can I solve it?
For who is struggling with this problem I would say that this error appears when you are using Android emulator. The emulator will not know what is a localhost. You only need to use you ip address instead and it will work
@@sbcs3023 hey i got the same issue can you explain the solution
@@sbcs3023 please reply ASAP
Change the localhost in ApolloClient connection.
Example:
const client = new ApolloClient({
uri: '192.168.100.101:5001/api/aged-gnat',
cache: new InMemoryCache(),
});
@@raymundfc Appreciate it, mate.
Hi Sonny, please what extension you using that shows the color picker on your react native code?
graphql throws errors that it can only be defined once... it is only defined once
I never understand how you know all these external types, from where to import, when to use,... That's the part of typescript that I am not really getting. For example at 1:10:09 => Line 14 - 17. Can someone help me on when/how to know what to use? 🙏
I have problems with CORS:
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
How can I solve this problem Sonny?
Hello! Thanks for knowledge sharing. Can you please explain which tailwind react native library you like and why? i.e. twrnc, NativeWind and tailwind-rn.
Hats of to you & your hard work 💜
how to use mySql instead of graphQL???
i want to use mySQL..please help me!!!
Sonny which css framework you using a lot ?
Sonny i really like React Native, and all your tuts was helped me. But, in indonesia so many job using flutter. Do i need to learn Flutter? Or React Native is enough
Sonny what your thoughts on ionic react?
I dont know where I did mistake by but my getTrackingItems pulls customer data as null
extra transform on getTrackingItemById or getCustomerById was doing this.I forgot where did I remove after removing transform :D Fixed
Also gutted this uses local api address so cant be deployed or used outside of house to show, have to be logged into your computer to get the graphQL database stuff working in the app.
Problem: Network request failed
Everything was perfect, until I install apollo. I did all configuration, my stepzen in working well, but the data is not showing - 2h15m. I am using iPhone and Expo app. did you guys have similar problem? I tried to reinstall apollo, restart several times...nothing
Same issue.... can’t get the data at the frontend and stepzen is working fine
@@oluwabukolahezekiah4198 find a solution ?
@@nicholasbazzoni7084 can’t find the solution
Same problem here. Can't find solution yet.
I tried diferent approachs - reinstalling Apollo, looking at the documentation - didn't find the solution. The information is not been passed through Apollo, but stepzen is working.
I got unsupported tailwind class, Can anyone help on this?
but enjoyed the build anyway. got to about 90% hate leaving code unfinished but will come back to this as bit bored of it to be honest. need to do something fresh.
Brother i love see your all the video, please today my request, please build a talabat apps, please
On the video at 1:20:20 how do you get that layout on the browser?
If anyone is stuck with the same I worked this being newby just add the chrome json extension
Do anyone have idea of deployment of this build? I want to deploy it.
I can't render the data 2:15:00. When I try to enter my API url after starting the stepzen service the following appears: {"errors":[{"message":"401 Unauthorized: missing or not allowed","code":401}]}.
console.log(data) return undefined.
u have to pass the Authorization header to the client in the ApolloClient, which is "Authorization" = "APIKey $(stepzen whoami --apikey)"
Hi, I have the same problem and I did it but, still not working. any ideas ?
how can i get your song playlist
Great Great Great
Whats the intro song?
I don't get how people are not distracted by music. I mean, dude is talking, and the music is playing.. wtf? I mean everyone can open another tab and play their own music..
this tailwind is so slow man, it makes me crazy
can anyone complete this project
I swear, MatPat is gonna be the only person in the world that will not be disappointed by this game once it comes out. It's gonna be so fun to watch
This is awesome!!!!! I have a question as a designer when you change the font of the app does it affect native elements like the navigation bar and alerts or it stays in SF pro font, especially the nav bar. thanks
1:35 trackingItems: TrackingItems error: Unknown type ???? Please save me
Same here i am stuck in it can any one help it out
Please I am facing the same issue here, is there a way anyone can assist me. (Your local schema has the following GraphQL errors:
Error: Unknown type "TrackingItems".) this is the error message i keep getting.
Can you do a video without Expo please?
And also dont use npx, install everything with npm and create every file and directory from scratch is way better. You wont have files, folders and libraries you dont need!
Was kinda excited to learn native until I made it midway through this video. Like bruh, I am trying to learn native, an hour and 40 mins in and most of the content is about random junk like stepzen, firebase, graphql, tailwind and icons.
An idea is to make a bank app.
Anyone have trouble rendering the customer card on the customer screen. I’m not getting any errors but also not rendering anything
It happens me the same thing, it's not rendering the customer card, but the error I printed just to make me sure says "Network request failed"
wrap the customercard in a return fixed it for me
@@lmartinez2001 Change the uri to apollo to your machines ip should fix it
@@konrad50023 I'm gonna prove that, because it's weird. But also, it doesn't show me anything If console.log(data) either. I'll change the apollo uri as you said, thanks 🙌🏻
@@konrad50023 interesting can you provide a snippet ?
100e 😊e or pp
28K
love you work, huge fun
I'm stuck on getting customer cards to render any ideas? i thought it was apollo just not getting data but console logged inside the map and it shows the correct info but the card will refuse to render
I'm in the same boat. The app will load and while populating the cards, I get render error - undefined is not an object it's pointing to useCustomerOrders.tsx line with the code (order) => order.trackingItems.customer_id === userId. I'm searching online and it seems like the predicate "order" is not defined and causing the render issue.
I saw your reply below and wrapped it in a return function and still had the issue.
@@rollymagno698 rewatching this video now while I'm learning some React Native. Did someone found this?
@@rollymagno698 ever find a solution?
@@nicholasbazzoni7084 Hi, I had the same problem, in my case it was simply because I was typing the getcustomers query in queries file as JSON instead of an array of Custemers List :)
❤️❤️❤️❤️
First
716
sounds are too annoying.
Bro do one thing stop this podcast and make tutorial to give chance other to learn.
No?
hhmm
cheers for the build Sonny! different to your others, only complaint. Few things dont work on android! SHADOW Effects!, header title in deliveries card screen wont display DELIVERIES IN PINK, and the main one for me FULLWIDTH doesnt work on android just displays the same blue card. What i will have to do is just implement the deliverycard screen to create a screen with the data in full width and maybe change the information and display a different screen as looks way too similar to the customers screen.
Really dissapointed what works on IOS doesnt work on ANDROID? i thought react native would eliminate all the hassle of developing on both platforms but keep coming across bugs and problems. Sure this works fine on IOS but deploying this to a store would'nt work on android 100%. gutted. cant believe fullWidth? doesnt work! and its not worth my time trying to figure out how to fix it, when i can just build the delivery Card screen to render what i want? and not doctor the card? annoyed IOS / ANDROID so niggly! really gutted. but enjoyed the build anyway. got to about 90% hate leaving code unfinished but will come back to this as bit bored of it to be honest. need to do something fresh. thanks anyway sonny.
33716
If anyone has issues using tailwind, here is a walkthrough: stackoverflow.com/questions/71600495/why-is-my-tailwind-ract-native-not-working
29K