In this video tutorial, we'll learn How to Upload Photos and Posts with Cloud Firestore + React Native - Social App Part #3
💥 Save TIME with a custom TEXT component! https://www.patreon.com/posts/custom-reusable-47843654
Check out the updated social app! https://youtu.be/IXw8nRv7TBU
Get notified about my upcoming Instagram clone course! https://www.instaclone.app - Today we create a modal for Posts on the tab bar navigator, style the post screen with a custom header, create a dedicated class for all the Firebase methods, get the users permission to use their camera roll, use an image picker to choose the photo and finally upload the post to Cloud Firestore and the image to Firebase Storage!
React navigation doesn’t have any built in methods to attach a modal to a tab bar navigator so we have to get a little tricky! Next, we do some basic styling on the post screen so we’ll have something to work with. Starting with a custom header, with a back button and post button, we then add an input for the user to type their post into and a camera icon to select the photo they want to post. Then we get started with a dedicated Firebase class where we can keep the logic for uploading the photo to Firebase Storage and the post to Cloud Firestore. We make use of async/await, use getters for the timestamp and UID and return the url for the image we uploaded. In the post screen we use Constants and Permissions to ask the user for permission to access their camera roll. Then use the Image Picker to allow the user to select which photo they want to post. Finally we tie it all together and upload both post and photo!
If you enjoyed this video please consider supporting me on Patreon! https://www.patreon.com/designintocode
💾Source Code http://bit.ly/37Ru74p
❤️ Subscribe for awesome videos! http://bit.ly/2KZU1ds
✅Building a React Native + Firebase Social App https://www.youtube.com/watch?v=TkuQAjnaSbM&list=PLqtWgQ5BRLPvaAnoiZD8_z2RTh1VYVqN2
✅Taking Designs and Turning them Into Code https://www.youtube.com/watch?v=HXX4ZHKLmtc&list=PLqtWgQ5BRLPvMcSWZy_zODG3PjIGZEBxy
✅Awesome React Native Videos! https://www.youtube.com/watch?v=RraXs4K4kvk&list=PLqtWgQ5BRLPvt2sa4XSix482hcjhpgOT8
Follow me! Twitter: http://bit.ly/2MdnXBX
Packages Used expo-constants expo-permissions expo-image-picker
Dribbble Inspiration: https://dribbble.com/shots/6607852-Social-Katchup-Freebie-coming-tomorrow
Software Used: VSCode, React Native, Expo
#reactnative #socialapp #firebase
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Hey everyone! Firebase + React is probably one of the quickest ways to get started with a full-stack application, and it's so simple! Today's video is a tutorial on how to get started with Firebase authentication, firestore, and cloud functions. I hope you enjoy it!
Using Firebase and react-router to create protected routes in a react app.
ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...
In this video tutorial, we'll learn How to Styling the Feed and FlatList with React Native + Firebase Social App - Part #4.