App Version Package

A simple React Native package for accessing and displaying app version information using Expo Constants with a provider-based architecture.

Features

• 📦 Access app version from app.config.js
• 🎯 Simple React Context API
• 🔄 Override version for testing
• 🛡️ Safe fallback to default version
• 🎨 TypeScript support
• ⚡ Zero runtime overhead

Installation

npm install expo-constants

Setup

1. Configure your app version in app.config.js

export default {
  name: 'My App',
  version: '1.2.3',
  // ... other config
};

2. Wrap your app with the provider

import { AppVersionProvider } from './app-version';

function App() {
  return <AppVersionProvider>{/* Your app components */}</AppVersionProvider>;
}

3. Use the hook in your components

import { useAppVersionContext } from './app-version';

function SettingsScreen() {
  const { version } = useAppVersionContext();

  return (
    <View>
      <Text>App Version: {version}</Text>
    </View>
  );
}

API Reference

AppVersionProvider Props

| Prop | Type | Required | Description | | ---------- | ---------------------------------- | -------- | ------------------------------------ | | methods | ReturnType<typeof useAppVersion> | No | Override default methods for testing | | children | React.ReactNode | Yes | Child components |

Context Values

State

• version: string - The current app version (from app.config.js or default '1.0.0')

Utility Functions

You can also use the utility function directly without the provider:

import { getAppVersion } from './app-version';

const version = getAppVersion(); // Returns version string

Usage Examples

Display Version in Settings

import { useAppVersionContext } from './app-version';

function SettingsScreen() {
  const { version } = useAppVersionContext();

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Version</Text>
      <Text style={styles.value}>{version}</Text>
    </View>
  );
}

Display Version in About Page

import { useAppVersionContext } from './app-version';

function AboutScreen() {
  const { version } = useAppVersionContext();

  return (
    <View>
      <Text>My Awesome App</Text>
      <Text>Version {version}</Text>
      <Text>© 2025 Your Company</Text>
    </View>
  );
}

Version in Footer

import { useAppVersionContext } from './app-version';

function AppFooter() {
  const { version } = useAppVersionContext();

  return (
    <View style={styles.footer}>
      <Text style={styles.footerText}>v{version}</Text>
    </View>
  );
}

Conditional Features Based on Version

import { useAppVersionContext } from './app-version';

function FeatureComponent() {
  const { version } = useAppVersionContext();

  const isNewVersion = parseFloat(version) >= 2.0;

  return (
    <View>
      {isNewVersion && <NewFeature />}
      {!isNewVersion && <LegacyFeature />}
    </View>
  );
}

Send Version in Analytics

import { useAppVersionContext } from './app-version';

function AnalyticsWrapper({ children }) {
  const { version } = useAppVersionContext();

  useEffect(() => {
    analytics.setUserProperty('app_version', version);
  }, [version]);

  return <>{children}</>;
}

Version in Error Reports

import { useAppVersionContext } from './app-version';

function ErrorBoundary({ children }) {
  const { version } = useAppVersionContext();

  const handleError = (error: Error) => {
    errorReporter.log({
      error,
      appVersion: version,
      timestamp: Date.now(),
    });
  };

  // ... error boundary logic
}

Advanced Usage

Custom Version Override

You can override the version for testing purposes:

<AppVersionProvider version="2.0.0-beta">
  <App />
</AppVersionProvider>

Testing with Custom Methods

const mockMethods = {
  version: '1.0.0-test',
};

<AppVersionProvider methods={mockMethods}>
  <ComponentUnderTest />
</AppVersionProvider>;

Using Utility Function Directly

If you don't need the provider pattern, you can use the utility function:

import { getAppVersion } from './app-version';

function MyComponent() {
  const version = getAppVersion();

  return <Text>Version: {version}</Text>;
}

Version Comparison Helper

import { useAppVersionContext } from './app-version';

function useVersionCheck(requiredVersion: string) {
  const { version } = useAppVersionContext();

  const compareVersions = (v1: string, v2: string) => {
    const parts1 = v1.split('.').map(Number);
    const parts2 = v2.split('.').map(Number);

    for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
      const part1 = parts1[i] || 0;
      const part2 = parts2[i] || 0;

      if (part1 > part2) return 1;
      if (part1 < part2) return -1;
    }
    return 0;
  };

  return compareVersions(version, requiredVersion) >= 0;
}

// Usage
function NewFeature() {
  const hasRequiredVersion = useVersionCheck('2.1.0');

  if (!hasRequiredVersion) {
    return <UpgradePrompt />;
  }

  return <Feature />;
}

Common Use Cases

1. Settings/About Screen

Display version information to users:

<Text>App Version: {version}</Text>

2. Bug Reports

Include version in bug reports and crash logs:

bugReporter.report({ version, error });

3. Analytics

Track which versions users are on:

analytics.track('screen_view', { app_version: version });

4. Feature Flags

Enable/disable features based on version:

const showBetaFeatures = version.includes('beta');

5. API Requests

Send version in API headers:

headers: {
  'X-App-Version': version,
}

Version Format

The package supports any version string format from your app.config.js:

• Semantic versioning: 1.2.3
• With pre-release: 1.2.3-beta.1
• Build numbers: 1.2.3+456
• Custom formats: 2025.01.15

Default Behavior

If the version cannot be retrieved from app.config.js, the package safely falls back to '1.0.0'.

This can happen when:

• expo-constants is not properly configured
• Running in a test environment
• app.config.js doesn't have a version field

TypeScript Support

The package is fully typed with TypeScript:

interface UseAppVersionProps {
  version?: string;
}

interface UseAppVersionReturn {
  version: string;
}

Best Practices

1. Always set version in app.config.js - Keep it updated with each release
2. Use semantic versioning - Follow MAJOR.MINOR.PATCH format
3. Display in user-facing areas - Settings, about screens, footers
4. Include in error reports - Essential for debugging version-specific issues
5. Track in analytics - Understand version adoption rates

Platform Support

Works on all platforms supported by Expo:

• ✅ iOS
• ✅ Android
• ✅ Web

Comparison with Direct Import

Without Package (Direct Import)

import Constants from 'expo-constants';

function MyComponent() {
  const version = Constants.expoConfig?.version || '1.0.0';
  return <Text>{version}</Text>;
}

With Package (Provider Pattern)

import { useAppVersionContext } from './app-version';

function MyComponent() {
  const { version } = useAppVersionContext();
  return <Text>{version}</Text>;
}

Benefits of using the package:

• ✅ Centralized version management
• ✅ Easy testing with mock values
• ✅ Consistent error handling
• ✅ Type safety
• ✅ Single source of truth

Troubleshooting

Version shows '1.0.0' instead of my actual version

• Check that version is set in app.config.js
• Rebuild your app after changing the config
• Verify expo-constants is installed

TypeScript errors

• Ensure expo-constants types are installed
• Check that your TypeScript version is compatible

Version not updating after build

• Clear Metro bundler cache: npx expo start -c
• Rebuild the app completely