React Native Tutorial Step 18 - profile.js

Опубликовано: 23 Март 2026
на канале: CourseHack
205
1

Today's work is so incredibly simple. I don't even know why I'm writing this post.

TODO #1: Go to containers and rename Users → User (if you have it named Users) and then make a Profile folder. Now, you have /src/containers/User/Profile

TODO #2: Create two files in the Profile folder - Dances.js and Profile.js

TODO #3: Go to sagas.js and make sure you have NavigationService imported and that you have NavigationService.navigate("Profile") in the loginUser() function.

TODO #4: Copy and paste the profile.js from the google drive folder React Native Tutorial Step 18 - profile.js that you would have been given FREE access to if you've joined our mailing list.
 
Now here's some explanation. The code in profile.js is Reactjs code and NOT React Native code. I thought it'd be good to give you guys a taste of Reactjs (and I am using my reactjs code as a template here).

constructor(): What's happening here is we are pre-fetching data that we need right when the user logs in and lands on their profile.

componentDidMount(): Same as in the constructor, we are pre-fetching the conversations from the user, if they are signed in.

updateProfilePic(): Code for uploading a profile picture through AJAX - nothing special.

render(): The only thing special worth noting here, is that we're using document.location.hostname to figure out what environment we're on, so we can get the profile picture from the correct CDN  – content distribution network.

TODO #5 (Optional): Import the profile72x72.png into your assets folder.

Okay, that's it for today. Now you can go play!

Accompanying medium article:   / react-native-tutorial-step-18  

Don't forget to like, comment, and subscribe!!!

========================================================
Reference Links
========================================================
None!
========================================================
Connect with me!
========================================================
Linkedin:   / donaldlee50  
Instagram:   / donlee50  
Twitter:   / donaldlee50  
Youtube:    / coursehack  
Mailing List: http://bit.ly/coursehack-mailing-list
Coursehack's Facebook Group: bit.ly/join-coursehack-facebook-group

Don't forget to like, comment, and subscribe!