Build a real-world mobile app using React Native Expo and Firebase. This beginner-friendly JavaScript guide covers secure registration, login, image uploads with metadata, and full Edit/Delete capabilities with security rules.

Introduction

In this guide, we build a "Photo Diary" application. You will learn how to manage user accounts, store image files in the cloud, and sync data in real-time. We will use vanilla JavaScript and React Native's StyleSheet for a clean, professional look.

1. Firebase Configuration (firebaseConfig.js)

This file connects your frontend to your Google Cloud backend.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);
    

2. App Gatekeeper (App.js)

We use a listener to check if a user is registered and logged in.

import React, { useState, useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from './firebaseConfig';
import AuthScreen from './AuthScreen';
import GalleryScreen from './GalleryScreen';

export default function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    return onAuthStateChanged(auth, (u) => setUser(u));
  }, []);

  return user ? <GalleryScreen /> : <AuthScreen />;
}
    

3. Authentication Screen (AuthScreen.js)

This handles both User Registration and Login.

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import { signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebaseConfig';

export default function AuthScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isRegistering, setIsRegistering] = useState(false);

  const handleAuth = async () => {
    try {
      if (isRegistering) {
        await createUserWithEmailAndPassword(auth, email, password);
      } else {
        await signInWithEmailAndPassword(auth, email, password);
      }
    } catch (err) { Alert.alert("Error", err.message); }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{isRegistering ? "Create Account" : "Welcome Back"}</Text>
      <TextInput placeholder="Email" style={styles.input} onChangeText={setEmail} value={email} autoCapitalize="none" />
      <TextInput placeholder="Password" style={styles.input} secureTextEntry onChangeText={setPassword} value={password} />
      <TouchableOpacity style={styles.btn} onPress={handleAuth}>
        <Text style={styles.btnText}>{isRegistering ? "Sign Up" : "Login"}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setIsRegistering(!isRegistering)}>
        <Text style={styles.toggleText}>
          {isRegistering ? "Already have an account? Login" : "New here? Register now"}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 25, backgroundColor: '#fff' },
  title: { fontSize: 30, fontWeight: 'bold', marginBottom: 30 },
  input: { borderBottomWidth: 1, borderColor: '#ccc', marginBottom: 20, padding: 10 },
  btn: { backgroundColor: '#007AFF', padding: 15, borderRadius: 10, alignItems: 'center' },
  btnText: { color: '#fff', fontWeight: 'bold' },
  toggleText: { marginTop: 20, textAlign: 'center', color: '#007AFF' }
});
    

4. The Gallery CRUD (GalleryScreen.js)

This includes Picking, Uploading, Reading, Editing, and Deleting.

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, Image, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Modal, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
import { collection, addDoc, onSnapshot, query, orderBy, deleteDoc, doc, updateDoc } from 'firebase/firestore';
import { auth, storage, db } from './firebaseConfig';

export default function GalleryScreen() {
  const [images, setImages] = useState([]);
  const [loading, setLoading] = useState(false);
  const [title, setTitle] = useState('');
  const [desc, setDesc] = useState('');
  const [imageUri, setImageUri] = useState(null);
  const [editItem, setEditItem] = useState(null);

  useEffect(() => {
    const q = query(collection(db, "posts"), orderBy("createdAt", "desc"));
    return onSnapshot(q, (snap) => setImages(snap.docs.map(d => ({ id: d.id, ...d.data() }))));
  }, []);

  const pickImage = async () => {
    let res = await ImagePicker.launchImageLibraryAsync({ allowsEditing: true, quality: 0.5 });
    if (!res.canceled) setImageUri(res.assets[0].uri);
  };

  const handleUpload = async () => {
    if (!imageUri || !title) return Alert.alert("Error", "Required fields missing!");
    setLoading(true);
    try {
      const blob = await (await fetch(imageUri)).blob();
      const sRef = ref(storage, `pics/${Date.now()}`);
      await uploadBytes(sRef, blob);
      const url = await getDownloadURL(sRef);
      await addDoc(collection(db, "posts"), {
        url, title, desc, path: sRef.fullPath, uid: auth.currentUser.uid, createdAt: new Date()
      });
      setImageUri(null); setTitle(''); setDesc('');
    } catch (e) { Alert.alert("Error", e.message); }
    setLoading(false);
  };

  const handleDelete = async (id, path) => {
    await deleteObject(ref(storage, path));
    await deleteDoc(doc(db, "posts", id));
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => auth.signOut()}><Text>Logout</Text></TouchableOpacity>
      <View style={styles.addCard}>
        <TouchableOpacity style={styles.pickBtn} onPress={pickImage}><Text>Pick Image</Text></TouchableOpacity>
        <TextInput placeholder="Title" style={styles.input} value={title} onChangeText={setTitle} />
        <TextInput placeholder="Description" style={styles.input} value={desc} onChangeText={setDesc} />
        <TouchableOpacity style={styles.upBtn} onPress={handleUpload}>
           {loading ? <ActivityIndicator color="#fff" /> : <Text style={{color:'#fff'}}>Post</Text>}
        </TouchableOpacity>
      </View>
      <FlatList data={images} keyExtractor={item => item.id} renderItem={({ item }) => (
        <View style={styles.card}>
          <Image source={{ uri: item.url }} style={styles.img} />
          <View style={{padding: 10}}>
            <Text style={{fontWeight: 'bold'}}>{item.title}</Text>
            <Text>{item.desc}</Text>
            <TouchableOpacity onPress={() => setEditItem(item)}><Text style={{color: 'blue'}}>Edit</Text></TouchableOpacity>
            <TouchableOpacity onPress={() => handleDelete(item.id, item.path)}><Text style={{color: 'red'}}>Delete</Text></TouchableOpacity>
          </View>
        </View>
      )} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f5f5', paddingTop: 50 },
  addCard: { backgroundColor: '#fff', margin: 15, padding: 15, borderRadius: 10 },
  input: { borderBottomWidth: 1, borderColor: '#eee', marginBottom: 10 },
  pickBtn: { backgroundColor: '#eee', padding: 10, alignItems: 'center' },
  upBtn: { backgroundColor: '#007AFF', padding: 12, alignItems: 'center' },
  card: { backgroundColor: '#fff', margin: 15, borderRadius: 10, overflow: 'hidden' },
  img: { width: '100%', height: 200 }
});
    

5. Firebase Security Rules

Deploy these to the Firebase Console to protect your free tier.

// Firestore Rules
match /posts/{postId} {
  allow read: if request.auth != null;
  allow create: if request.auth != null && request.resource.data.uid == request.auth.uid;
  allow update, delete: if request.auth != null && request.auth.uid == resource.data.uid;
}

// Storage Rules
match /pics/{allPaths=**} {
  allow read, write: if request.auth != null;
}
    

Conclusion

You have now built a fully authenticated app with a live cloud database and image storage. Using the StyleSheet method ensures your app remains high-performance and modern.