Updating SOCIAL APP with React Nav 5, Hooks, Styled Components & Context! :: Part #1

Подписаться 17 тыс.

Просмотров 35 тыс.

50% 1

We're back with an all new UPDATED Social App! React Navigation 5! Cloud Firestore! Context! Styled Components! Hooks!
💥 Save TIME with a custom TEXT component!
/ custom-reusable-47843654
Get notified about my upcoming Instagram clone course! www.instaclone...
If you enjoyed this video please consider supporting me on Patreon! / designintocode
💾 Source Code
/ 42166674
Follow me!
Twitter: bit.ly/2MdnXBX
💬 Come chat on Discord!
/ discord
❤️ Subscribe for awesome videos! bit.ly/2KZU1ds
✅ Building a React Native + Firebase Social App
• React Native + Firebas...
✅ Taking Designs and Turning them Into Code
• Music Player screen UI...
✅ Awesome React Native Videos!
• React Native LOGIN SCR...
Software Used:
VSCode, React Native, Expo
#reactnative #socialapp

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 135

@DesignIntoCode 4 года назад

We back! Yes, I'm still working on the InstaClone course, it's taking longer than I expected, but there is SO MUCH AWESOME STUFF IN IT, it will be worth the wait, I promise!

@kemtimussign5383 4 года назад

Yesss! I'm still waiting for it. Glad it's still coming

@vkray 4 года назад

I’m also waiting for the course. I’ve switched from Native to RN after 11 years of doing Native development .

@ZoupTubes 4 года назад

Yeeey! im waiting for it

@kangnguyen5930 3 года назад

I’m also waiting for the course. i hope !!!!!

@kaunghtethein3322 3 года назад

Waiting for it

@otakubossplayer136 4 года назад

Bruh u r literally a react native design god. I've learnt so much from you it's ridiculous.

@DesignIntoCode 4 года назад

Glad to hear it!

@maghani.official 3 года назад

the text component though! This video is better than watching those basic tutorial videos on other channels. Love the way you have created components. Keep it coming man!

@abdullahalnayem1849 3 года назад

I don't get why this channel has that low number of viewers! DesignIntoCode deserves more subscribes for making these awesome videos! Gratitude.

@antal_varga 3 года назад

Hey guys, just to remember to import the useContext from 'react' before writing const [user] = useContext (UserContext);

@whisky961 3 года назад

god bless you.

@mariogalindo876 4 года назад

Great update! A lot of thanks for your time and this amazing videos! 🔥 we missed you!

@josephsummers9116 3 года назад

Been on many coding channels on RU-vid. Yours is my favourite. Looking forward to part 2!

@mikemorrison8984 3 года назад

Excellent. Thanks. Looking forward to the rest.

@antoinenguyen3853 3 года назад

Exactly what i needed, thanks buddy !

@kayumoren8005 4 года назад

We missed you😭

@hosunglee9635 4 года назад

Thank you so much for this awesome video. Your lectures were so helpful to me.

@tendies 3 года назад

Thank you so much for this, I really appreciate it!

@raymondmichael4987 3 года назад

I keep waiting for the RU-vid notification about the next episode :)

@Boga_adventures 3 года назад

The image upload doesnt appear in the firebase storage . what could i be doing wrong?

@konarkkapil9626 4 года назад

Great video man. Keep. It up 👍

@alexisquinonez8508 3 года назад

Excellent tutorial, in the following we could see another example using typescript

@DesignIntoCode 3 года назад

Thank you. It’s doubtful I would do anything with typescript

@kulothunganug 3 года назад

Waiting for part 2

@arikmosfor4907 2 года назад

this is insane!!💪💪💪💪

@alexizhernandez8011 3 года назад

Any ETA on the InstaClone course? Super excited for it! 😁 Love your content!

@sovannborithyun5205 3 года назад

When you will release next part?

@willc7975 3 года назад

I have been encountering this "× ReferenceError: TextStyle is not defined" problem, please help 1 | import React from 'react' 2 | import styled from 'styled-components/native' 3 | > 4 | export default TextStyle = ({...props}) => { 5 | return {props.children} 6 | } 7 | Anyone know the fix to this? I am trying to load the app on the WEB

@unknownman1 4 года назад

ahh, your voice is so sweet. Why dont u explain while writing code??

@DesignIntoCode 4 года назад

I didn’t want this video to be 2 hours long, so people can get the code now, and we’ll go over everything in the next one.

@JonsonNcube 3 года назад

@@DesignIntoCode Your videos are so good and informative, people won't mind a 2 hour video. :D

@DesignIntoCode 3 года назад

Not according to the analytics haha

@fratelo9832 3 года назад

Bro when i make file Text like you , and after import Text into a Login Screen , i got the ReferenceError: TextStyle is not defined , please can you help me .

@muhammadnajamulsaqib7915 4 года назад

Thank you for not only this video but for DesignIntoCode . Your videos are very helpful ..Can you please make one video on how we can upload react native project on playstore ?

@Gaming_with_Martin 3 года назад

You made an awesome tutorial

@luciosantella2702 3 года назад

When are you posting the explanatory video? This has been super helpful in my learning progress. I've been going through reasoning through most of it but there are some things that I think I would benefit a lot from hearing you explain the reasoning/ what certain things do.

@DesignIntoCode 3 года назад

Which parts?

@luciosantella2702 3 года назад

@@DesignIntoCode I think I was most confused with the Firebase/User Provider and Context that you wrapped around the Navigation Container. I understood the functions inside them. Just not necessarily why that was done.

@DesignIntoCode 3 года назад

Context allows you to have what is basically “global state”

@Tecito67 4 года назад

just in time! miss u T_T

@tuanvungo8883 3 года назад

i can't use Lottie Lib. it auto reload my app and dont show animationLoading.json :((((

@Arknoodle 2 года назад

Please please release part 2 of the function component version. I can't for the life of me figure out how to add posts and retrieve them from firestore :( I beg of you!

@alisalimli 3 года назад

Hey dude,your videos great.Keep going on,where is the next video ? :)

@CoffeePrinceGaming 3 года назад

Which one is expensive? MERN stack or Firebase? I'm planning to develop an app that has potential to have 50k - 100k+ daily active user. Which do you think is cheaper?

@hoangucollection6181 3 года назад

Release the video part 2 ... my dissertation time is just over a month :(((((((((((

@mdjahidulislam9205 3 года назад

Thanks bro

@tezkenya 3 года назад

How can I downgrade SDK? Am using SDK 40 and I can't install these packages.

@camdickie 3 года назад

Hey, although my App still compiles I see that when I import Firebase and set up the projects I'm getting the Async Storage depreciation error. I'm worried this might be a problem into the future and was wondering if you encountered this error stemming from the Firebase import. If you did, would love for you to cover it in an explanation video of some sort. thank you!

@cjanesfull 3 года назад

In the video you got an error saying: ' Can't find variable TextStyle' . I am also getting ReferenceError: TextStyle is not defined, showing the first line of the function in the component Text.js, but I can't dismiss the error like you did because it's showing on the Web. Do you know what's triggering the error?

@DesignIntoCode 3 года назад

With mine, it was just a matter of reloading. The fast refresh doesn’t really like when you add new files.

@VistritPandey 3 года назад

Thanks for the tutorial,I have learnt a lot from it. I had a question, when I am clicking on uploading a profile photo, I am not able to do it. Plz help........

@Phenom161000 3 года назад

Do you plan on adding in Redux or is useContext the end all be all for this series?

@lioritach7119 3 года назад

Thank you!!!!!! I have a question, when i click Sign in or Sign up, it doesn't navigate to home screen. why?

@DesignIntoCode 3 года назад

Likely you’re not setting the isLoggedIn variable to true, or your if/else statement in the app stack screen isn’t correct

@lioritach7119 3 года назад

@@DesignIntoCode Thanks for the quick answer! i follow after your video, it shows me this warning: TypeError: undefined is not an object (evaluating 'userInfo.email'). why?

@DesignIntoCode 3 года назад

That would mean you’re trying to use that variable, but it’s undefined, so it was never set properly

@christopherfelix9290 4 года назад

you're awesome!!!

@preciousoyedele9039 2 года назад

Please when is part 2 coming out?

@Denis-fc2sv 4 года назад

🔥🔥🔥🔥🔥

@chitrangsharma 3 года назад

Is this for beginners to get start from ?

@raymondmichael4987 3 года назад

Is this series abandoned?

@koriarvina 3 года назад

@react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack @react-navigation/bottom-tabs

@Ep3on 3 года назад

Hi DesignIntoCode! I have been encountering this "× ReferenceError: TextStyle is not defined" problem, please help 1 | import React from 'react' 2 | import styled from 'styled-components/native' 3 | > 4 | export default TextStyle = ({...props}) => { 5 | return {props.children} 6 | } 7 |

@willc7975 3 года назад

I also have this issue, anyone know a fix?

@yaxxii9305 3 года назад

@@willc7975 yeah you have to use export const TextStyle = ({ ...props }) => {

@arsyalkun 3 года назад

I don't use the expo, what should I do?

@musical4evr 3 года назад

in App.js file when i put everything inside I get blank screen, without it everything works fine

@DesignIntoCode 3 года назад

You likely missed the props.children part

@godson-kemfonumoren9439 3 года назад

Can you share your VS Code settings and snippets etc?

@leonardogomes7677 3 года назад

YEEEEEEEEESSSSSSSSSS

@newcastledreamclub8197 3 года назад

Sir waiting for next video when will it come??

@tiagosantanadasilva6420 4 года назад

Great video! I have this yellow error saying: "Setting a timer for a long period of time, i.e multiple minutes, is a perfomance and correctness issue on android as it keeps the time awake, and timers can only be called when the app is in the foreground.". I looked up for this error but I haven't found nothing that could REALLY solve this and understand the issue. Do you have any idea how to correct this?

@DesignIntoCode 4 года назад

That’s a long standing bug/issue with firebase and android. If you Google it, there’s a million answers on how to suppress the message

@RajeshSharma-kt9er 3 года назад

great stuff, can you make an ecommerce app?

@regoedwar1293 3 года назад

how to post to the feed page?

@alokgoldy9219 4 года назад

Missed you

@tgg1666 3 года назад

31:07 Is this splash screen going to be showed first when user opens the app?? Or the default expo splash screen?

@DesignIntoCode 3 года назад

There will be a moment where the “splash screen” is shown before the loading screen is. So you’d want to customize that to your project

@tgg1666 3 года назад

DesignIntoCode is there any way to remove the default splash screen?

@DesignIntoCode 3 года назад

docs.expo.io/guides/splash-screens/

@tgg1666 3 года назад

DesignIntoCode Thanks for your time! 😃

@cheikhkanteye9504 4 года назад

💣💣💣it boom, so cool

@dillon1087 3 года назад

I'm getting an invalid hook call warning after placing the useContext inside my LoadingScreen function as you did. Afterwards the screen will not change over from the loading screen to the signup/signin

@dillon1087 3 года назад

"Possible unhandled promise rejection"

@dillon1087 3 года назад

Was calling useState instead of setState in my return statement in UserContext. Auto complete can really get the best of you sometimes..

@DesignIntoCode 3 года назад

@@dillon1087 Ha! Definitely been there

@danimusbar 3 года назад

tkyou bro.. i am curently using React Native CLI, how to follow your this tutorial and make some changes when in CLI React Native

@DesignIntoCode 3 года назад

I think the code should be the same either way, you’d just need to pull in the packages that expo just has built in

@juridiener9790 4 года назад

Hey i have one question more. what is the difference between set firebase in a context or call the functions through a simple js file? Why you use a Context for firebase . Is there a difference? Thank you for your reply.

@DesignIntoCode 4 года назад

Technically right now, no there’s no difference. But in future videos, it will most likely be necessary

@juridiener9790 3 года назад

@@DesignIntoCode okay thank you. I hope it doesn't annoy you when I ask you some questions about the code?

@DesignIntoCode 3 года назад

Nope not a problem, although code discussions are usually easier over on my discord

@juridiener9790 3 года назад

@@DesignIntoCode okay. Yes I wanted to register there. Unfortunately this didn't work and when I tried to choose my birthday it was simply not taken over and so I couldn't register. I used opera as brwoser

@DesignIntoCode 3 года назад

Download the app

@x33ItzMe 4 года назад

Hi, love your tutorial. However, why did you trim the password? ETA on the explanation video?

@DesignIntoCode 4 года назад

Trim just removes excess white space before and after the string.

@keenankaufman2722 3 года назад

Dammit, I litterally just finished the first part 1 :(

@allymfs 3 года назад

Part 2 pls

@mustafaemin7389 3 года назад

Please share your vs code settings

@jerrychang3253 3 года назад

Hi DesignIntoCode! Thanks for the extraordinary video! I'm having problems with the vector icons, which just wouldn't display(blank). I couldn't find the solution anywhere, and my code is exactly the same as yours. Do you have any idea of how to fix the problem? Thank you very much!

@DesignIntoCode 3 года назад

Are you using expo?

@jerrychang3253 3 года назад

@@DesignIntoCode yes, and I looked up the docs and double checked if I made some mistakes, and I didn’t...so frustrating:(

@DesignIntoCode 3 года назад

What does your import statement and the code you’re using for an icon look like?

@jerrychang3253 3 года назад

@@DesignIntoCode import {Antdesign} from ‘@expo/vector-icons’

@DesignIntoCode 3 года назад

And the code you’re using to display it?

@Ep3on 3 года назад

Hi DesignIntoCode! I have a problem that says "Failed to compile C:/Users/Acer/pixpy/src/context/FirebaseContext.js Module not found: Can't resolve 'firebase/App' in 'C:\Users\Acer\pixpy\src\context'" How can i solve this? Thank you!

@godson-kemfonumoren9439 3 года назад

what icon theme do you use?

@DesignIntoCode 3 года назад

Vscode great icons

@hoangucollection6181 3 года назад

comeback PLEASEEEEEEEEEEEEE

@saadaor 3 года назад

can it be used without expo ?

@DesignIntoCode 3 года назад

Yep

@juridiener9790 4 года назад

Hey, thank you for this amazing video. I like your style how you coding stuff. I have now changed my Navigator thank you for that. Now it is more structure in it. But i have now a Problem how i can change for each tab the header style? Like color, icons, title. I try everything out. Only if i set the screenOptions in the AppStack then i can change the header color. But i need this in each tab. Because i want also change the title now everywhere in the header is written Main. Can You please help me out? Thank you.

@DesignIntoCode 4 года назад

You’d probably need to create a stack for each different style that you want, and then style each individually

@juridiener9790 4 года назад

@@DesignIntoCode do you have an example? I'm stuck. I don't know how to solve this. I'm very new in react native. I appreciate it very much for your help. I try it like so: export const ProfileStackScreens = ({ navigation }) => { const ProfileStack = createStackNavigator(); return ( ) } And then I added this to the MainStack: But the header didn't changed. :(

@DesignIntoCode 4 года назад

I don’t sorry, that can be a little tricky in version 5

@DesignIntoCode 4 года назад

I generally just create my own headers in each screen, if I need them, instead of relying on react nav

@juridiener9790 4 года назад

@@DesignIntoCode It looks like AppStack will overwrite everything. Actually I just need a header style, an icon, and different titles and when I'm in a stack like profile edit that I have a back button in the header again. Is it all impossible with the code like this? And if you create your own header how do you do that you would have an example code for me? Thanks.

@hadavid2454 3 года назад

For updating the # of posts, followers, and following, should we use hooks to update it in ProfileScreen.js? Ex. const [posts, setPosts] = useState(); const [followers, setFollowers] = useState(); const [following, setFollowing] = useState();

@PARASSHARMA121212 4 года назад

i want source code please share the repository link

@unknownman1 4 года назад

lawde, its available in his patreon.

@DesignIntoCode 4 года назад

Right, link is right there in the description

@joaootavioribeiro1943 4 года назад

Part 2 ? Please

@DesignIntoCode 4 года назад

Yes there will be a part 2

@abdur-rakib 3 года назад

@@DesignIntoCode When it will come Sir??

@GHOSTWRIDAHxCOEV1D 3 года назад

@@DesignIntoCode lmaoooo

@nguyennhat9516 3 года назад

please no expo

@DesignIntoCode 3 года назад

Lol. I’m sure you can give a well reasoned response as to why not

@x33ItzMe 3 года назад

expo install @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-content @react-native-community/mask-view @react-navigation/stack @react-navigation/bottom-tabs