🔴 Build Movie App Using React Native | React Native Projects | Beginners
Vložit
- čas přidán 12. 06. 2024
- Hello everyone 👋, today we are going to make a fully functional & responsive movie app with react native using moviedb api, In this project you can browse trending, upcoming and top rated movies, you can see the details of a movie and the cast person, and you can even search any movie you want plus many more cool features. after this video you will be able to create professional apps like this one. so sit back and relax, grab some snacks and enjoy the tutorial.
make sure you like this video and subscribe the channel for more react native videos.
🚀 Source Code: links.codewithnomi.com/movie-app
Add TailwindCSS in React Native : • Food Delivery App with...
Add Navigation in React Native : • Food Delivery App with...
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/syednoman
🚨 more videos on react native:
Food Recipe App with Reanimated : • 🔴 Build Food Recipe Ap...
Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Travel App UI : • 🔴 Travel App UI | Reac...
Weather App : • 🔴 Build Weather App Us...
Coffee App UI : • 🔴 Coffee App UI - Reac...
Food Delivery App : • 🔴 Build Food Delivery ...
CZcams Clone App: • 🔴 CZcams Clone - Reac...
Login | SignUp UI : • 🔴 Login | SignUp UI - ...
Fast Food App : • 🔴 Fast Food App UI - R...
App Store UI : • 🔴 App Store UI - React...
Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
Firebase Authentication React Native: • React Native Firebase ...
Food Delivery App : • Food Delivery App with...
Learn React Native: • Build Expensify App Wi...
Learn Reactjs: • Modern React For Begin...
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
movie app in react native
react native movie app
imdb clone
movie app
▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Intro
03:08 - Home Screen UI
17:48 - Movie Screen UI
34:48 - Person Screen UI
44:36 - Search Screen UI
52:46 - Loading Screen
56:41 - TheMovieDB API
57:55 - Movie List API
01:09:33 - Movie Details API
01:20:42 - Person Details API
01:28:28 - Movie Search API
01:34:43 - Final Demo
More cool react native projects: 👇
🔴AI Voice Assistant with ChatGPT & DALL-E : czcams.com/video/nf3t5p2a5Dg/video.html
🔴Onboarding UI with Lottie Animations: czcams.com/video/4-GKgqIUBNo/video.html
🔴Build Weather App : czcams.com/video/953vyZMO4cM/video.html
🔴Build Food Delivery App : czcams.com/video/v-zxqkz1T8E/video.html
🔴CZcams Clone App: czcams.com/video/AVovt3gFmsg/video.html
🔴Coffee App : czcams.com/video/mhyuMy4aI-M/video.html
🔴Login | SignUp UI : czcams.com/video/RhF4iUCiwSs/video.html
🔴Fast Food App : czcams.com/video/x5hX06YdRvI/video.html
🔴App Store UI : czcams.com/video/Wp6JtHj4lyM/video.html
🔴Fruit Shop UI : czcams.com/video/UwW__s37agw/video.html
Keep it up bro ! This is a great tutorial, i love the way you manage all the fetch function in one place
I’m so grateful with all of your video, thank you to share us a lot of inspiration🎉🎉 I will be working on my app also your app are super cools…🥺🥺🥺 hopefully I could do closely to what you done thank😎😎
Great video thanks!!
what an awesome tutorial, i had never done anything in react native or tailwind and this was perfectly done and super clear, thank you so much
Thank you
Thanks bro it was wonderful ❤
Thank you ❤
Learn a lot from you Sir
Well done ❤ 🎉
Jaise mern stack me node js, express js and mongo use krte backend ke liye. React native me backend and data base ke liye kya use krte.
best react-native explanation taht I have seen . thnx you so much
Glad it was helpful!
Great job. Just completed this. Although you did not create the 'see all' screen, its still a good app. I'm very grateful
thanks
❤Thank you so much sir ✌️
React cli with typescript could be super useful 😁
Looking forward for those videos 😇
will do one day
Hi, I recently subscribed to your channel and I find your content really interesting and useful. I wanted to know if you could make a video on the configuration of a react native project and also on the installation of TailwindCSS in the project. Because personally I use an expo router configuration and I have difficulty integrating TailwindCSS. Thanks 👍
you should check this playlist:
Build Expensify App With React Native: czcams.com/play/PLKWMD009Q4qTGuqXxRq51f8OoDaIoJ1yo.html
Hey dude, love your work. Can you please set up a working snack please?
Hey it looks great futher we can do redux toolkit integration and also little bit optimize .The UI looks clean and good
Wow great tutorial! You're making the world a better place!
Hi Nomi: Question:
So im at the MovieScreen part around 21:00 and trying to get the icons to show on my android but it isnt working. Even with the "topMargin" android workaround nothing is showing for me. What to do. Im on a Samsung galaxy A52 at 6.4'' screen size. Why isnt it working.
can i follow this playlist if i am learning and working in react-native CLI rather expo ?
bro, a project would be great, using zustand, react query, expo-router among others, greetings from Cuba
Just wow
Great content man 🎉
Greetings from Ghana 🇬🇭
thank you 😊
@@codewithnomi how can I reach out to you. I also create react native contents
@@SonnyTechAcademy let's connect on Instagram
instagram.com/codewithnomi_?igshid=ZDc4ODBmNjlmNQ==
Just subscribed your channel, great content 👌
@@codewithnomi thank youu sir
@@codewithnomi will follow and text you ASAP
Thanks sir❤
Thank You
Hello Sir My Application is working fine locally in Expo Go but crashing on Startup after Expo build (buildType: apk)
when i create an expo app i got a different filles structure with no app.js file and all the files with a "tsx" extension why ??
Cool video.please how do we get the actual movies for streaming?
images fetched from api not display on android Emulator and device. but display correctly on web. how to fix this problem??
hey man please help , i got this problem when i try to do npm start , Logs for your project will appear below. Press Ctrl+C to exit.
Android Bundling complete 3837ms
ERROR TypeError: Cannot read property 'number' of undefined, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
Very cool project and video, congrats! A pity not to use typescript.
I want to move from js to ts 🥲
@@codewithnomi it will be amazing!
Hi Nomi, i have to say this is a great tutorial and you are a very clear and good instructor. im wondering if its possible to contact you somehow for help (if you are willing), i tried to use your git repo and also watching the video, but something just doesnt work and i dont know what or why
you can contact me on email or Instagram 😃
Hi bro, can you implement sports fantasy app like dream 11 or team 11
this all is good but wy can't we use react-navigations(native-stack)
I can't use NaviteWind with React Native expo app ? what's the problem here ?
Sir, or anyone else, can you tell me which version of React Native and Expo are you using, because I don't have App.js file.. Thank you in advance! :D
👏👏
Hello, I love so much your contents and your channel, can you give me the names of vs code extensions that u are using for react developing?
Thank you
here are the extensions:
- Auto Rename Tag
- ES7+ React/Redux/React-Native snippets
- Prettier - Code formatter
- Simple React Snippets
- Tailwind CSS IntelliSense
Amazing tutorial. Baray bhai thori speed halki, saath type karna mushkil hota hai 😆
sure 😅
You gave us aweosme videos and projects but could you build a large scale project like e commerce app with mern stack with typescript please
will do one day 😉
Beautiful work man! Will flutter version be smoother?
i think so
Great content, can you create a video using expo router ?
sure, will give it a try 😉
How to install tailwind on react native?
Hello @Nomi thanks for this helpful tutorial but man you didnt benefit from many React Native properties and components for example in the movie name
1- trimming '....' you can define the width for the text(you already did defining the width as percentage of screen ) and use properites for
ellipsizeMode="tail" and numberOfLines={1} (or whatever number of lines you want if you need the text to wrap)
2- you are using data.map instead of flatlists that will make the needed but many things are predefined and ready for you to use (pagination , on end reach .... ) so for me i found it easy to follow up with the tutorial but i would have liked you to focus on react native components properties more !
I'm still learning react native 😅
If I knew the ellipsizeMode option before that would've been helpful !!
I'll try using these next time 😉
Thank you ❤️
Most welcome i liked your explanation very much everything was perfect except this point i think adding this to your explanation will make your tutorials the best i have ever watched explaining react native @@codewithnomi
what I need to install for using className for styling
You need to setup nativewind
czcams.com/video/_Z33DTn0ZFo/video.html
Every time I write code and then save. Following error always shows. ERROR Error: Got an invalid value for 'component' prop for the screen 'Movie'. It must be a valid React Component. Its so annoying. Any fix? its on android.
Make sure you default export the component
Sir ek playlist bnaien React Native per jis mien ap react native k concept cover krien Just link sir asif taj Flutter Bootcamp
Hey could you make a video in which u explain about KeyboardAvoidanceView.😇
will do
Is it showing black fill in case of loading screen in andriod devices can please , solution of this .
not sure why it is showing like this, try setting a transparent background color for the loading screen.
Can we play a movie with this app?
I bought the project, but there is no Expo Go option when I give npm start, why?
When you start the project a QR code will show, scan it to run the app on your phone using expo go app
@@codewithnomi But the expo Go function doesn't even appear
Hi ,I have a problem.
r
Logs for your project will appear below. Press Ctrl+C to exit. code in your editor
› Reloading apps
warn No apps connected. mands
Sending "reload" to all
React Native apps failedll appear below. Press Ctrl+C to exit. . Make sure your app is
running in the simulatorSending "reload" to all React Native apps fail or on a phone connecteds running in the simulator or on a phone conne via USB. I can not solve this problem. Can you help me?
close the server and simulator and try running the project again
I tried a lot still didn't work. Do you have any other solutions?@@codewithnomi
I just want to see some movies when I click on see all what I have to do
WOW! this is the best React-Native tutorial i watched so far, very easy to follow, everything is explained very well, awesome teacher.
looking forward for future content. great content sir.
your new student from Algeria 🥰🥰
glad to help 😊
@@codewithnomivery clear tutorial but you maybe you can make a Part 2 and make in use the favorite film and menu in home screen and try a login sign up with a splash screen for user when open the app ,it will be very useful for us , thank you man for sharing you values to us
At 11:00 when I trying to load the app, it's throwing a error saying "React.Children.only expected to receive a single React element child"
Okay I got the answer, if anyone is having trouble we need to wrap the Image and classname into a single container: const MovieCard = ({ item }) => {
return (
);
};
you don't need to move className inside style property
@@codewithnomi oh okay! Because I saw similar issues on stack overflow and they said that was the issue, so I tried likewise, it’s working now though
Sir I am facing Error while using carusole
Watch this: czcams.com/video/_Z33DTn0ZFo/video.html
7:55 class name not working for
check again 🧐
Flutter please
Why not use expo-navigation?
Currently working on a new project with Expo Router, coming soon 😁
great design but see all and 3barbutton are not working
thats for you to implement my friend 😁
why does "className' not work for me and chatGPT saying "style" is the only way"
because I'm using NativeWind for styling, and native wind uses tailwindcss, I'll create a tutorial on how to use tailwindcc in react native soon.
czcams.com/video/_Z33DTn0ZFo/video.html
how do you start the project?
using this command: npm run ios
राधेश्याम साउथ हिंदी मूवी
Anyone have a good movie app
this app bruh
(dooflix)
Not for Beginners
you are using classes to style but where is the styling ????????/ you did not show that
It's tailwindcss
Kitna bhi technical content banwa lo , inko end mein jaake h # Maas ke t e r .. rist ko hi promote karrna hai Twitter pe 😂😂😂
Not a great tutorial for us beginners, you don't even show us how to set up the start of the application... Makes the rest of the video pretty useless imo, as I can't even get started.
I'm really sorry about that 🥲
I started the app with tailwindcss and react navigation already implemented!
here are the videos to set them up:
setup tailwindcss in react native: czcams.com/video/_Z33DTn0ZFo/video.html
setup react navigation in react native: czcams.com/video/-Kr247pr9hQ/video.html
@@codewithnomi Hello Nomi. Thanks for the quick reply, sorry for the harsh review.
I've done what you described, but im still getting an error when i run the project:
error: App.js: C:\Users\admin\Documents\Datamatiker\4semester\MobileApp\MovieApp\App.js: Use process(css).then(cb) to work with async plugins.
So now i cant really do anything beyond this point :(
try downgrading the tailwindcss version to 3.3.2
@@codewithnomi Solved it, it seems that when you install tailwindcss, the newest version bugs (vers. 3.3.5), so i installed 3.3.2 instead and it works now. Thanks
How to learn react😢