react-native-inapp-inspector 2.3.15 → 2.3.16

package/src/helpers/telemetry.ts

@@ -1,6 +1,18 @@
-import {Platform} from 'react-native';
+import React from 'react';
+import {Appearance, Dimensions, PixelRatio, Platform, NativeModules} from 'react-native';
 import {LIB_VERSION} from '../constants/version';
-import {loadSettings, saveSettings} from './settingsStore';
+import {loadSettings, saveSettings, PersistedSettings} from './settingsStore';
+import {isReduxConnected} from '../customHooks/reduxLogger';
+import {isFirebaseAnalyticsPatched} from '../customHooks/analyticsLogger';
+import {getCrashRecords} from '../customHooks/crashHandler';
+import {getNetworkLogs} from '../customHooks/networkLogger';
+import {isNativeModuleAvailable} from '../native/NativeInspector';
+import {
+  getAppName,
+  getBundleIdentifier,
+  getAppVersionAndBuild,
+  isLocalDebugEnvironment,
+} from './index';
 import {
   ENC_MID,
   ENC_SEC,
@@ -77,21 +89,36 @@ function getCollectUrl(): string {
 const PING_INTERVAL_MS = 24 * 60 * 60 * 1000;
 
 let isTelemetryEnabled = true;
+let _hasSearchFilterBeenUsed = false;
 
 export function setTelemetryEnabled(enabled: boolean): void {
   isTelemetryEnabled = enabled;
 }
 
+export function markSearchFilterUsed(): void {
+  _hasSearchFilterBeenUsed = true;
+}
+
 async function getOrCreateClientId(): Promise<string> {
   try {
     const settings = await loadSettings();
-    if (settings.telemetryClientId) {
-      return settings.telemetryClientId;
+    if (settings.telemetryClientId || settings.telemetryDeviceId) {
+      const id = settings.telemetryClientId || settings.telemetryDeviceId || '';
+      if (!settings.telemetryDeviceId) {
+        await saveSettings({...settings, telemetryDeviceId: id});
+      }
+      return id;
     }
     const part1 = Math.floor(100000000 + Math.random() * 900000000);
     const part2 = Math.floor(1000000000 + Math.random() * 9000000000);
     const newId = `${part1}.${part2}`;
-    saveSettings({...settings, telemetryClientId: newId});
+    const now = Date.now();
+    await saveSettings({
+      ...settings,
+      telemetryClientId: newId,
+      telemetryDeviceId: newId,
+      deviceFirstSeen: settings.deviceFirstSeen || now,
+    });
     return newId;
   } catch {
     return `${Math.floor(100000000 + Math.random() * 900000000)}.${Math.floor(1000000000 + Math.random() * 9000000000)}`;
@@ -130,7 +157,27 @@ function isDeviceEmulator(): boolean {
   return false;
 }
 
-function getSystemMetadata(environment?: string) {
+function getDeviceLocaleInfo(): {countryCode: string; locale: string; timeZone: string} {
+  try {
+    const opts = typeof Intl !== 'undefined' && Intl.DateTimeFormat ? Intl.DateTimeFormat().resolvedOptions() : {} as any;
+    const timeZone = opts.timeZone || 'unknown';
+    const locale = opts.locale || 'unknown';
+    let countryCode = 'unknown';
+
+    if (locale && locale !== 'unknown') {
+      const parts = locale.split(/[-_]/);
+      if (parts.length > 1) {
+        countryCode = parts[parts.length - 1].toUpperCase();
+      }
+    }
+
+    return { countryCode, locale, timeZone };
+  } catch {
+    return { countryCode: 'unknown', locale: 'unknown', timeZone: 'unknown' };
+  }
+}
+
+function getSystemMetadata(environment?: string, currentSettings?: PersistedSettings) {
   const rnConstants = Platform.constants as any;
   const rnVersion = rnConstants?.reactNativeVersion
     ? `${rnConstants.reactNativeVersion.major}.${rnConstants.reactNativeVersion.minor}.${rnConstants.reactNativeVersion.patch}`
@@ -138,20 +185,172 @@ function getSystemMetadata(environment?: string) {
 
   const isHermes = Boolean(typeof (global as any).HermesInternal === 'object' && (global as any).HermesInternal !== null);
   const isFabric = Boolean((global as any)?.nativeFabricUIManager !== undefined);
+  const isBridgeless = Boolean((global as any)?._rn_bridgeless || (global as any)?.RN$Bridgeless);
   const isDev = Boolean(typeof __DEV__ !== 'undefined' && __DEV__);
   const isEmulator = isDeviceEmulator();
+  const { countryCode, locale, timeZone } = getDeviceLocaleInfo();
+
+  let screenRes = 'unknown';
+  let screenDensity = 1;
+  let fontScale = 1;
+  let deviceFormFactor = 'phone';
+  let screenOrientation = 'portrait';
+  try {
+    const dim = Dimensions.get('window');
+    screenRes = `${Math.round(dim.width)}x${Math.round(dim.height)}`;
+    screenDensity = PixelRatio.get();
+    fontScale = PixelRatio.getFontScale();
+    screenOrientation = dim.width > dim.height ? 'landscape' : 'portrait';
+    const isTablet = (Platform.OS === 'ios' && Boolean((Platform as any).isPad)) ||
+      (Math.min(dim.width, dim.height) >= 600);
+    deviceFormFactor = isTablet ? 'tablet' : 'phone';
+  } catch {}
+
+  let appearanceMode = 'unknown';
+  try {
+    appearanceMode = Appearance?.getColorScheme?.() || 'unknown';
+  } catch {}
+
+  const isExpo = Boolean(
+    (globalThis as any)?.expo ||
+    (globalThis as any)?.__expo ||
+    (globalThis as any)?.__turboModuleProxy?.name === 'Expo' ||
+    (Platform.constants as any)?.ExpoVersion
+  );
+
+  let hermesVersion = 'non_hermes';
+  let jsEngine = 'jsc';
+  if (isHermes) {
+    jsEngine = 'hermes';
+    try {
+      const props = (global as any).HermesInternal?.getRuntimeProperties?.() || {};
+      hermesVersion = props['OSS Release Version'] || (props['Bytecode Version'] ? `bc_v${props['Bytecode Version']}` : 'hermes');
+    } catch {
+      hermesVersion = 'hermes';
+    }
+  } else if ((globalThis as any)?._v8) {
+    jsEngine = 'v8';
+  }
+
+  let reduxAttached = false;
+  try {
+    reduxAttached = isReduxConnected();
+  } catch {}
+
+  let analyticsAttached = false;
+  try {
+    analyticsAttached = isFirebaseAnalyticsPatched();
+  } catch {}
+
+  const hasNativeModule = isNativeModuleAvailable();
+  const hasMmkv = Boolean(NativeModules?.RNMMKV || (globalThis as any)?.MMKV);
+
+  let capturedCrashesCount = 0;
+  try {
+    capturedCrashesCount = getCrashRecords().length;
+  } catch {}
+
+  let capturedApisBracket = '0';
+  try {
+    const apiCount = getNetworkLogs().length;
+    capturedApisBracket =
+      apiCount === 0
+        ? '0'
+        : apiCount <= 10
+        ? '1-10'
+        : apiCount <= 50
+        ? '11-50'
+        : apiCount <= 100
+        ? '51-100'
+        : '100+';
+  } catch {}
+
+  let isMetroConnected = false;
+  try {
+    isMetroConnected = isLocalDebugEnvironment();
+  } catch {}
+
+  const defaultLandingTab = currentSettings?.defaultTab || 'apis';
+  const fabMode =
+    hasNativeModule && currentSettings?.useNativeFab !== false
+      ? 'native_ui_thread'
+      : 'js_floating_button';
+
+  const deviceBrand = String(
+    rnConstants?.Brand ||
+    (Platform.OS === 'ios' ? 'Apple' : 'unknown'),
+  );
+
+  const deviceModel = String(
+    rnConstants?.Model ||
+    rnConstants?.systemName ||
+    (Platform.OS === 'ios' ? 'iPhone/iPad' : 'unknown'),
+  );
+
+  const deviceManufacturer = String(
+    rnConstants?.Manufacturer ||
+    (Platform.OS === 'ios' ? 'Apple' : 'unknown'),
+  );
+
+  let appName = 'App';
+  let bundleId = 'unknown';
+  let appVersion = 'unknown';
+  let appBuild = 'unknown';
+  try {
+    appName = getAppName() || 'App';
+    bundleId = getBundleIdentifier() || 'unknown';
+    const verInfo = getAppVersionAndBuild();
+    appVersion = verInfo.version || 'unknown';
+    appBuild = verInfo.build || 'unknown';
+  } catch {}
+
+  const reactVer = typeof React !== 'undefined' && React.version ? React.version : 'unknown';
 
   return {
+    pkg_name: PKG_NAME,
+    pkg_version: LIB_VERSION,
     lib_version: LIB_VERSION,
+    install_type: isDev ? 'local_dev' : 'bundled_production',
+    app_name: appName,
+    bundle_id: bundleId,
+    app_version: appVersion,
+    app_build: appBuild,
+    react_version: reactVer,
     platform: Platform.OS,
     os_version: String(Platform.Version || 'unknown'),
     rn_version: rnVersion,
+    country_code: countryCode,
+    device_locale: locale,
+    time_zone: timeZone,
+    device_brand: deviceBrand,
+    device_model: deviceModel,
+    device_manufacturer: deviceManufacturer,
+    device_form_factor: deviceFormFactor,
+    screen_resolution: screenRes,
+    screen_density: screenDensity,
+    screen_orientation: screenOrientation,
+    font_scale: fontScale,
+    appearance_mode: appearanceMode,
+    is_expo: isExpo,
+    js_engine: jsEngine,
+    hermes_version: hermesVersion,
     is_hermes: isHermes,
     is_fabric: isFabric,
+    is_bridgeless: isBridgeless,
+    has_native_module: hasNativeModule,
+    has_mmkv: hasMmkv,
+    fab_mode: fabMode,
+    default_landing_tab: defaultLandingTab,
+    captured_crashes_count: capturedCrashesCount,
+    captured_apis_bracket: capturedApisBracket,
+    search_filter_used: _hasSearchFilterBeenUsed,
+    is_metro_connected: isMetroConnected,
     is_dev: isDev,
     is_emulator: isEmulator,
     device_type: isEmulator ? 'emulator' : 'real_device',
     app_mode: isDev ? 'local_mode' : 'bundled_application',
+    redux_attached: reduxAttached,
+    analytics_attached: analyticsAttached,
     environment: environment || (isDev ? 'DEV' : 'PROD'),
     engagement_time_msec: 1000,
   };
@@ -174,24 +373,196 @@ export async function trackActiveTelemetryHeartbeat(
     const settings = await loadSettings();
     const lastPing = settings.telemetryLastPing || 0;
     const now = Date.now();
+    const isNewDevice = !settings.deviceRegistered;
 
-    if (now - lastPing < PING_INTERVAL_MS) return;
+    // Send on first launch or if 24h passed since last ping
+    if (!isNewDevice && now - lastPing < PING_INTERVAL_MS) return;
 
     const clientId = await getOrCreateClientId();
-    const params = getSystemMetadata(environment);
+    const params = getSystemMetadata(environment, settings);
+
+    const deviceParams = {
+      ...params,
+      device_id: clientId,
+      is_new_device: isNewDevice,
+      device_first_seen: settings.deviceFirstSeen || now,
+    };
+
+    const eventsToDispatch = isNewDevice
+      ? [
+          {name: 'active_device', params: deviceParams},
+          {name: 'first_device_install', params: deviceParams},
+          {name: 'inspector_active_heartbeat', params: deviceParams},
+        ]
+      : [
+          {name: 'active_device', params: deviceParams},
+          {name: 'inspector_active_heartbeat', params: deviceParams},
+        ];
 
     await fetch(url, {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
       body: JSON.stringify({
         client_id: clientId,
+        user_id: clientId,
         non_personalized_ads: true,
-        events: [{name: 'inspector_active_heartbeat', params}],
+        user_properties: {
+          device_id: { value: clientId },
+          pkg_name: { value: params.pkg_name },
+          pkg_version: { value: params.pkg_version },
+          install_type: { value: params.install_type },
+          app_name: { value: params.app_name },
+          bundle_id: { value: params.bundle_id },
+          app_version: { value: params.app_version },
+          react_version: { value: params.react_version },
+          country: { value: params.country_code },
+          country_code: { value: params.country_code },
+          locale: { value: params.device_locale },
+          time_zone: { value: params.time_zone },
+          device_brand: { value: params.device_brand },
+          device_model: { value: params.device_model },
+          device_form_factor: { value: params.device_form_factor },
+          screen_resolution: { value: params.screen_resolution },
+          appearance_mode: { value: params.appearance_mode },
+          is_expo: { value: String(params.is_expo) },
+          js_engine: { value: params.js_engine },
+          is_fabric: { value: String(params.is_fabric) },
+          is_bridgeless: { value: String(params.is_bridgeless) },
+          has_native_module: { value: String(params.has_native_module) },
+          has_mmkv: { value: String(params.has_mmkv) },
+          fab_mode: { value: params.fab_mode },
+          default_landing_tab: { value: params.default_landing_tab },
+          captured_crashes_count: { value: String(params.captured_crashes_count) },
+          captured_apis_bracket: { value: params.captured_apis_bracket },
+          search_filter_used: { value: String(params.search_filter_used) },
+          is_metro_connected: { value: String(params.is_metro_connected) },
+          redux_attached: { value: String(params.redux_attached) },
+          analytics_attached: { value: String(params.analytics_attached) },
+          platform: { value: params.platform },
+          rn_version: { value: params.rn_version },
+          lib_version: { value: params.lib_version },
+        },
+        events: eventsToDispatch,
       }),
     });
 
-    saveSettings({...settings, telemetryLastPing: now});
+    await saveSettings({
+      ...settings,
+      telemetryClientId: clientId,
+      telemetryDeviceId: clientId,
+      deviceRegistered: true,
+      deviceFirstSeen: settings.deviceFirstSeen || now,
+      telemetryLastPing: now,
+      telemetryLastActive: now,
+    });
   } catch {
     // silent
   }
 }
+
+export async function trackTelemetryEvent(
+  eventName: string,
+  eventParams?: Record<string, any>,
+): Promise<void> {
+  if (!isTelemetryEnabled) return;
+  const url = getCollectUrl();
+  if (!url) return;
+
+  try {
+    const clientId = await getOrCreateClientId();
+    const settings = await loadSettings().catch(() => ({} as PersistedSettings));
+    const metadata = getSystemMetadata(undefined, settings);
+
+    const params = {
+      ...metadata,
+      device_id: clientId,
+      ...eventParams,
+      engagement_time_msec: 100,
+    };
+
+    await fetch(url, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        client_id: clientId,
+        user_id: clientId,
+        non_personalized_ads: true,
+        user_properties: {
+          device_id: { value: clientId },
+          pkg_name: { value: metadata.pkg_name },
+          pkg_version: { value: metadata.pkg_version },
+          install_type: { value: metadata.install_type },
+          app_name: { value: metadata.app_name },
+          bundle_id: { value: metadata.bundle_id },
+          app_version: { value: metadata.app_version },
+          react_version: { value: metadata.react_version },
+          country: { value: metadata.country_code },
+          country_code: { value: metadata.country_code },
+          locale: { value: metadata.device_locale },
+          time_zone: { value: metadata.time_zone },
+          device_brand: { value: metadata.device_brand },
+          device_model: { value: metadata.device_model },
+          device_form_factor: { value: metadata.device_form_factor },
+          screen_resolution: { value: metadata.screen_resolution },
+          appearance_mode: { value: metadata.appearance_mode },
+          is_expo: { value: String(metadata.is_expo) },
+          js_engine: { value: metadata.js_engine },
+          is_fabric: { value: String(metadata.is_fabric) },
+          is_bridgeless: { value: String(metadata.is_bridgeless) },
+          has_native_module: { value: String(metadata.has_native_module) },
+          has_mmkv: { value: String(metadata.has_mmkv) },
+          fab_mode: { value: metadata.fab_mode },
+          default_landing_tab: { value: metadata.default_landing_tab },
+          captured_crashes_count: { value: String(metadata.captured_crashes_count) },
+          captured_apis_bracket: { value: metadata.captured_apis_bracket },
+          search_filter_used: { value: String(metadata.search_filter_used) },
+          is_metro_connected: { value: String(metadata.is_metro_connected) },
+          redux_attached: { value: String(metadata.redux_attached) },
+          analytics_attached: { value: String(metadata.analytics_attached) },
+          platform: { value: metadata.platform },
+          rn_version: { value: metadata.rn_version },
+          lib_version: { value: metadata.lib_version },
+        },
+        events: [{ name: eventName, params }],
+      }),
+    });
+  } catch {
+    // silent
+  }
+}
+
+/**
+ * Tracks when a developer opens/switches tabs in the In-App Inspector (e.g. APIs, Logs, Redux, Performance, Storage, etc.)
+ */
+export function trackInspectorTabView(tabName: string): void {
+  trackTelemetryEvent('inspector_tab_view', {
+    tab_name: tabName,
+    screen_name: `tab_${tabName}`,
+    screen_class: 'NetworkInspector',
+  });
+}
+
+/**
+ * Tracks screen views within the In-App Inspector
+ */
+export function trackInspectorScreenView(screenName: string): void {
+  trackTelemetryEvent('screen_view', {
+    screen_name: screenName,
+    screen_class: 'NetworkInspector',
+  });
+}
+
+/**
+ * Tracks screen / performance recording events
+ */
+export function trackInspectorScreenRecord(
+  action: 'start' | 'stop' | 'toggle',
+  recordingType = 'screen',
+): void {
+  trackTelemetryEvent('inspector_screen_record', {
+    action,
+    recording_type: recordingType,
+  });
+}
+
+

package/src/index.tsx

@@ -87,6 +87,8 @@ import {
 import {
   trackActiveTelemetryHeartbeat,
   setTelemetryEnabled,
+  trackInspectorTabView,
+  trackInspectorScreenView,
 } from './helpers/telemetry';
 
 import {
@@ -124,6 +126,11 @@ import {
   isNativeModuleAvailable,
 } from './native/NativeInspector';
 
+import {
+  fetchRemoteConfigModuleStatus,
+  isFirebaseRemoteConfigAvailable,
+} from './helpers/remoteConfig';
+
 // Constants
 import {
   StatusFilter,
@@ -157,6 +164,7 @@ const NetworkInspector = ({
   environment,
   initialVisible = false,
   visible: controlledVisible,
+  remoteConfig,
 }: NetworkInspectorProps): React.JSX.Element | null => {
   // Set custom storage synchronously during render phase
   setCustomStorage(storage || null);
@@ -352,6 +360,7 @@ const NetworkInspector = ({
     | 'redux'
     | null
   >(null);
+  const [isFeedbackOpen, setIsFeedbackOpen] = useState<boolean>(false);
   const [settingsActiveSubTab, setSettingsActiveSubTab] = useState<SettingsSubTab>('module');
   const [tabVisibility, setTabVisibility] = useState<
     Record<ActiveTab, boolean>
@@ -513,6 +522,28 @@ const NetworkInspector = ({
     };
   }, []);
 
+  // Fetch and apply module enable/disable statuses from Firebase Remote Config if configured or available
+  useEffect(() => {
+    let isMounted = true;
+    if (remoteConfig === false) return;
+
+    fetchRemoteConfigModuleStatus(typeof remoteConfig === 'object' ? remoteConfig : undefined)
+      .then(remoteModules => {
+        if (isMounted && remoteModules) {
+          setTabVisibility(prev => ({
+            ...prev,
+            ...remoteModules,
+            apis: remoteModules.apis ?? true,
+          }));
+        }
+      })
+      .catch(() => {});
+
+    return () => {
+      isMounted = false;
+    };
+  }, [remoteConfig]);
+
   useEffect(() => {
     if (!settingsHydratedRef.current) return;
     saveSettings({
@@ -655,6 +686,7 @@ const NetworkInspector = ({
       setActiveTab(key);
       loadNativePage(key);
     }
+    trackInspectorTabView(key);
   }, [loadNativePage]);
 
   const [selectedEvent, setSelectedEvent] = useState<AnalyticsEvent | null>(
@@ -1013,11 +1045,13 @@ const NetworkInspector = ({
   useEffect(() => {
     isVisibleRefObj.current = visible;
     if (visible) {
+      trackInspectorScreenView('InspectorModal');
       const target =
         defaultTab === 'apis' || tabVisibility?.[defaultTab]
           ? defaultTab
           : 'apis';
       setActiveTab(target);
+      trackInspectorTabView(target);
 
 
 
@@ -2032,6 +2066,8 @@ const NetworkInspector = ({
       setShowHeaderInfo,
       settingsPage,
       setSettingsPage,
+      isFeedbackOpen,
+      setIsFeedbackOpen,
       updateAvailable,
       latestNpmVersion,
       clearAnim,
@@ -2207,6 +2243,7 @@ const NetworkInspector = ({
       selectedLog,
       showHeaderInfo,
       settingsPage,
+      isFeedbackOpen,
       updateAvailable,
       latestNpmVersion,
       clearAnim,
@@ -2562,4 +2599,9 @@ export {
   I18nextProvider,
 } from './i18n';
 
+export {
+  fetchRemoteConfigModuleStatus,
+  isFirebaseRemoteConfigAvailable,
+} from './helpers/remoteConfig';
+
 export { LIB_VERSION } from './constants/version';

package/src/styles/AppFonts.ts

@@ -1,6 +1,7 @@
 export interface AppFontConfig {
   interRegular?: string;
   interMedium?: string;
+  interSemiBold?: string;
   interBold?: string;
   Sfprotext?: string;
 }
@@ -8,6 +9,7 @@ export interface AppFontConfig {
 export const AppFonts = {
   interRegular: 'Inter-Regular',
   interMedium: 'Inter-Medium',
+  interSemiBold: 'Inter-SemiBold',
   interBold: 'Inter-Bold',
   Sfprotext: 'Inter-Regular',
 };

package/src/styles/index.ts

@@ -140,7 +140,26 @@ export const getRawStyles = (colors: typeof AppColors) => ({
   },
 
   listContent: {paddingBottom: Platform.OS === 'ios' ? 44 : 32},
-  // #2 — scroll-to-top button, always shown at the bottom right.
+  // Floating Support & Feedback FAB, in place of scroll-to-top button
+  supportFab: {
+    position: 'absolute',
+    bottom: 22,
+    right: 16,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: colors.purple,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: colors.purple,
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.45,
+    shadowRadius: 8,
+    elevation: 14,
+    zIndex: 999,
+    borderWidth: 1.5,
+    borderColor: 'rgba(255, 255, 255, 0.25)',
+  },
   scrollTopBtn: {
     position: 'absolute',
     bottom: 22,

package/src/types/enums.ts

@@ -81,6 +81,7 @@ export const SettingsSubTab = {
   Module: 'module',
   Ui: 'ui',
   Limits: 'limits',
+  About: 'about',
 } as const;
 export type SettingsSubTab =
   (typeof SettingsSubTab)[keyof typeof SettingsSubTab];

package/src/types/interfaces.ts

@@ -180,8 +180,17 @@ export interface PersistedSettings {
   reduxExpandDepth?: number;
   showDuplicateLogs?: boolean;
   showUpdateToast?: boolean;
+  useNativeFab?: boolean;
+  shakeToOpen?: boolean;
   telemetryClientId?: string;
+  telemetryDeviceId?: string;
+  deviceRegistered?: boolean;
+  deviceFirstSeen?: number;
   telemetryLastPing?: number;
+  telemetryLastActive?: number;
+  starPromptActioned?: boolean;
+  starPromptLastShown?: number;
+  starPromptFirstSeen?: number;
 }
 
 // ─── Inspector component props / context ──────────────────────────────────────
@@ -195,6 +204,7 @@ export interface NetworkInspectorProps {
   environment?: 'DEV' | 'UAT' | 'PrePROD' | 'PROD' | 'QA' | 'Staging' | string;
   initialVisible?: boolean;
   visible?: boolean;
+  remoteConfig?: boolean | any;
 }
 
 export interface NavigationTrackerProps {
@@ -239,6 +249,8 @@ export interface InspectorContextValue {
   setShowHeaderInfo: React.Dispatch<React.SetStateAction<boolean>>;
   settingsPage: SettingsPage;
   setSettingsPage: React.Dispatch<React.SetStateAction<SettingsPage>>;
+  isFeedbackOpen: boolean;
+  setIsFeedbackOpen: React.Dispatch<React.SetStateAction<boolean>>;
   updateAvailable: boolean;
   latestNpmVersion: string | null;
   clearAnim: Animated.Value;