Instagram with React Native, Firebase & Redux

7 min readAug 14, 2018

Okay, okay.

Hi everyone, my name is Alvaro and this is my first post here!

This code it’s very very very rust (is that a word?) sorry for my english. Te app and the code still works tho, but I would not recommend to follow the patterns I did in this posts. If you want, we can make a new one (not only react native, also react) making existings apps that aren’t made with react.

Just hit me!

It’s been seven months since I discover React Native and to be honest, I’m enjoying it like a child.

For my first post I want to make something special, and it’s gonna be a React Native series building the Instagram app with Firebase as backend, Redux as state management and React Native Router Flux as router. (We will use the vector icons too to make it pretty). Before start, thanks to the creators of this dependencies (I’ll credit them at the end).

So, today, we are going to create our app and setup the login/sign up for our app. There we go!

Open the terminal, create our app and install the dependencies (the first step is always the easiest, sadly)

react-native init Instagram
cd Instagram
yarn add redux redux-thunk react-redux react-native-router-flux react-native-vector-icons

And we are done! Let’s do it.

2. We need to define our architecture (folders, composition…), I decided to make it like this:

Our ‘App.js’ will render a main component for our app. Will store the ‘redux things’ in ‘actions’ and ‘reducers’, and our components will live inside the ‘components’ folder. ‘Common’ will be used for common components (inputs, buttons, etc…).

3. Alright, let’s make this ‘Main.js’ inside our app folder and make ‘App.js’ render this:

Okay.

I said we will use firebase, so we need to setup our app for it. Let’s go to https://console.firebase.google.com/u/1/, click ‘add project’, choose a nice name and create it. Let’s initialize it in our app:

Select ‘add firebase to your web application’, and a modal will appear with the data you need to initialize, copy it and paste in your ‘App.js’, and don’t forget to import firebase (see the image).

Nice! We can now use firebase in our app… or… not? We need an authentication system for our login, what about… email and password? Let’s go to the tab ‘Authentication’ in firebase, click ‘configure’ (the big blue button) and enable email / password.

I’m getting tired of all of this boilerplate, let’s make the login for once.

This is the plan:

We make the common buttons and input components for the login / signup.
We make it pretty (as much as Instagram is).
We make the router.
We connect everything to Redux and Firebase.

All we.

Sounds nice, sounds easy. Let’s see:

Inside our common components, ‘Button’, ‘Input’ and ‘Title’:

Let’s put this inside a ‘Login’ component (create a folder for it if you want to, I’ll put inside ../components/auth/ ) and see what happens!

Wow, pretty nice, but we need to render our router, not only the login page. I created a ‘Router.js’ file in the same path as “Main.js”. Also, I removed all the styles for ‘Main.js’ and ‘App.js’, now all the components controls their own flex boxes and styles (find the changes in github).

This is the router and signup (identical as login) component:

Well, we have now the router, now what? Let’s use it as a component, render it in our ‘Main.js’!

And all the ‘TODO’? Navigation? we can use ‘Actions’ from our router! If we see, we defined a key in our router for each component, what if we call ‘Actions’ with it? We got this:

Great! Now, let’s do the last part for today, let’s login and / or signup in our app. But… what if we login? We’ll need a page saying something at least, like “Yikes, you got here somehow”, I don’t know. I’m too bad doing titles and names.

Create a component called “home” in our home folder and add it to the router, in a new stack with the key “app”:

Now let’s do this:

Create the reducer and actions types
Create the store and import the reducer
Create the actions to login / signup in firebase
Make the app fire the action
See if it works

Reducer (inside folder reducers) and types (inside folder actions):

In our reducer, the ‘user’ property is the current user logged in firebase (we’ll see in the actions), the errors are a message that will appear if something goes wrong logging or creating the user, and loading is a boolean that will display a spinner if i’s true.

In our app we’ll have more than one reducer, so we need a way to export all of them and pass as one to the store:

Create an ‘index.js’ inside our reducers folder.
import “{ combineReducers }” from redux and export it:

Now we have one reducer with the property auth, when called (state.auth) passed as props, this will return the state gave by this reducer.

2. Provide the store to our app:

Go to ‘Main.js’, where we have the router, and import “Provider” from react-redux, “createStore” and “applyMiddleware” from Redux, “ReduxThunk” from redux-thunk (this is used for async actions) and the reducers.

3. Actions

Inside our “actions” folder, create “AuthActions.js”, import firebase, import all the types for auth, and “actions” from react-native-router-flux, and make it look like this:

We have the createUser and loginUser functions, which will receive the user and password (the state for login and signup components) and pass it to firebase. If it works, call the loginUserSuccess and send the user to the next page, our home component. If it fails it displays an error.

Let’s wire the components:

We need to import connect from ‘react-redux’, to connect the component and the action we want to call:

find the code in github

2. We are not going to render as default our main class anymore, we need to render the connect component from redux (I usually put this block of code between the class and styles declarations):

Now we passed as props the state given by the AuthReducer, and it will change with every action we fire to redux (login, login fail, etc).

3. Now we want to render an spinner when we click login or signup, instead of the buttons. I created a function called ‘renderButtons’ which will do the trick (don’t forget to import ActivityIndicator from react-native):

4. Finally, put the function and the ‘error’ from the reducer in our render (don’t panic, the error is nothing till we fail logging or creating):

We did it!! Let’s try the app:

If you made it to here, congrats! I think this app and tutorials will be a nice work to learn (and teach) React Native and see the power of this framework.

In the next chapter we’ll make the feed of Instagram, not as good as it is but to be honest it will rock.

I said I will credit the authors of the dependencies we used so:

Redux: https://github.com/reduxjs/redux
React-Redux: https://github.com/reduxjs/react-redux
Redux-Thunk: https://github.com/reduxjs/redux-thunk
Firebase: our friend and neighbor google https://firebase.google.com/?hl=es-419
React-Native-Router-Flux: https://github.com/aksonov/react-native-router-flux

And that’s all for today! I hope you enjoy this series as much as I do. Thanks for reading me!

Part 2: Instagram with React Native, Firebase and Redux, Part 2

Part 3: Instagram with React Native, Firebase and Redux, Part 3

Part 4: Instagram with React Native, Firebase and Redux, Part 4

Alvaro

Instagram with React Native, Firebase & Redux

Just hit me!

Written by Álvaro Hernández