Upload Photos and Posts with Cloud Firestore + React Native - Social App Part #3

Upload Photos and Posts with Cloud Firestore + React Native - Social App Part #3

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

✅SwiftUI Videos! https://www.youtube.com/watch?v=59dnQQ2zUrA&list=PLqtWgQ5BRLPutlsNMQiajh1HD_dtJIM7u

✅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

firebase socialapp reactnative react

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Firebase & React Tutorial | Build a Todo App

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!

How to Create Protected Routes in a React app with Firebase and react-router

Using Firebase and react-router to create protected routes in a react app.

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

Styling the Feed and FlatList with React Native + Firebase Social App - Part #4

In this video tutorial, we'll learn How to Styling the Feed and FlatList with React Native + Firebase Social App - Part #4.