⟐ Dev Tools/2026-03-31Advanced

Gemini API × React Native Operational Notes — Indie Mobile App in Production

Operational notes from running Gemini API inside a React Native/Expo indie mobile app on iOS and Android: real device pitfalls, AdMob coexistence, Cold Start mitigation, AsyncStorage TTL design, and cost realities at 65,000 monthly requests

gemini-api²⁸⁶react-nativeexpomobile-app³ streaming²⁸ vision⁵ production¹⁴⁰

✦ Premium Article

Calling Gemini API From Inside an Indie Mobile App

I'm Hirokawa (@dolice). I've been shipping iOS and Android apps as a solo developer since 2014. AdMob has been the revenue base the whole time, so I instinctively pay attention to server cost whenever I add a new dependency — AI included.

Since early 2026 I've been integrating Gemini API into two of my apps: a wallpaper app and a relaxation app. Nothing flashy — short text generation tailored to a chosen image, three recommended wallpaper categories from a mood input. Lightweight AI touches.

Honestly, the first few weeks did not go smoothly. Things worked in the simulator and broke on the device. TestFlight builds would freeze for eight seconds on first launch. Streaming would hang the moment Wi-Fi dropped. AdMob requests collided with Gemini ones and pushed low-RAM Android devices into memory pressure.

These are the notes from working through those problems. If you're writing a production React Native / Expo app with Gemini API, this is where I'd want to put the cache, which model I'd reach for, and where I'd insert a Cloud Functions proxy — backed by code and the actual numbers I measure from my own apps.

Development Environment Setup

Prerequisites

Node.js 18 or higher — Required for Expo CLI with Expo SDK 51+
Expo CLI — Install with npm install -g expo-cli
iOS or Android device/emulator — For testing
Gemini API key — Get free from Google AI Studio

Project Initialization

# Create a new Expo project
npx create-expo-app GeminiAIChat
 
# Navigate to project directory
cd GeminiAIChat
 
# Install required dependencies
npm install \
  @google/generative-ai \
  react-native-async-storage \
  expo-camera \
  expo-image-picker \
  expo-network \
  @react-navigation/native \
  @react-navigation/bottom-tabs \
  react-native-screens \
  react-native-safe-area-context
 
# Optional: Add TypeScript support
npm install --save-dev typescript @types/react-native

Project Structure

GeminiAIChat/
├── app.json
├── App.tsx
├── src/
│   ├── config/
│   │   └── gemini.ts
│   ├── hooks/
│   │   ├── useNetwork.ts
│   │   ├── useGeminiChat.ts
│   │   └── useStorage.ts
│   ├── components/
│   │   ├── ChatScreen.tsx
│   │   ├── CameraScreen.tsx
│   │   ├── MessageBubble.tsx
│   │   └── LoadingIndicator.tsx
│   ├── services/
│   │   ├── geminiService.ts
│   │   ├── cacheService.ts
│   │   └── imageService.ts
│   └── types/
│       └── index.ts
└── package.json

✦

Thank you for reading this far.

Continue Reading

What follows includes implementation code, benchmarks, and practical content we hope you'll find useful. This site runs without ads — server and development costs are supported entirely by members like you. If it's been helpful, we'd be truly grateful for your support.

WHAT YOU'LL LEARN

✦Real-world Gemini API integration into an indie iOS/Android app monetized with AdMob — what actually broke and how I fixed it

✦Seven implementation insights you won't find in the docs (streaming JS-thread jank, AsyncStorage TTL, SecureStore failure on Android, Cold Start long tail, camera permission revocation, Base64 memory blowup, bundle size)

✦How I split Gemini Flash and Pro in an AdMob-funded app, why I route everything through a Cloud Functions proxy, and the monthly-budget / 30 × 1.3 alert formula I use

Secure payment via Stripe · Cancel anytime

✦

Unlock This Article

Get full access to the rest of this article. Buy once, read anytime. This site is ad-free — your support goes directly toward keeping it running.

Unlock all articles with Membership →

Gemini API Integration

Secure API Key Management

Expo apps treat API keys as public environment variables. Sensitive operations should route through a backend.

# .env.local (never commit this)
EXPO_PUBLIC_GEMINI_API_KEY=YOUR_GEMINI_API_KEY
EXPO_PUBLIC_API_BASE_URL=https://generativelanguage.googleapis.com/v1beta/models

Reference in app.json:

{
  "expo": {
    "name": "GeminiAIChat",
    "slug": "gemini-ai-chat",
    "version": "1.0.0",
    "plugins": ["expo-camera"],
    "extra": {
      "geminiApiKey": "${EXPO_PUBLIC_GEMINI_API_KEY}"
    }
  }
}

Gemini Client Initialization

src/config/gemini.ts:

import { GoogleGenerativeAI } from "@google/generative-ai";
 
const geminiClient = new GoogleGenerativeAI(
  process.env.EXPO_PUBLIC_GEMINI_API_KEY || ""
);
 
export const getGeminiModel = (modelName = "gemini-2.0-flash") => {
  return geminiClient.getGenerativeModel({ model: modelName });
};
 
export const createChatSession = (model: any, systemPrompt?: string) => {
  const history: any[] = [];
 
  if (systemPrompt) {
    history.push({
      role: "user",
      parts: [{ text: systemPrompt }],
    });
    history.push({
      role: "model",
      parts: [{ text: "Understood. I'll respond with that context in mind." }],
    });
  }
 
  return model.startChat({ history });
};
 
export default geminiClient;

Network and Async Handling

src/hooks/useNetwork.ts:

import { useState, useEffect } from "react";
import * as Network from "expo-network";
 
export const useNetwork = () => {
  const [isOnline, setIsOnline] = useState(true);
  const [connectionType, setConnectionType] = useState<string | null>(null);
 
  useEffect(() => {
    let subscription: any;
 
    const checkNetwork = async () => {
      const state = await Network.getNetworkStateAsync();
      setIsOnline(state.isInternetReachable ?? false);
      setConnectionType(state.type);
    };
 
    checkNetwork();
 
    if (Network.addEventListener) {
      subscription = Network.addEventListener("networkStateChange", (state) => {
        setIsOnline(state.isInternetReachable ?? false);
        setConnectionType(state.type);
      });
    }
 
    return () => {
      if (subscription) subscription.remove();
    };
  }, []);
 
  return { isOnline, connectionType };
};

Streaming Chat UI

Gemini Streaming Integration

src/services/geminiService.ts:

import { getGeminiModel, createChatSession } from "../config/gemini";
 
interface Message {
  id: string;
  role: "user" | "model";
  text: string;
  timestamp: Date;
  isStreaming?: boolean;
}
 
export const sendMessageWithStreaming = async (
  userMessage: string,
  onChunk: (chunk: string) => void,
  onComplete: (fullResponse: string) => void,
  onError: (error: string) => void
): Promise<void> => {
  try {
    const model = getGeminiModel();
    const chat = createChatSession(
      model,
      "You are a helpful AI assistant. Be concise and friendly."
    );
 
    const stream = await chat.sendMessageStream(userMessage);
 
    let fullResponse = "";
 
    // Process streaming chunks as they arrive
    for await (const chunk of stream.stream) {
      const chunkText =
        chunk.candidates?.[0]?.content?.parts[0]?.text || "";
 
      if (chunkText) {
        fullResponse += chunkText;
        onChunk(chunkText); // Real-time UI update
      }
    }
 
    onComplete(fullResponse || "");
  } catch (error) {
    const errorMessage =
      error instanceof Error ? error.message : "Network error occurred";
    onError(errorMessage);
  }
};
 
export const generateMessageId = (): string => {
  return `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
};

Chat Screen Implementation

src/components/ChatScreen.tsx:

import React, { useState, useRef, useEffect, useCallback } from "react";
import {
  View,
  Text,
  TextInput,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
} from "react-native";
import { useNetwork } from "../hooks/useNetwork";
import {
  sendMessageWithStreaming,
  generateMessageId,
} from "../services/geminiService";
 
interface Message {
  id: string;
  role: "user" | "model";
  text: string;
  timestamp: Date;
  isStreaming?: boolean;
}
 
export const ChatScreen = () => {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "welcome",
      role: "model",
      text: "Hello! How can I help you today?",
      timestamp: new Date(),
    },
  ]);
 
  const [inputText, setInputText] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [streamingText, setStreamingText] = useState("");
  const scrollViewRef = useRef<ScrollView>(null);
  const { isOnline } = useNetwork();
 
  const handleSendMessage = useCallback(async () => {
    if (!inputText.trim() || !isOnline || isLoading) return;
 
    const userMessage: Message = {
      id: generateMessageId(),
      role: "user",
      text: inputText.trim(),
      timestamp: new Date(),
    };
 
    setMessages((prev) => [...prev, userMessage]);
    setInputText("");
    setIsLoading(true);
    setStreamingText("");
 
    const modelMessageId = generateMessageId();
    const modelMessage: Message = {
      id: modelMessageId,
      role: "model",
      text: "",
      timestamp: new Date(),
      isStreaming: true,
    };
 
    setMessages((prev) => [...prev, modelMessage]);
 
    await sendMessageWithStreaming(
      userMessage.text,
      (chunk: string) => {
        setStreamingText((prev) => prev + chunk);
      },
      (fullResponse: string) => {
        setMessages((prev) =>
          prev.map((msg) =>
            msg.id === modelMessageId
              ? {
                  ...msg,
                  text: fullResponse,
                  isStreaming: false,
                }
              : msg
          )
        );
        setStreamingText("");
        setIsLoading(false);
      },
      (error: string) => {
        setMessages((prev) =>
          prev.map((msg) =>
            msg.id === modelMessageId
              ? {
                  ...msg,
                  text: `Error: ${error}`,
                  isStreaming: false,
                }
              : msg
          )
        );
        setIsLoading(false);
      }
    );
  }, [inputText, isOnline, isLoading]);
 
  useEffect(() => {
    scrollViewRef.current?.scrollToEnd({ animated: true });
  }, [messages, streamingText]);
 
  const displayMessages = [
    ...messages,
    ...(streamingText
      ? [
          {
            id: "streaming",
            role: "model" as const,
            text: streamingText,
            timestamp: new Date(),
            isStreaming: true,
          },
        ]
      : []),
  ];
 
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      {!isOnline && (
        <View style={styles.offlineBar}>
          <Text style={styles.offlineText}>Offline mode</Text>
        </View>
      )}
 
      <ScrollView
        ref={scrollViewRef}
        contentContainerStyle={styles.messagesContainer}
      >
        {displayMessages.map((msg) => (
          <MessageBubble
            key={msg.id}
            message={msg}
            isStreaming={msg.isStreaming}
          />
        ))}
      </ScrollView>
 
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Type a message..."
          placeholderTextColor="#999"
          value={inputText}
          onChangeText={setInputText}
          editable={!isLoading && isOnline}
          multiline
          maxLength={1000}
        />
        <TouchableOpacity
          style={[
            styles.sendButton,
            { opacity: isLoading || !isOnline ? 0.5 : 1 },
          ]}
          onPress={handleSendMessage}
          disabled={isLoading || !isOnline}
        >
          {isLoading ? (
            <ActivityIndicator color="#fff" />
          ) : (
            <Text style={styles.sendButtonText}>Send</Text>
          )}
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  offlineBar: {
    backgroundColor: "#ff6b6b",
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  offlineText: {
    color: "#fff",
    fontSize: 12,
    textAlign: "center",
  },
  messagesContainer: {
    flexGrow: 1,
    paddingVertical: 16,
    paddingHorizontal: 12,
  },
  inputContainer: {
    flexDirection: "row",
    paddingHorizontal: 12,
    paddingVertical: 12,
    borderTopWidth: 1,
    borderTopColor: "#e0e0e0",
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 10,
    marginRight: 8,
    maxHeight: 100,
    fontSize: 14,
  },
  sendButton: {
    backgroundColor: "#0066ff",
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  sendButtonText: {
    color: "#fff",
    fontSize: 14,
    fontWeight: "bold",
  },
});

Message Bubble Component

src/components/MessageBubble.tsx:

import React from "react";
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
 
interface Message {
  id: string;
  role: "user" | "model";
  text: string;
  timestamp: Date;
  isStreaming?: boolean;
}
 
export const MessageBubble = ({ message, isStreaming }: any) => {
  const isUser = message.role === "user";
 
  return (
    <View
      style={[
        styles.container,
        isUser ? styles.userContainer : styles.modelContainer,
      ]}
    >
      <View
        style={[
          styles.bubble,
          isUser ? styles.userBubble : styles.modelBubble,
        ]}
      >
        <Text
          style={[styles.text, isUser ? styles.userText : styles.modelText]}
        >
          {message.text}
        </Text>
        {isStreaming && (
          <ActivityIndicator
            size="small"
            color={isUser ? "#0066ff" : "#999"}
            style={styles.indicator}
          />
        )}
      </View>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    marginBottom: 12,
    flexDirection: "row",
  },
  userContainer: {
    justifyContent: "flex-end",
  },
  modelContainer: {
    justifyContent: "flex-start",
  },
  bubble: {
    maxWidth: "80%",
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 16,
  },
  userBubble: {
    backgroundColor: "#0066ff",
  },
  modelBubble: {
    backgroundColor: "#f0f0f0",
  },
  text: {
    fontSize: 14,
    lineHeight: 20,
  },
  userText: {
    color: "#fff",
  },
  modelText: {
    color: "#000",
  },
  indicator: {
    marginTop: 4,
  },
});

Camera and Vision Integration

Camera Permissions

Add to app.json:

{
  "expo": {
    "plugins": ["expo-camera"],
    "permissions": [
      "CAMERA",
      "CAMERA_ROLL",
      "PHOTO_LIBRARY",
      "READ_EXTERNAL_STORAGE"
    ]
  }
}

Camera Screen

src/components/CameraScreen.tsx:

import React, { useRef, useState } from "react";
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  ActivityIndicator,
} from "react-native";
import { Camera, CameraType } from "expo-camera";
import * as ImagePicker from "expo-image-picker";
import { analyzeImageWithGemini } from "../services/imageService";
 
interface CameraScreenProps {
  onAnalysisComplete: (result: string) => void;
  onClose: () => void;
}
 
export const CameraScreen = ({
  onAnalysisComplete,
  onClose,
}: CameraScreenProps) => {
  const cameraRef = useRef<Camera>(null);
  const [type, setType] = useState(CameraType.back);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
 
  const takePicture = async () => {
    if (cameraRef.current) {
      setIsAnalyzing(true);
      try {
        const photo = await cameraRef.current.takePictureAsync({
          quality: 0.7,
          base64: false,
        });
 
        const base64 = await convertImageToBase64(photo.uri);
        const result = await analyzeImageWithGemini(base64);
 
        onAnalysisComplete(result);
      } catch (error) {
        console.error("Photo error:", error);
      } finally {
        setIsAnalyzing(false);
      }
    }
  };
 
  const pickImage = async () => {
    setIsAnalyzing(true);
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ["images"],
        quality: 0.7,
        base64: false,
      });
 
      if (!result.canceled) {
        const base64 = await convertImageToBase64(result.assets[0].uri);
        const analysisResult = await analyzeImageWithGemini(base64);
        onAnalysisComplete(analysisResult);
      }
    } catch (error) {
      console.error("Gallery error:", error);
    } finally {
      setIsAnalyzing(false);
    }
  };
 
  return (
    <View style={styles.container}>
      <Camera ref={cameraRef} style={styles.camera} type={type}>
        <View style={styles.topBar}>
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <Text style={styles.closeButtonText}>×</Text>
          </TouchableOpacity>
        </View>
 
        <View style={styles.bottomBar}>
          <TouchableOpacity
            style={styles.galleryButton}
            onPress={pickImage}
            disabled={isAnalyzing}
          >
            <Text style={styles.buttonText}>Gallery</Text>
          </TouchableOpacity>
 
          <TouchableOpacity
            style={[
              styles.captureButton,
              isAnalyzing && styles.captureButtonDisabled,
            ]}
            onPress={takePicture}
            disabled={isAnalyzing}
          >
            {isAnalyzing ? (
              <ActivityIndicator color="#fff" size="large" />
            ) : (
              <View style={styles.captureButtonInner} />
            )}
          </TouchableOpacity>
 
          <TouchableOpacity
            style={styles.flipButton}
            onPress={() =>
              setType(
                type === CameraType.back ? CameraType.front : CameraType.back
              )
            }
            disabled={isAnalyzing}
          >
            <Text style={styles.buttonText}>Flip</Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
};
 
const convertImageToBase64 = async (imageUri: string): Promise<string> => {
  // Implementation with expo-file-system
  // Simplified here
  return "";
};
 
const styles = StyleSheet.create({
  container: { flex: 1 },
  camera: { flex: 1 },
  topBar: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "flex-start",
    paddingTop: 16,
    paddingLeft: 16,
  },
  closeButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
  closeButtonText: { color: "#fff", fontSize: 24 },
  bottomBar: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    paddingBottom: 32,
    backgroundColor: "rgba(0,0,0,0.3)",
  },
  captureButton: {
    width: 70,
    height: 70,
    borderRadius: 35,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
  },
  captureButtonInner: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: "red",
  },
  captureButtonDisabled: { opacity: 0.5 },
  galleryButton: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: "rgba(255,255,255,0.2)",
    borderRadius: 8,
  },
  flipButton: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: "rgba(255,255,255,0.2)",
    borderRadius: 8,
  },
  buttonText: { color: "#fff", fontSize: 12, fontWeight: "bold" },
});

Image Analysis Service

src/services/imageService.ts:

import { getGeminiModel } from "../config/gemini";
 
export const analyzeImageWithGemini = async (
  base64Image: string,
  prompt: string = "Describe this image in detail"
): Promise<string> => {
  try {
    const model = getGeminiModel();
 
    const response = await model.generateContent([
      {
        inlineData: {
          data: base64Image,
          mimeType: "image/jpeg",
        },
      },
      prompt,
    ]);
 
    return response.response.text();
  } catch (error) {
    throw new Error(
      `Image analysis error: ${error instanceof Error ? error.message : "Unknown error"}`
    );
  }
};
 
export const compressImage = async (
  imageUri: string,
  targetWidth: number = 800
): Promise<string> => {
  // Implementation with expo-image-manipulator
  // Simplified here
  return imageUri;
};

Offline-First Architecture

Cache Service

src/services/cacheService.ts:

import AsyncStorage from "@react-native-async-storage/async-storage";
 
interface CacheEntry {
  id: string;
  userMessage: string;
  modelResponse: string;
  timestamp: number;
  hasSynced: boolean;
}
 
const CACHE_KEY = "gemini_chat_cache";
const SYNC_QUEUE_KEY = "gemini_sync_queue";
 
export const saveChatToCache = async (
  message: CacheEntry
): Promise<void> => {
  try {
    const cache = await getCacheData();
    cache.push(message);
 
    // Keep latest 100 messages
    const limitedCache = cache.slice(-100);
 
    await AsyncStorage.setItem(CACHE_KEY, JSON.stringify(limitedCache));
  } catch (error) {
    console.error("Cache save error:", error);
  }
};
 
export const getCacheData = async (): Promise<CacheEntry[]> => {
  try {
    const data = await AsyncStorage.getItem(CACHE_KEY);
    return data ? JSON.parse(data) : [];
  } catch (error) {
    console.error("Cache read error:", error);
    return [];
  }
};
 
export const addToSyncQueue = async (
  message: CacheEntry
): Promise<void> => {
  try {
    const queue = await getSyncQueue();
    queue.push(message);
    await AsyncStorage.setItem(SYNC_QUEUE_KEY, JSON.stringify(queue));
  } catch (error) {
    console.error("Sync queue error:", error);
  }
};
 
export const getSyncQueue = async (): Promise<CacheEntry[]> => {
  try {
    const data = await AsyncStorage.getItem(SYNC_QUEUE_KEY);
    return data ? JSON.parse(data) : [];
  } catch (error) {
    return [];
  }
};
 
export const clearSyncQueue = async (): Promise<void> => {
  try {
    await AsyncStorage.removeItem(SYNC_QUEUE_KEY);
  } catch (error) {
    console.error("Clear queue error:", error);
  }
};
 
export const syncOfflineMessages = async (
  syncFunction: (message: CacheEntry) => Promise<void>
): Promise<void> => {
  const queue = await getSyncQueue();
 
  for (const message of queue) {
    try {
      await syncFunction(message);
      const cache = await getCacheData();
      const updatedCache = cache.map((c) =>
        c.id === message.id ? { ...c, hasSynced: true } : c
      );
      await AsyncStorage.setItem(CACHE_KEY, JSON.stringify(updatedCache));
    } catch (error) {
      console.error(`Sync failed for message ${message.id}:`, error);
    }
  }
 
  await clearSyncQueue();
};

Network Recovery Hook

src/hooks/useGeminiChat.ts:

import { useEffect, useState } from "react";
import { useNetwork } from "./useNetwork";
import { getSyncQueue, syncOfflineMessages } from "../services/cacheService";
 
export const useGeminiChat = () => {
  const { isOnline } = useNetwork();
  const [isSyncing, setIsSyncing] = useState(false);
 
  useEffect(() => {
    if (isOnline && !isSyncing) {
      performSync();
    }
  }, [isOnline]);
 
  const performSync = async () => {
    const queue = await getSyncQueue();
    if (queue.length === 0) return;
 
    setIsSyncing(true);
    try {
      await syncOfflineMessages(async (message) => {
        // Backend sync logic
        console.log("Syncing message:", message.id);
      });
    } catch (error) {
      console.error("Sync error:", error);
    } finally {
      setIsSyncing(false);
    }
  };
 
  return { isOnline, isSyncing };
};

Seven Implementation Insights You Won't Find in the Docs

These are seven things the Gemini API documentation doesn't tell you, but that you'll hit if you actually ship a React Native app in production. All of them come from problems I worked through in my wallpaper app and relaxation app.

1. Throttle setState during streaming to avoid JS-thread jank

The for await loop on sendMessageStream() runs on the JS thread, not the UI thread, but calling setState on every token chokes the Bridge. My first implementation updated setStreamingText per token and the scroll FPS dropped to the high 30s during long replies.

// ❌ Bad: setState per token
for await (const chunk of stream.stream) {
  setStreamingText(prev => prev + (chunk.candidates?.[0]?.content?.parts[0]?.text || ""));
}
 
// ✅ Good: batch with a 50ms flush window
let buffer = "";
let lastFlush = Date.now();
const FLUSH_MS = 50;
 
for await (const chunk of stream.stream) {
  const t = chunk.candidates?.[0]?.content?.parts[0]?.text || "";
  buffer += t;
  if (Date.now() - lastFlush > FLUSH_MS) {
    setStreamingText(prev => prev + buffer);
    buffer = "";
    lastFlush = Date.now();
  }
}
if (buffer) setStreamingText(prev => prev + buffer);

With a 50ms buffer, my iPhone 12 mini scroll FPS recovered from 38 to 58 on real hardware. Pixel 5 went from 42 to 60.

2. AsyncStorage has no TTL

AsyncStorage is a flat key-value store with no built-in expiry. If you naively use it as a cache, six months later users start writing reviews about how heavy the app feels. In one of my apps the cache hit 300 MB before I noticed.

My fix is a thin wrapper that stores expiresAt and checks it on read.

// src/services/ttlCache.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
 
interface CacheEnvelope<T> {
  value: T;
  expiresAt: number;
}
 
const DEFAULT_TTL_MS = 1000 * 60 * 60 * 24 * 7; // 7 days
 
export async function setWithTTL<T>(
  key: string,
  value: T,
  ttlMs: number = DEFAULT_TTL_MS
): Promise<void> {
  const env: CacheEnvelope<T> = { value, expiresAt: Date.now() + ttlMs };
  await AsyncStorage.setItem(key, JSON.stringify(env));
}
 
export async function getWithTTL<T>(key: string): Promise<T | null> {
  const raw = await AsyncStorage.getItem(key);
  if (!raw) return null;
  try {
    const env = JSON.parse(raw) as CacheEnvelope<T>;
    if (Date.now() > env.expiresAt) {
      await AsyncStorage.removeItem(key);
      return null;
    }
    return env.value;
  } catch {
    return null;
  }
}

In my apps I run Gemini text responses with a 7-day TTL, vision results 24 hours, user input history 30 days.

3. `expo-secure-store` occasionally fails on Android

When you save a per-user value (premium unlock token, etc.) alongside something sensitive, expo-secure-store will sometimes return RNSecureKeystore: encrypt failed on the very first launch. The root cause seems to be a Keystore initialization race on Android 12 and later.

I retry, then fall back to a base64-obfuscated AsyncStorage entry.

import * as SecureStore from "expo-secure-store";
import AsyncStorage from "@react-native-async-storage/async-storage";
 
export async function setSecure(key: string, value: string): Promise<void> {
  for (let i = 0; i < 3; i++) {
    try {
      await SecureStore.setItemAsync(key, value);
      return;
    } catch (e) {
      if (i === 2) {
        // Last-resort fallback: base64 obfuscation, not plain text
        await AsyncStorage.setItem(`__fb_${key}`, Buffer.from(value).toString("base64"));
        return;
      }
      await new Promise(r => setTimeout(r, 200 * (i + 1)));
    }
  }
}

I never write the value as plain text into AsyncStorage. base64 isn't real encryption, but at least it's not eyeball-readable in a dump. The right answer at production scale is server-side authorization through Cloud Functions — this fallback is for the development phase.

4. Cold Start long tail

When Gemini is called through a Cloud Functions (gen2) proxy, the first request can freeze for 8–15 seconds. My measurement on a real app was a Cold Start p99 of 9.6 seconds.

My workaround is to send a healthcheck request to Cloud Functions right after splash dismiss, so the instance is warm before the user actually touches AI.

// In App.tsx initialization
useEffect(() => {
  // Warm up Functions before user interaction
  fetch(`${FUNCTIONS_BASE_URL}/healthcheck`, { method: "GET" })
    .catch(() => {/* never interrupt user flow */});
}, []);

That alone dropped the first-AI-response perceived latency from 9.6s to 1.8s (p99). minInstances: 1 is the textbook answer, but it adds $25/month, which is meaningful for an AdMob-funded indie app, so I lean on the warm-up trick.

5. Handle camera permission revocation

iOS lets users revoke camera permission from Settings after the fact. When that happens, Camera.requestCameraPermissionsAsync() just returns denied with no UI hint, so users tap the shutter and nothing happens. I picked up two App Store reviews about that before catching it.

const handleOpenCamera = async () => {
  const { status, canAskAgain } = await Camera.requestCameraPermissionsAsync();
  if (status !== "granted") {
    if (!canAskAgain) {
      // Revoked from Settings — must point user there
      Alert.alert(
        "Camera access is disabled",
        "Please allow camera access from Settings.",
        [
          { text: "Cancel", style: "cancel" },
          { text: "Open Settings", onPress: () => Linking.openSettings() },
        ]
      );
    } else {
      Alert.alert("Please grant camera permission.");
    }
    return;
  }
  // Proceed with capture
};

Only show the "Open Settings" path when canAskAgain is false. If you redirect users to Settings while they can still be re-prompted, they get confused.

6. Base64-encoded image memory blowup

takePictureAsync({ base64: true }) on a 4032×3024 photo produces a Base64 string of roughly 14 MB. Pushing that through inlineData to generateContent() momentarily uses about 28 MB during JS Bridge serialization, which is enough to crash a low-spec Android device with under 3 GB RAM.

My fix is to enforce resize-before-base64.

import * as ImageManipulator from "expo-image-manipulator";
 
export async function prepareImageForVision(uri: string): Promise<string> {
  // 1024px long edge, JPEG quality 0.75
  const result = await ImageManipulator.manipulateAsync(
    uri,
    [{ resize: { width: 1024 } }],
    { compress: 0.75, format: ImageManipulator.SaveFormat.JPEG, base64: true }
  );
  if (!result.base64) throw new Error("base64 encode failed");
  return result.base64;
}

At 1024px and quality 0.75, Gemini Vision's analysis quality stays practically the same, and the Base64 string shrinks to about 380 KB — roughly one-thirtieth. Gemini's inline-image pricing also rewards smaller payloads, so this is a win on cost too.

7. Bundle size with AdMob SDK

The @google/generative-ai JS SDK is around 180 KB gzipped, but the AdMob SDK (react-native-google-mobile-ads) is roughly 5.4 MB on iOS and 3.8 MB on Android. Without intervention my release build crossed 60 MB, which triggers warnings in the Play Console pre-optimization size.

My current setup:

Keep AdMob SDK — it's the revenue base
Don't call Gemini API directly from React Native; route everything through a Cloud Functions proxy so the only client dependency is fetch
Drop the @google/generative-ai JS SDK entirely; bundle came back to 38 MB on iOS Release

// No SDK — talk to a Cloud Functions endpoint
export async function callGeminiProxy(prompt: string): Promise<string> {
  const res = await fetch(`${FUNCTIONS_BASE_URL}/gemini-chat`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-app-token": await getAppToken(), // from SecureStore
    },
    body: JSON.stringify({ prompt }),
  });
  if (!res.ok) throw new Error(`gemini proxy ${res.status}`);
  const json = await res.json();
  return json.text;
}

A nice side effect: the API key never ships in the IPA/APK, so reverse-engineering the binary won't leak it. For AdMob-funded apps I treat this as a near-mandatory architecture.

Cost, Latency, and Memory Measured Against a Real Indie App

These are six weeks of production numbers from one of my apps. DAU around 12,000, the Gemini-touching feature is used by roughly 18% of sessions, monthly Gemini request volume around 65,000.

Measured (per model):

Gemini 2.5 Flash, text response — avg 1.4s, p95 3.2s, $0.0014/request
Gemini 2.5 Flash, vision 1024px input — avg 2.1s, p95 4.6s, $0.0023/request
Gemini 2.5 Pro, deeper reasoning — avg 6.8s, p95 14.2s, $0.018/request
Through Cold Start (no warm-up) — p99 9.6s
Through Cold Start (warm-up enabled) — p99 1.8s

Monthly cost breakdown:

Flash regular replies ~58,000 × $0.0014 = ~$81
Flash vision ~6,500 × $0.0023 = ~$15
Pro occasional deep dives ~500 × $0.018 = ~$9
Cloud Functions execution ~65,000 × ~2s = ~$11
Total ~$116/month

AdMob revenue that same month was around $4,200, so adding Gemini didn't dent the unit economics. If I'd lazily defaulted everything to Pro, the bill would have been around $1,170 — roughly 28% of AdMob revenue. The Flash/Pro split isn't an optional optimization.

Operating Lines for AdMob-Funded Apps Using Gemini

This section is specific to indie apps monetized through AdMob. My current rules for keeping ads and AI economically compatible.

Model selection lines

What I currently route where:

Text generation, short summarization, category suggestion → Gemini 2.5 Flash, no exceptions
Image analysis (mood extraction for wallpapers, etc.) → Gemini 2.5 Flash with Vision
Long-form generation, complex reasoning (rare) → Gemini 2.5 Pro, kept under 1% of requests
Thinking mode (thinking_budget) → off by default in indie apps. The 4–5× cost hit doesn't pay back perceived quality

The one exception: if a user is on a paid plan, I switch long-form generation to Pro. The economics make sense because the paid plan absorbs the Pro cost.

Cost alert formula: monthly budget ÷ 30 × 1.3

I configure the Cloud Billing daily alert at monthly budget / 30 × 1.3. The 1.3 multiplier absorbs spikes from launch days or App Store featuring. 1.5 catches issues too late, 1.0 fires every other day.

In practice my monthly budget is $150, so the daily alert sits at $6.50.

Three-key API split

Flash key — handles 95% of normal traffic
Pro key — used only by paying users for deep responses
Emergency key — sits unused as a quick swap if a quota gets exhausted

That isolation keeps a Pro billing issue from blocking ordinary Flash responses. Vertex AI service accounts get you cleaner audit logs, but at indie scale, plain API key separation is plenty.

Cache shape inside the Cloud Functions proxy

I add a tiny cache inside the Cloud Functions proxy too.

1-hour memoization for identical prompts (in-memory, no Memorystore needed)
Key by appstore_id + date hash so a single user mashing the button still bills once

Hit rate runs around 14%, dropping the actual Gemini bill from $116 to about $100. Not dramatic, but the savings compound.

Task-by-Task Gemini Model Cheat Sheet

What I'm currently using in production:

Chat reply (short) — Flash, temperature 0.7, max_output_tokens 512, streaming on
Extract three mood tags from an image — Flash + Vision, temperature 0.3, max_output_tokens 64
Review summarization (overnight batch) — Flash, temperature 0.2, max_output_tokens 256
Long-form generation (premium feature) — Pro, temperature 0.7, max_output_tokens 2048
Code-completion-style suggestions — Flash, temperature 0.1, max_output_tokens 1024
In-app FAQ bot — Flash with safety filter tuning, streaming on

My current take: if you cap temperature and max_output_tokens, Flash covers almost everything you actually need. Pro is reserved for "here matters."

Performance Optimization

Memory-Efficient List Rendering

import { FlatList } from "react-native";
 
export const ChatScreenOptimized = ({
  messages,
  onEndReached,
}: any) => {
  return (
    <FlatList
      data={messages}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <MessageBubble message={item} />}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={50}
      scrollEventThrottle={16}
    />
  );
};

Battery Optimization

import { useState, useEffect } from "react";
import * as BackgroundFetch from "expo-background-fetch";
import * as TaskManager from "expo-task-manager";
 
const BACKGROUND_SYNC_TASK = "background-message-sync";
 
TaskManager.defineTask(BACKGROUND_SYNC_TASK, async () => {
  try {
    // Background sync (keep it lightweight)
    return BackgroundFetch.BackgroundFetchResult.NewData;
  } catch (error) {
    return BackgroundFetch.BackgroundFetchResult.Failed;
  }
});
 
export const setupBackgroundSync = async () => {
  try {
    await BackgroundFetch.registerTaskAsync(BACKGROUND_SYNC_TASK, {
      minimumInterval: 60 * 15, // 15 minutes
      stopOnTerminate: false,
      startOnBoot: true,
    });
  } catch (error) {
    console.error("Background task error:", error);
  }
};

Bundle Size Optimization

{
  "eas": {
    "build": {
      "production": {
        "ios": { "buildType": "release" },
        "android": {
          "buildType": "release",
          "gradleCommand": ":app:bundleRelease"
        }
      }
    }
  }
}

App Store and Google Play Deployment

EAS Build Configuration

# Configure for EAS
eas build:configure
 
# Build for iOS
eas build --platform ios --auto-submit
 
# Build for Android
eas build --platform android --auto-submit

eas.json:

{
  "cli": { "version": ">= 8.0.0" },
  "build": {
    "production": {
      "ios": {
        "node": "18.13.0",
        "team": "YOUR_APPLE_TEAM_ID"
      },
      "android": {
        "node": "18.13.0",
        "env": { "ANDROID_BUILD_NUMBER": "1" }
      }
    }
  },
  "submit": {
    "production": {
      "ios": { "appleId": "your-apple-id@example.com" },
      "android": { "serviceAccount": "path/to/service-account.json" }
    }
  }
}

App Store Review Checklist

Privacy Policy — Clearly document API key handling and data collection
Offline Functionality — Demonstrate graceful behavior without network
Cache Management — Allow users to clear cached data
API Compliance — Ensure Google Terms of Service adherence

Google Play Review Checklist

Minimal Permissions — Request only necessary permissions
Cache Limits — Verify storage permissions are adequate
Version Management — Always increment versionCode for updates

Closing

Thanks for reading this far.

Gemini API combined with React Native/Expo is genuinely a good moment for indie developers. As someone who's been shipping apps solo since 2014, the fact that you can serve 65,000 Gemini requests (including Vision) for around $116/month on a serverless setup would have been unthinkable a decade ago.

The mobile-specific traps haven't changed, though — works-in-simulator but freezes-on-device, fine-in-TestFlight but heavy-in-production. The seven insights I put down here all came from real incidents I hit in my wallpaper and relaxation apps.

If you're starting fresh, I'd tackle these three first:

Add the 50ms streaming buffer — biggest UI impact for about ten lines of code
Wrap AsyncStorage with TTL — prevents the "app feels heavy" reviews six months down the line
Drop in a Cloud Functions proxy — shrinks bundle size and protects your API key at the same time

One closing note for AdMob-funded apps: wire up cost alerts from day one. Right after a launch that landed on the App Store featured list, my Gemini bill tripled overnight. The monthly budget / 30 × 1.3 formula is my reactive lesson from that day.

I'm still learning as I run this in production, so if you're building something similar as an indie developer, I hope these notes are useful.

Thank You for Reading

Gemini Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.

✦Copy-paste ready implementation code
✦New advanced guides published daily
✦$5/mo or $10 for lifetime access

View Membership →