Skip to main content

​
Overview

NearYou uses Expo’s configuration system to manage app settings across iOS, Android, and Web platforms. All core configuration is defined in app.json at the root of your project.

​
App Configuration

​
Basic Settings

The main app configuration is defined in app.json:
app.json
{
  "expo": {
    "name": "nearyou",
    "slug": "nearyou",
    "version": "1.0.0",
    "orientation": "portrait",
    "scheme": "nearyou",
    "userInterfaceStyle": "automatic"
  }
}
The scheme field enables deep linking with the URL scheme nearyou://

​
Key Configuration Options

The display name of your app. This appears on the home screen and in app stores.Current value: nearyou
A URL-friendly identifier for your app. Used in Expo’s services and URLs.Current value: nearyou
The app version following semantic versioning (major.minor.patch).Current value: 1.0.0
Locks the app to a specific orientation.Options: portrait, landscape, defaultCurrent value: portrait
Controls dark mode support.Options: light, dark, automaticCurrent value: automatic (respects system settings)

​
Platform-Specific Configuration

​
iOS Configuration

app.json
{
  "expo": {
    "ios": {
      "supportsTablet": true
    }
  }
}

iPad Support

The app is configured to run on both iPhone and iPad devices with supportsTablet: true.

Additional Options

You can add bundleIdentifier, buildNumber, and other iOS-specific settings here.

​
Android Configuration

app.json
{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#E6F4FE",
        "foregroundImage": "./assets/images/android-icon-foreground.png",
        "backgroundImage": "./assets/images/android-icon-background.png",
        "monochromeImage": "./assets/images/android-icon-monochrome.png"
      },
      "edgeToEdgeEnabled": true,
      "predictiveBackGestureEnabled": false
    }
  }
}

​
Adaptive Icon

Android adaptive icons consist of three layers:
1

Foreground Image

The main icon graphic (./assets/images/android-icon-foreground.png)
2

Background

Either a solid color (#E6F4FE) or background image for depth
3

Monochrome

Single-color version for themed icons on Android 13+ (./assets/images/android-icon-monochrome.png)
The app uses a light blue background color (#E6F4FE) that matches the app’s branding.

​
Modern Android Features

  • Edge-to-Edge UI: Enabled with edgeToEdgeEnabled: true for immersive full-screen experience
  • Predictive Back: Disabled (predictiveBackGestureEnabled: false) for traditional navigation behavior

​
Web Configuration

app.json
{
  "expo": {
    "web": {
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    }
  }
}
The "output": "static" setting generates a static website that can be hosted on any static hosting service like Netlify, Vercel, or GitHub Pages.

​
Asset Configuration

NearYou uses several asset files referenced in the configuration: 
assets/
└── images/
    ├── icon.png                        # Main app icon (iOS & base)
    ├── favicon.png                     # Web favicon
    ├── splash-icon.png                 # Splash screen logo
    ├── android-icon-foreground.png     # Android adaptive icon foreground
    ├── android-icon-background.png     # Android adaptive icon background
    └── android-icon-monochrome.png     # Android themed icon (Android 13+)

​
Icon Requirements

App Icon

Size: 1024×1024pxFormat: PNGTransparency: Supported

Adaptive Icon

Size: 1024×1024pxSafe zone: 108×108dp centerFormat: PNG

​
Plugins

Expo plugins extend native functionality through config plugins:
app.json
{
  "expo": {
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff",
          "dark": {
            "backgroundColor": "#000000"
          }
        }
      ]
    ]
  }
}

​
Expo Router Plugin

Enables file-based routing with automatic navigation setup.

​
Expo Splash Screen Plugin

Configures the splash screen shown during app initialization:
  • Image: ./assets/images/splash-icon.png (200px wide logo)
  • Light mode: White background (#ffffff)
  • Dark mode: Black background (#000000)
  • Resize mode: contain (maintains aspect ratio)
The splash screen automatically adapts to light and dark mode based on the system theme.

​
Experimental Features

app.json
{
  "expo": {
    "newArchEnabled": true,
    "experiments": {
      "typedRoutes": true,
      "reactCompiler": true
    }
  }
}

New Architecture

React Native’s new architecture for better performance (newArchEnabled: true)

Typed Routes

TypeScript support for Expo Router routes with autocomplete and type safety

React Compiler

Automatic optimization of React components at build time
Experimental features may have breaking changes in future updates. Test thoroughly before deploying to production.

​
TypeScript Configuration

The app uses TypeScript with custom path aliases:
tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./src/*"],
      "@assets/*": ["./assets/*"]
    }
  }
}

​
Path Aliases

import { ThemedView } from '@/components/ThemedView';
These aliases simplify imports and avoid relative path issues like ../../../.

​
Environment-Specific Configuration

For environment variables and secrets:
1

Create .env file

Create a .env file in the project root (add to .gitignore)
2

Install expo-constants

Already included: expo-constants@~18.0.10
3

Access in code

import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig?.extra?.apiUrl;
Never commit .env files to version control. Add them to .gitignore immediately.

​
Modifying Configuration

1

Edit app.json

Make your configuration changes in app.json
2

Clear cache

npx expo start --clear
3

Rebuild for native changes

Some changes (like plugins or native config) require a new build:
# For development builds
npx expo prebuild --clean
Changes to plugins, app icons, or splash screens require rebuilding the native projects. JS-only changes (like colors or names) update immediately.

​
Next Steps

Building

Learn how to build your app for iOS, Android, and Web

Deployment

Deploy your configured app to app stores and the web

Build docs developers (and LLMs) love

Get started for freeTalk to us