Minimum Version Gate

HOW IT IS WIRED

Real code from the GAS template

The code below is drawn from components/MinVersionGate.tsx in the gas-template repository. This is the code your generated app gets, not pseudocode, not a description of intent.

// components/MinVersionGate.tsx
import React from 'react';
import { Modal, View, Text, Pressable, Linking } from 'react-native';
import * as Updates from 'expo-updates';
import { gasConfig } from '../gas.config';
import { compareVersions } from '../lib/semver';
import { useThemeColors } from '../context/ThemeContext';

export function MinVersionGate({ children }: { children: React.ReactNode }) {
  const { colors } = useThemeColors();
  const runtimeVersion = Updates.runtimeVersion;

  // In Expo Go / dev builds runtimeVersion is undefined -- let the app through.
  if (!runtimeVersion) return <>{children}</>;

  const minVersion = gasConfig.app.minRuntimeVersion;
  let mustUpdate = false;
  try {
    mustUpdate = compareVersions(runtimeVersion, minVersion) === -1;
  } catch {
    mustUpdate = false;
  }

  if (!mustUpdate) return <>{children}</>;

  return (
    <>
      {children}
      <Modal visible transparent animationType="fade" statusBarTranslucent
        onRequestClose={() => {}}
        accessibilityViewIsModal>
        <View className="flex-1 items-center justify-center px-8"
          style={{ backgroundColor: 'rgba(0,0,0,0.6)' }} accessibilityRole="alert">
          <View className="w-full rounded-2xl p-6" style={{ backgroundColor: colors.surface }}>
            <Text className="text-xl font-bold mb-3 text-center" style={{ color: colors.text }}>
              Update Required
            </Text>
            <Pressable onPress={() => Linking.openURL(gasConfig.app.appStoreUrl)}
              className="rounded-xl py-3 px-6 items-center"
              style={{ backgroundColor: colors.primary }}
              accessibilityRole="button" accessibilityLabel="Open App Store to update">
              <Text className="text-base font-semibold" style={{ color: '#ffffff' }}>
                Open App Store
              </Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </>
  );
}

Source: goodspeed-apps/gas-template → components/MinVersionGate.tsx