Skip to main content

React Native App Code Snippets

Use these snippets as starting points when customizing an Instamobile React Native app. They focus on common buyer tasks: changing branding, reading configuration, adding screens, connecting services, and debugging app behavior.

Quick Answer​

Start with small, reversible edits. Change app-specific files under src/ before touching shared modules under src/core/, verify each change in the simulator, and keep native configuration changes separate from JavaScript changes.

Before You Paste a Snippet​

Check the local file first. Apps can differ by product, backend provider, and feature set.

  1. Search for an existing pattern in the app.
  2. Copy the local style and naming convention.
  3. Make one change at a time.
  4. Run the app after the change.
  5. Commit the working state before the next customization.

Find Where a Value Comes From​

Use rg from the app folder to find config values, labels, Firebase collection names, navigation routes, or feature flags:

rg "Home"
rg "firebase"
rg "collection"
rg "routeName"
rg "primaryColor"

Search before editing shared files. Many apps already expose app-level configuration through src/config/, src/theme/, or product-specific settings.

Read App Configuration​

Many apps keep public runtime settings in a config object. The exact file can vary, but the pattern usually looks like this:

import AppConfig from '../config/AppConfig'

const supportEmail = AppConfig.supportEmail
const enablePayments = AppConfig.enablePayments

If an app uses hooks or providers for configuration, follow the local pattern:

const config = useConfig()
const isChatEnabled = config.isChatEnabled

Keep secrets out of client-side config files. Public API keys used by mobile SDKs can live in mobile config, but private keys for Stripe, OpenAI, Twilio, or admin Firebase access must stay in backend functions or environment variables.

Add a Feature Flag​

For a simple app-level flag, add it near the existing app config:

const AppConfig = {
  enableGuestCheckout: true,
  enablePushNotifications: false,
}

export default AppConfig

Then read it where the feature is rendered:

if (!AppConfig.enableGuestCheckout) {
  return null
}

Prefer feature flags for optional UI and integrations. Do not delete large modules until you have verified iOS, Android, Firebase, and release builds.

Add a New Screen​

Create the screen under src/screens/:

import React from 'react'
import { Text, View } from 'react-native'

export default function HelpScreen() {
  return (
    <View>
      <Text>Help</Text>
    </View>
  )
}

Register it in the local navigator. The exact navigator file depends on the app:

import HelpScreen from '../screens/HelpScreen'

<Stack.Screen name="Help" component={HelpScreen} />

Navigate to it from an existing component:

navigation.navigate('Help')

If the app uses TypeScript route types, update the route type definition before using the new route.

Add a Safe Debug Log​

Use logs to inspect runtime state while testing locally:

console.log('[CreatePost] selectedMedia', selectedMedia)

For errors, log structured details:

try {
  await createPost(payload)
} catch (error) {
  console.log('[CreatePost] failed', {
    code: error?.code,
    message: error?.message,
    details: error,
  })
  throw error
}

Remove noisy logs before publishing. Keep only logs that are intentionally useful for production diagnostics and do not expose private user data.

Guard Against Missing Data​

Network data, Firebase documents, and optional profile fields can be missing. Use defensive access in UI components:

const displayName = user?.firstName || user?.name || 'User'
const avatarURL = user?.profilePictureURL || user?.avatarURL || null

For lists:

const items = Array.isArray(response?.items) ? response.items : []

Avoid rendering infinite loaders without an error or empty state.

Add an Empty State​

When a list loads successfully but has no items, show a clear empty state:

if (!loading && items.length === 0) {
  return (
    <View>
      <Text>No items yet</Text>
    </View>
  )
}

Keep loading, empty, error, and success states separate. This makes Firebase and network issues much easier to diagnose.

Add a Firebase Error Message​

When calling Firebase from the app, capture the error code:

try {
  await firebase.firestore().collection('posts').add(post)
} catch (error) {
  console.log('[Firebase] add post failed', {
    code: error?.code,
    message: error?.message,
  })
  throw error
}

Common codes include permission issues, missing indexes, unavailable services, and invalid arguments. Fix the backend rule or index instead of hiding the client error.

Keep Backend Secrets Out of the App​

Do not place private backend secrets in React Native source code:

const STRIPE_SECRET_KEY = 'sk_live_...'

Use backend Functions or server environment variables instead:

const paymentIntent = await functions().httpsCallable('createPaymentIntent')({
  amount,
  currency: 'usd',
})

The mobile app should call a backend endpoint. The backend should hold the private key and enforce authorization.

Update App Copy​

For user-facing text, look for localization or config files before editing text inside screens:

rg "Sign in"
rg "Welcome"
rg "Create Account"

If the app uses a localization helper:

localized('Sign in')

Add or update the key in the local translation file instead of hardcoding a single-language string.

Use a Local Placeholder Image​

When a remote image may be missing, provide a fallback:

<Image
  source={imageURL ? { uri: imageURL } : require('../assets/avatar-placeholder.png')}
  style={styles.avatar}
/>

Check the local asset path in your app. Asset folders vary between apps.

Verification Checklist​

After changing code:

  • run yarn start --reset-cache if Metro shows stale imports;
  • run yarn ios for iOS behavior;
  • run yarn android for Android behavior;
  • test the exact screen you changed;
  • test loading, empty, error, and success states;
  • commit the working change before continuing.

Next Steps​