Introduction

Hey there! I'm Aadarsh Verma,
Here's the thing - I started this cool project because everyone in my class was doing the same old web applications with HTML, CSS, JS. I wanted to stand out, to be that guy who takes a different route. So I decided to develop a mobile app!

Sure, I could've chosen Java or Kotlin, but who has time for that when you're juggling college assignments, right? That's when I discovered React Native - same JavaScript foundation, but for mobile apps! Win-win! 🎯

My React Native Journey

Let me be real with you - I failed multiple times trying to build this Google Auth + CRUD app. The lack of proper tutorials, mentors, and clear guidance was frustrating. But you know what? I had two secret weapons: determination and the official React Native Firebase documentation!

Building FireApp (Yes, I named it after myself 😎)

Let's jump right in and create our React Native app with Firebase integration.

Step 1: Setting Up Your React Native Project 

// I'm using Bare React Native
// Open your terminal and run:
npx react-native init fireApp

// This command will download all necessary files and dependencies

Step 2: Adding Firebase to Your React Native Project

First, install the required packages:

# Install Firebase core
npm install @react-native-firebase/app

# For Google Authentication
npm install @react-native-firebase/auth
npm install @react-native-google-signin/google-signin

# For Realtime Database
npm install @react-native-firebase/database

Step 3: Firebase Setup in Firebase Console

  1. Go to Firebase Console
  2. Create a new project (name it "FireApp" 🔥)
  3. Add Android/iOS app to your project
  4. Download google-services.json (Android) or GoogleService-Info.plist (iOS)
  5. Place these files in their respective folders

Step 4: Configuring Google Authentication 

import { GoogleSignin } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';

// Initialize Google Sign In
GoogleSignin.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID', // from Firebase Console
});

// Sign In function
const signInWithGoogle = async () => {
  try {
    const { idToken } = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    await auth().signInWithCredential(googleCredential);
    console.log('Signed in with Google!');
  } catch (error) {
    console.error(error);
  }
};

Step 5: Setting Up Firebase Realtime Database 

import database from '@react-native-firebase/database';

// Create (Add Data)
const addData = async (key, value) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .set({
        name: value,
        age: 20,
        timestamp: database.ServerValue.TIMESTAMP
      });
    console.log('Data added successfully!');
  } catch (error) {
    console.error(error);
  }
};

// Read (Fetch Data)
const readData = async () => {
  try {
    const snapshot = await database().ref('/users').once('value');
    const data = snapshot.val();
    console.log('User data: ', data);
  } catch (error) {
    console.error(error);
  }
};

// Update Data
const updateData = async (key, newValue) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .update({
        name: newValue,
        lastUpdated: database.ServerValue.TIMESTAMP
      });
    console.log('Data updated successfully!');
  } catch (error) {
    console.error(error);
  }
};

// Delete Data
const deleteData = async (key) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .remove();
    console.log('Data deleted successfully!');
  } catch (error) {
    console.error(error);
  }
};

Step 6: Creating a Complete App Component 

import React, { useState, useEffect } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
import auth from '@react-native-firebase/auth';
import database from '@react-native-firebase/database';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

const FireApp = () => {
  const [user, setUser] = useState(null);
  const [text, setText] = useState('');
  const [data, setData] = useState(null);

  useEffect(() => {
    // Listen for authentication state to change
    const subscriber = auth().onAuthStateChanged(setUser);
    return subscriber; // unsubscribe on unmount
  }, []);

  const signInWithGoogle = async () => {
    // ... (Google sign in code from above)
  };

  const signOut = async () => {
    try {
      await auth().signOut();
      console.log('User signed out!');
    } catch (error) {
      console.error(error);
    }
  };

  // CRUD Operations
  const handleCreate = () => {
    if (user && text) {
      addData(user.uid, text);
      setText('');
    }
  };

  const handleRead = async () => {
    if (user) {
      const snapshot = await database().ref(`/users/${user.uid}`).once('value');
      setData(snapshot.val());
    }
  };

  const handleUpdate = () => {
    if (user && text) {
      updateData(user.uid, text);
      setText('');
    }
  };

  const handleDelete = () => {
    if (user) {
      deleteData(user.uid);
      setData(null);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      {user ? (
        <>
          <Text>Welcome, {user.email}</Text>
          <Button title="Sign Out" onPress={signOut} />

          <TextInput
            value={text}
            onChangeText={setText}
            placeholder="Enter data"
            style={{ borderWidth: 1, marginTop: 20, padding: 10 }}
          />

          <View style={{ marginTop: 20 }}>
            <Button title="Create" onPress={handleCreate} />
            <Button title="Read" onPress={handleRead} />
            <Button title="Update" onPress={handleUpdate} />
            <Button title="Delete" onPress={handleDelete} />
          </View>

          {data && (
            <Text style={{ marginTop: 20 }}>
              Current Data: {JSON.stringify(data, null, 2)}
            </Text>
          )}
        </>
      ) : (
        <Button title="Sign In with Google" onPress={signInWithGoogle} />
      )}
    </View>
  );
};

export default FireApp;

Pro Tips from My Experience 💡

  1. Error Handling: Always wrap Firebase operations in try-catch blocks
  2. Authentication State: Use listeners to track auth state changes
  3. Database Security: Set up proper Firebase rules
  4. Offline Support: Firebase Realtime Database has built-in offline support!
  5. Debug Mode: Enable Firebase debug mode during development

Common Pitfalls I Encountered

  • Forgetting to configure SHA-1 fingerprint for Android
  • Not enabling Google Sign-In in Firebase Console
  • Firebase rules too restrictive (or too open!)
  • Mixing promises with async/await

Resources That Saved My Life 🙏

  1. React Native Firebase Documentation
  2. Firebase Console
  3. React Native Google SignIn Docs
  4. Stack Overflow (obviously!)
  5. Firebase YouTube Channel

Conclusion

Building FireApp was challenging but incredibly rewarding. React Native with Firebase is a powerful combination for creating cross-platform mobile apps. Remember, every expert was once a beginner. Keep coding, keep failing, and most importantly, keep learning!

Go build something amazing! 🚀

P.S.: If you're stuck somewhere, DM me on LinkedIn or check out my GitHub for the complete source code!

#ReactNative #Firebase #MobileDevelopment #Authentication #CRUD #IndianDevelopers