bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Kickstart your React Native app with Firebase – Cloud Firestore (Tutorial #1)
Join our workshops in 2022
Sign up and get notified about upcoming workshops. Build exciting apps and learn about technologies like React Native, JS, Flutter etc. from experienced engineers.
Join the community and invite your peers as well! For updates regarding the upcoming event, visit the workshop page:
In this series we will create an iOS and Android application — called Fakestagram — with React Native, using some of Firebase services. This is not an “intro to React Native” tutorial so we won’t cover basic things, but only Firebase specific topics, so you will need some React Native knowledge to keep up with the pace.
Today, in Ep. 1, we will look at Firebase’s exciting new feature, Cloud Firestore. If you want to read the intro article check out Episode #0, soon you can check the next step in Episode #2.
In the previous episode we looked at what is Firebase in general, then created our starting projects on Firebase and linked them to our React Native application. Now, the fun begins with some database architecting in Cloud Firestore, and finally showing some data on our mobile with option to add more. So, let’s get started!
A NoSQL (originally referring to “non SQL” or “non relational”) database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases. Such databases have existed since the late 1960s, but did not obtain the “NoSQL” moniker until a surge of popularity in the early twenty-first century, triggered by the needs of Web 2.0 companies such as Facebook, Google, and Amazon.com. NoSQL databases are increasingly used in big data and real-time web applications. NoSQL systems are also sometimes called “Not only SQL” to emphasize that they may support SQL-like query languages.Wikipedia https://en.wikipedia.org/wiki/NoSQL
According to official documentation, Cloud Firestore is a cloud-hosted, NoSQL database that your iOS, Android, and web apps can access directly via native SDKs. Cloud Firestore is also available in native Node.js, Java, Python, and Go SDKs, in addition to REST and RPC APIs.
CREATING OUR DB
First, let’s create our database model at the Firebase console and populate it with some dummy data. To do this, choose database from the left navigation, then Cloud Firestore and activate test mode. This will create the DB engine. (In the next article, where we create authentication feature, we will set the DB to only authenticated users can write.)
First, we only need 1 collection for the posts. A post will have a unique ID, a uri, a title and likes. Document ID to identify the document, URI to point some place where w’ll store the image (now random image from Lorem Picsum, later We’ll use Firebase Storage), title is a place for motivational quotes ? and likes is the number of people who liked your selfie… ? Feel free to add some field values and some documents in it.
CONNECTING THE DB TO THE APP
Now, that the database is created, it’s time to use it. First we need to add the native dependencies to the project, because in the previous article we only added Firebase Core.
So on iOS add pod ‘Firebase/Firestore’to your Podfile, do a pod update and from now, you can use Cloud Firestore features on iOS.
On Android add compile “com.google.firebase:firebase-firestore:11.6.0” to app/build.gradle. Add import io.invertase.firebase.firestore.RNFirebaseFirestorePackage; and new RNFirebaseFirestorePackage()to MainApplication.java and now it works on Android.
We only work on App.js now, creating a FlatList and a ListItem — called Post — to render the data from our DB.
In the constructor we create a ref to our collection and an internal component state. With onSnapshot() function we are listening to events on the DB and this way it gives us real-time updates. Every time when this event fires, we call the callback. After that we add an option to unsubscribe from the event. Our onCollectionUpdate() function gets the actual snapshot of the collection and updates the components state based on that. Let’s add a button to update the DB:
You should clearly see that’s really easy to add a new document to a collection by calling .add() method on our ref. Just put the object to the parameter of the function.
This is all you need to start using Cloud Firestore today in your React Native application. If you want, you can clone the example repo with the UI implemented and checkout the code. Would you like to add something? Or you have any questions? Just write a comment.
In the next episode we will create authentication with Firebase and create users, Login and Logout functionality to the application.
CHECK OUT THE FULL CODE HERE:
Read moreSee all software engineering
Workshop Recap: connect native modules to build an awesome music creator
Learn, how to work with Native Modules (both Java and Swift) and connect them with React Native.
CI/CD workshop recap: React Native automated tests with Bitrise
Build your quiz app on your own iOS or Android phone.
Build your own Christmas chat tree
Or should we say Chat-mas tree?😜 Create a working chat application in 2 hours using React, SSE (Server-Sent Events) and OneSignal on Heroku.
5 Ways to Connect Redux Actions
This article provides 5 ways of defining mapDispatchToProps with explanations. Great introduction to our Redux Saga Workshop!
Bene Studio Serverless Workshop - Calorie Counter App
Let bene : studio enhance
your digital product!