Instagram with React Native, Firebase & Redux, Part 3
It’s Alvaro again!
A few days have passed since the part 2, and this is what we are going to build today!
I learned a lot through all the way here, and YES! I’ll post the code now and not images (sorry for the past posts).
If you didn’t read the part 1 and 2, go for it:
- Instagram with React Native, Firebase & Redux part 1
- Instagram with React Native, Firebase & Redux part 2
Today we will make a lot of changes in a few files (actions, components…). So let’s start.
The profile component needs to know how many posts, followers and people we are following, and we are not tracking that. So, in our ‘AuthActions.js’ file, when we call the ‘createUser’ function, I made a few changes:
- The action will now set the posts, followers and following to 0, will set a new field called name_profile with the username as value, and bio / sex to null:
Done this, close the file, and go to ‘PostActions.js’.
We need to update the value of ‘posts_numbers’ everytime we upload a post (increase by 1 this counter):
Great!
Let’s create now the profile section:
- We need ‘Profile.js’ and ‘EditProfile.js’ components.
- I’m using ‘react-native-image-picker’ to explore the library and pick a picture. If you install it, remember to link it with rnpm and restart the app if needed.
- For the image, we’ll use RNFetchBlob, so we need to install it.
Let’s start with the reducer and the fetchProfile action:
This part is easy, it’s all what been doing all the time.
Now, let’s go to the ‘Profile.js’ file:
- The component needs to know what values has the profile (maybe we can use redux right?)
- What kind of view we wan’t for the posts, if we want a grid or we want to see the full posts one by one.
I came with this:
I tried to make it the most accurate possible to the real instagram, and I think that this is very very similar.
You will see that our header doesn’t render the buttons (cancel and next)… but why? I changed the header component:
Now will only render the buttons if the props are passed. More clean.
If you are running the app and you click the “edit profile” button, a red screen will appear! We didn’t add our ‘EditProfile.js’ to the router!
Under ‘configPost’ add:
<Scene key="editProfile" component={EditProfile} />We are ready to go:
This component doesn’t need redux to fetch all the props, we are passing them in the “Action”:
And here is the ‘editProfile’ component:
And our reducer / actions now!
Sorry if I didn’t explained too much today, I find the code easy to follow and with the previous work we made should be easy to understand.
If something doesn’t make sense, you can always check the repo here: https://github.com/AlvaroJSnish/Instagram
And if you are here but didn’t read the other parts, do it! (if you want to):
- Instagram with React Native, Firebase & Redux part 1
- Instagram with React Native, Firebase & Redux part 2
In the next chapters we will make this “new Storie” button work, and we’ll be able to see an individual post when we click it!
As an exercise, would you be able to make the “addPost” file go to our gallery and upload a post with an image of our own? I think it’s pretty easy! If you find any problem doing it just PM me, write me on twitter (@nosoyalvaroscam) or send me an email (alvarohdezex@gmail.com). Feel free to do it whenever you want to, I’m happy to help!
Update: Part 4 is out!
