Blogs
Integrations

Create a Chat App with Locofy.ai & Firebase

In this blog, we'll build a chat app from a Figma design using Locofy.ai to generate the frontend code and Firebase for adding auth & messaging users.

Goal: Build a Chat Application from a Figma design using Locofy.ai to generate the frontend code, Firebase for adding authentication to our app, and Gifted Chat as our chat UI library.

Prerequisites:

  1. You will need your design ready in Figma.
  2. You will need a Locofy.ai account and have the plugin up and running on your Figma file.
  3. You will need a Google account to sign in to Firebase.

Turn your designs into frontend code with Locofy.ai

This is the design for the chat app that we’ll be building. It consists of 5 screens – sign up, login, contact view, chat view and chat room. You can find the link to the Figma file here.

Image of the Figma designs
  1. The first step is to tag our designs. Tagging allows us to turn our designs into working components, for example, buttons, dropdowns, inputs, and more.
    You can also work with popular UI libraries such as Material and Bootstrap by tagging your elements.

    For this app, you’ll notice items like:

    1. Buttons
    2. Input fields
    3. Bottom tabs
    4. Modal
  2. Now you can make your designs responsive by configuring the styles in the Styles & Layouts tab.
    Select your components that need to be responsive and on the Locofy plugin, under the Styles & Layouts tab, you will find different media queries & states. Select the breakpoint you want to make your design responsive to and then change the styles and layout accordingly.
    You can also use auto layout for your designs for responsiveness and use the locofy plugin to take care of layouts on different screen sizes.

  3. You can trigger actions to build fully featured apps and websites. You can head over to the ‘Actions’ tab and assign actions for click events.
    You can scroll into view and open popups and URLs amongst other actions.

    Image of the plugin
  4. Now that our designs are tagged correctly and responsive, we can preview them.
    To preview your design, select the frame or layer that you want to view, and click the “Preview” button.

    Image of the preview feature

    Once you are satisfied with your preview, you can sync your designs to Locofy Builder to add more advanced settings, share your live prototype, and export code.

  5. Click the “View Code” button at the bottom right corner of the plugin & select the frames. In our case, we’ll be syncing all the frames.
    Once the sync is complete, click on “View code in the Builder”.

  6. You need to turn some of the code generated by Locofy into components inside the Locofy Builder for easier maintenance and fewer duplicate code.

    In our design, since the contacts are being repeated in the Contact View screen, we should convert it into a reusable component. We can do that either by using the Locofy Components Wizard which gives us recommendations for components and adds props automatically.

    Image of the auto components feature

    Or we can also add components manually as shown below.

    Manual component creation
  7. You can also add the props quickly in the Locofy builder so you can easily extend it.

  8. Once the prototype matches the product vision, you can view the live responsive prototype that looks and feels like your end product. Then you can export the code.

    Image of the export screen

    Make sure to select all the screens you need, as well as the React Native framework with Expo CLI as the project settings. Once done, you can download your code in a Zip File by clicking the “Confirm Export” in the bottom right corner.

Exported Code Overview

After extracting the zip file you downloaded, you can see how the React Native project is structured.

Exported code structure

You can see the components you created in the Locofy builder have been placed inside the components/ folder and you have got our screens as pages inside the screens/ folder.

  1. To run the app, you need to first install the packages running the "npm i" command in your terminal.
  2. Once the dependencies are installed, you can run the project in the simulator using "npx expo start".

Adding Firebase Authentication

  1. To work with the auth service provided by Firebase, you need a Firebase account and the right credentials in place. To learn how to create a Firebase account and set up the project, please refer to this guide on extending React code with Firebase's auth service.

  2. Once everything is in order, you would have a firebase.js file in your root folder that will look something like this:

  3. Now open the 'SignUp.js' file and paste the following code to handle the email and password state variables:

  4. Let’s modify the onPress function in the touchable opacity button and call onHandleSignin() function. The user will navigate to ‘Contact View’ screen after signing up.

  5. We initialise the onHandleSignin() function:

  6. We now define the setEmail and setPassword functions and add these as props in the SignUpCard page:

  7. We now go to the Components/SignUpCard and use the props inside it. For the text input, we call the onChangeText() function:

  8. We can now register our new users with Firebase.

  9. Now let’s move to the login screen. Open the 'Login.js' file. Add the two useState hooks for email and password like we did for the sign up page:

  10. Let’s modify the onPress function in the touchable opacity button and call onHandleLogin() function:

  11. We initialise the onHandleLogin() function:

  12. We repeat similar steps for the Login screen as Sign up.

  13. Once done with the Login screen, we'll modify the root file app.js. Since the authenticated user needs to pass through all the pages and screens, we need to use the React createContext API . We create a context called AuthenticatedUserContext in app.js:

  14. Finally, we create an authenticated user provider which provides the context to the child components.

Sending Messages

We will be using the Gifted Chat UI library which will give us a chat component that we can integrate with our application. The library handles some of the common operations associated with displaying messages.

  1. To install the library, run the following: 

  2. We need a state hook to store our messages in an array:

  3. In order to fetch the already existing chats from Firebase, we use the useEffect hook to run a function once. The function will essentially query the Firestore database’s collection and sort it based on the latest messages. When the component is destroyed, we are using an onSnapshot function to make sure our message logs are completely synced up.

  4. Finally, we create an authenticated user provider which provides the context to the child components.

And with that, you have created your own chat app with authentication!

By following the steps above, you can turn your designs into production-ready React Native code with the ability to authenticate & message users, thanks to Firebase’s auth service and Firestore.

With the Locofy.ai plugin, you will be able to generate pixel-perfect frontend code that can be broken down into components that can accept props and pages. 

Generate pixel-perfect React Native code today with Locofy.ai.

Keep your loco mode on!
Stay updated on the latest Locofy announcements and product updates

© 2024, Locofy Pte Ltd. All Rights Reserved.