React Native Firebase: Push Notifications and Analytics Setup

The Mobile App That Took 6 Months (And How to Do It in 6 Weeks)

Last year, our team rebuilt our mobile app from scratch. Here's what actually worked.

Table of Contents

• Mobile Development in 2026
• Core Architecture
• 5 Essential Patterns
• Performance Optimization
• Native Features Integration
• Testing Strategy
• Deployment Process
• FAQ
• Production Checklist

Mobile Development in 2026

The landscape has evolved dramatically.

Old Approach

// Native separately for each platform
// iOS: Swift
// Android: Kotlin
// Web: React
// = 3 codebases to maintain

Modern Cross-Platform

// One codebase, three platforms
import { View, Text } from 'react-native';

export function UniversalComponent() {
  return (
    <View>
      <Text>Works on iOS, Android, and Web</Text>
    </View>
  );
}

Why It Matters

Ship 3x faster with better consistency.

Core Architecture

Understanding the foundation.

Project Structure

// Organized for scale
src/
  components/
    shared/
    ios/
    android/
  screens/
  navigation/
  api/
  utils/

State Management

// Clean state handling
import { create } from 'zustand';

interface AppState {
  user: User | null;
  setUser: (user: User) => void;
}

export const useAppStore = create<AppState>((set) => ({
  user: null,
  setUser: (user) => set({ user })
}));

Navigation Setup

Routing that makes sense.

Pattern 1: Performance

Optimizing Renders

// Prevent unnecessary re-renders
import { memo, useMemo } from 'react';

const ExpensiveComponent = memo(({ data }) => {
  const processed = useMemo(() => {
    return processData(data);
  }, [data]);

  return <View>{processed}</View>;
});

List Virtualization

// Handle large lists
import { FlashList } from '@shopify/flash-list';

function LargeList({ items }) {
  return (
    <FlashList
      data={items}
      renderItem={({ item }) => <Item data={item} />}
      estimatedItemSize={100}
    />
  );
}

Image Optimization

Lazy loading and caching.

Pattern 2: Native Features

Camera Access

// Cross-platform camera
import { Camera } from 'expo-camera';

function CameraScreen() {
  const [permission, requestPermission] = Camera.useCameraPermissions();

  if (!permission?.granted) {
    return <Button onPress={requestPermission} title="Grant Access" />;
  }

  return <Camera style={{ flex: 1 }} />;
}

Push Notifications

// Universal notifications
import * as Notifications from 'expo-notifications';

async function registerForPushNotifications() {
  const { status } = await Notifications.requestPermissionsAsync();

  if (status !== 'granted') {
    return;
  }

  const token = await Notifications.getExpoPushTokenAsync();
  return token.data;
}

Location Services

Cross-platform geolocation.

Pattern 3: Offline Support

Local Storage

// AsyncStorage wrapper
import AsyncStorage from '@react-native-async-storage/async-storage';

class StorageService {
  async save<T>(key: string, value: T): Promise<void> {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  }

  async load<T>(key: string): Promise<T | null> {
    const data = await AsyncStorage.getItem(key);
    return data ? JSON.parse(data) : null;
  }
}

Sync Strategy

Handle offline/online transitions.

Conflict Resolution

Merge changes intelligently.

Pattern 4: Authentication

Secure Storage

// Store tokens securely
import * as SecureStore from 'expo-secure-store';

async function saveToken(token: string) {
  await SecureStore.setItemAsync('authToken', token);
}

async function getToken(): Promise<string | null> {
  return await SecureStore.getItemAsync('authToken');
}

Biometric Auth

// Face ID / Touch ID
import * as LocalAuthentication from 'expo-local-authentication';

async function authenticateWithBiometrics() {
  const result = await LocalAuthentication.authenticateAsync({
    promptMessage: 'Authenticate to continue'
  });

  return result.success;
}

Session Management

Handle token refresh automatically.

Pattern 5: Deep Linking

Universal Links

// Handle deep links
import * as Linking from 'expo-linking';

function useDeepLinking() {
  useEffect(() => {
    const handleUrl = ({ url }) => {
      const { path, queryParams } = Linking.parse(url);
      // Navigate based on path
    };

    Linking.addEventListener('url', handleUrl);
    return () => Linking.removeEventListener('url', handleUrl);
  }, []);
}

Navigation Integration

Route to specific screens.

Performance Benchmarks

Testing Strategy

Unit Tests

// Test business logic
import { render, fireEvent } from '@testing-library/react-native';

test('button increments counter', () => {
  const { getByText } = render(<Counter />);
  const button = getByText('Increment');

  fireEvent.press(button);
  expect(getByText('Count: 1')).toBeTruthy();
});

E2E Tests

Use Detox or Maestro.

Device Testing

Test on real devices.

Deployment Process

Build Configuration

// app.json
{
  "expo": {
    "name": "MyApp",
    "version": "1.0.0",
    "ios": {
      "bundleIdentifier": "com.myapp",
      "buildNumber": "1"
    },
    "android": {
      "package": "com.myapp",
      "versionCode": 1
    }
  }
}

CI/CD Pipeline

Automate build and deploy.

Release Strategy

Beta testing before public.

FAQ

Q1: Which framework to choose?

React Native for web developers, Flutter for best performance.

Q2: How to handle app size?

Use dynamic imports and code splitting.

Q3: Native modules needed?

Most features work cross-platform now.

Q4: iOS vs Android differences?

Modern frameworks abstract most differences.

Q5: Performance compared to native?

Near-native with proper optimization.

Production Checklist

Before Launch

• [ ] Test on real devices
• [ ] Optimize images and assets
• [ ] Set up crash reporting
• [ ] Configure analytics
• [ ] Test deep links
• [ ] Verify push notifications
• [ ] Check offline functionality
• [ ] Review app store guidelines

After Launch

• Monitor crash rates
• Track user feedback
• Optimize based on data
• Plan update cadence

Conclusion

Mobile development is more accessible than ever.

Key takeaways:

• Start with cross-platform
• Optimize early and often
• Test on real devices
• Monitor production metrics
• Iterate based on feedback

Build apps users love.

Resources:

• Official Documentation
• Community Examples
• Performance Guides
• Deployment Tutorials

Next Steps:

1. Set up development environment
2. Build first screen
3. Add navigation
4. Integrate APIs
5. Test and deploy

Ship your mobile app today.