@aguacerowx/react-native 0.0.42 → 0.0.44

package/src/WeatherLayerManager.js

@@ -1,19 +1,91 @@
 // packages/react-native/src/WeatherLayerManager.js
 
-import { AguaceroCore, DICTIONARIES, getUnitConversionFunction } from '@aguacerowx/javascript-sdk';
+import {
+    AguaceroCore,
+    DICTIONARIES,
+    formatTimelineDurationValue,
+    getUnitConversionFunction,
+    parseTimelineDurationHours,
+} from '@aguacerowx/javascript-sdk';
 import { fromByteArray } from 'base64-js';
-import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { NativeModules, Platform } from 'react-native';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { InteractionManager, NativeModules, Platform } from 'react-native';
 import { AguaceroContext } from './AguaceroContext';
 import { GridRenderLayer } from './GridRenderLayer';
+import NexradRadarLayer from './NexradRadarLayer';
+import SatelliteLayer from './SatelliteLayer';
+import { NexradSitesMapLayer } from './NexradSitesMapLayer';
+import { NexradAndroidController } from './nexrad/nexradAndroidController';
+import { SatelliteAndroidController } from './satellite/satelliteAndroidController';
+import NwsAlertsOverlay from './nws/NwsAlertsOverlay';
 import { mapRegistry } from './MapRegistry';
 
-// --- PERFORMANCE HELPER ---
-const perfLog = (msg) => {
-    // Enable this if you want JS logs alongside native logs
-    console.log(`⚡️ [PERF] [JS] ${msg} | ${performance.now().toFixed(2)}ms`);
-};
-// --------------------------
+/**
+ * Same filtering as {@link AguaceroCore#_getFilteredMrmsTimestampsForVariable} for older cores
+ * where that helper (or {@code setMRMSDurationValue}) is missing from the prototype chain.
+ */
+function getFilteredMrmsTimestampsCompat(core, variable) {
+    const raw = core.mrmsStatus?.[variable];
+    if (!raw || !raw.length) return [];
+    const hours = parseTimelineDurationHours(core.state.mrmsDurationValue);
+    let list = [...raw]
+        .map((t) => Number(t))
+        .filter((t) => !Number.isNaN(t))
+        .sort((a, b) => a - b);
+    if (hours > 0 && list.length > 0) {
+        const latest = list[list.length - 1];
+        const cutoff = latest - hours * 3600;
+        list = list.filter((t) => t >= cutoff);
+    }
+    return list;
+}
+
+/**
+ * Older npm installs may resolve an {@link AguaceroCore} without {@code setMRMSDurationValue} /
+ * {@code setNexradDurationValue}; mirror those methods here using the same logic as the SDK.
+ */
+async function applyMrmsDurationValue(core, value) {
+    if (typeof core.setMRMSDurationValue === 'function') {
+        await core.setMRMSDurationValue(value);
+        return;
+    }
+    const v = formatTimelineDurationValue(value);
+    await core.setState({ mrmsDurationValue: v });
+    if (!core.state.isMRMS || !core.state.variable) return;
+    const filtered =
+        typeof core._getFilteredMrmsTimestampsForVariable === 'function'
+            ? core._getFilteredMrmsTimestampsForVariable(core.state.variable)
+            : getFilteredMrmsTimestampsCompat(core, core.state.variable);
+    if (!filtered || filtered.length === 0) return;
+    const curN = core.state.mrmsTimestamp == null ? null : Number(core.state.mrmsTimestamp);
+    if (curN == null || !filtered.includes(curN)) {
+        await core.setState({ mrmsTimestamp: filtered[filtered.length - 1] });
+    }
+}
+
+async function applyNexradDurationValue(core, value) {
+    if (typeof core.setNexradDurationValue === 'function') {
+        await core.setNexradDurationValue(value);
+        return;
+    }
+    const v = formatTimelineDurationValue(value);
+    await core.setState({ nexradDurationValue: v });
+    if (!core.state.isNexrad || !core.state.nexradSite) return;
+    if (typeof core.refreshNexradTimes === 'function') {
+        await core.refreshNexradTimes();
+    }
+    const nk = typeof core._nexradTimesCacheKey === 'function' ? core._nexradTimesCacheKey() : null;
+    const raw = nk ? core.nexradTimesByStation?.[nk]?.unixTimes || [] : [];
+    const filtered =
+        typeof core._getFilteredNexradTimestampsForVariable === 'function'
+            ? core._getFilteredNexradTimestampsForVariable(raw)
+            : [...raw].map((t) => Number(t)).filter((t) => !Number.isNaN(t)).sort((a, b) => a - b);
+    if (!filtered || filtered.length === 0) return;
+    const curN = core.state.nexradTimestamp == null ? null : Number(core.state.nexradTimestamp);
+    if (curN == null || !filtered.includes(curN)) {
+        await core.setState({ nexradTimestamp: filtered[filtered.length - 1] });
+    }
+}
 
 function findLatestModelRun(modelsData, modelName) {
     const model = modelsData?.[modelName];
@@ -29,6 +101,26 @@ function findLatestModelRun(modelsData, modelName) {
 }
 const { WeatherFrameProcessorModule, InspectorModule } = NativeModules;
 
+/**
+ * `state:change` payloads can briefly have {@code isNexrad} before {@code nexradSite} / {@code nexradTimestamp}
+ * are populated; {@code core.state} is updated first. Merge so readouts match the active radar.
+ *
+ * @param {object | null} emitted
+ * @param {object | null} coreState
+ */
+function mergeNexradEmittedWithCore(emitted, coreState) {
+    if (!emitted || !coreState) return null;
+    return {
+        ...emitted,
+        nexradSite: coreState.nexradSite ?? emitted.nexradSite,
+        nexradTimestamp: coreState.nexradTimestamp ?? emitted.nexradTimestamp,
+        nexradProduct: coreState.nexradProduct ?? emitted.nexradProduct,
+        nexradTilt: coreState.nexradTilt ?? emitted.nexradTilt,
+        nexradDataSource: coreState.nexradDataSource ?? emitted.nexradDataSource,
+        nexradStormRelative: coreState.nexradStormRelative ?? emitted.nexradStormRelative,
+    };
+}
+
 /**
  * A helper function to generate the raw RGBA byte buffer for the colormap texture.
  */
@@ -89,6 +181,11 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
         autoRefresh,
         autoRefreshInterval,
         initialModel,
+        belowID: belowIDFromProps,
+        interpolateNexradColormap = true,
+        nexradGateSmoothing = false,
+        watchesWarnings: watchesWarningsProp,
+        onNwsAlertClick,
         ...restProps
     } = props;
     const context = useContext(AguaceroContext);
@@ -97,18 +194,95 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
     const core = useMemo(() => new AguaceroCore({
         apiKey: apiKey,
         customColormaps: customColormaps,
-        // ADD: Pass layerOptions to the core's constructor
         layerOptions: {
             mode: initialMode,
             variable: initialVariable,
             model: initialModel
-        }
+        },
+        autoRefresh: false, // <-- add this
     }), [apiKey]);
 
+    const [watchesWarningsOptions, setWatchesWarningsOptions] = useState(() => ({
+        alertInteractionEnabled: true,
+        ...(watchesWarningsProp ?? {}),
+    }));
+
+    useEffect(() => {
+        setWatchesWarningsOptions((prev) => ({
+            ...prev,
+            ...(watchesWarningsProp ?? {}),
+        }));
+    }, [watchesWarningsProp]);
+
+    useEffect(() => {
+        setNexradSitesMapVisible(Boolean(core.state.isNexrad && core.state.nexradShowSitesPicker !== false));
+    }, [core]);
+
     const gridLayerRef = useRef(null);
+    const nexradLayerRef = useRef(null);
+    const nexradControllerRef = useRef(null);
+    /** Latest {@code state:change} payload (includes {@code colormap}, NEXRAD maps) — required for readouts; {@code core.state} omits those. */
+    const lastEmittedStateForInspectRef = useRef(null);
+    const satelliteLayerRef = useRef(null);
+    const satelliteControllerRef = useRef(null);
+    /** @type {React.MutableRefObject<{ cancel?: () => void } | null>} */
+    const nexradPreloadInteractionRef = useRef(null);
     const currentGridDataRef = useRef(null);
     const autoRefreshIntervalId = useRef(null);
 
+    const ensureNexradController = useCallback(() => {
+        if (Platform.OS !== 'android') return null;
+        if (!nexradControllerRef.current) {
+            nexradControllerRef.current = new NexradAndroidController(core, nexradLayerRef, {
+                interpolateNexradColormap,
+                nexradGateSmoothing,
+            });
+        }
+        return nexradControllerRef.current;
+    }, [core, interpolateNexradColormap, nexradGateSmoothing]);
+
+    /** Synchronous NEXRAD readout (mapsgl-style); no await — avoids jank on map move. */
+    const getNexradInspectPayloadAt = useCallback(
+        (lng, lat) => {
+            if (Platform.OS !== 'android' || !core?.state?.isNexrad) return null;
+            const ctl = ensureNexradController();
+            if (!ctl) {
+                return null;
+            }
+            const emitted = lastEmittedStateForInspectRef.current;
+            if (!emitted) {
+                return null;
+            }
+            const st = mergeNexradEmittedWithCore(emitted, core.state);
+            if (!st?.nexradSite || st.nexradTimestamp == null) {
+                return null;
+            }
+            return ctl.getInspectPayload(lng, lat, st) ?? null;
+        },
+        [core, ensureNexradController],
+    );
+
+    const ensureSatelliteController = useCallback(() => {
+        if (Platform.OS !== 'android') return null;
+        if (!satelliteControllerRef.current) {
+            satelliteControllerRef.current = new SatelliteAndroidController(core, satelliteLayerRef);
+        }
+        return satelliteControllerRef.current;
+    }, [core]);
+
+    useEffect(() => {
+        const ctl = nexradControllerRef.current;
+        if (Platform.OS === 'android' && ctl) {
+            ctl.updateStyleOptions({
+                interpolateNexradColormap,
+                nexradGateSmoothing,
+            });
+            if (core?.state?.isNexrad) {
+                ctl.applyStyleFromState(core.state);
+            }
+        }
+    }, [interpolateNexradColormap, nexradGateSmoothing, core]);
+
     // Cache for preloaded grid data - stores the processed data ready for GPU upload
     const preloadedDataCache = useRef(new Map());
 
@@ -129,6 +303,8 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
         opacity: 1,
         dataRange: [0, 1]
     });
+    /** Drives {@link NexradSitesMapLayer}; must re-render when core NEXRAD / picker flags change. */
+    const [nexradSitesMapVisible, setNexradSitesMapVisible] = useState(false);
 
     useImperativeHandle(ref, () => {
         const setAutoRefresh = (enabled, intervalSeconds) => {
@@ -173,6 +349,22 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             setRun: (runString) => core.setState({ run: runString.split(':')[1] }),
             setState: (newState) => core.setState(newState),
             setMRMSTimestamp: (timestamp) => core.setMRMSTimestamp(timestamp),
+            setMRMSDurationValue: (value) => applyMrmsDurationValue(core, value),
+            setNexradSite: (siteId) => core.setNexradSite(siteId),
+            setNexradProduct: (product) => core.setNexradProduct(product),
+            setNexradTilt: (tilt) => core.setNexradTilt(tilt),
+            setNexradStormRelative: (enabled) => core.setNexradStormRelative(enabled),
+            setNexradTimestamp: (ts) => core.setNexradTimestamp(ts),
+            setNexradDurationValue: (value) => applyNexradDurationValue(core, value),
+            setSatelliteTimestamp: (timestamp) => core.setSatelliteTimestamp(timestamp),
+            setSatelliteDurationValue: (value) => core.setSatelliteDurationValue(value),
+            setSatelliteSelection: (opts) => core.setSatelliteSelection(opts),
+            setShaderSmoothing: async (enabled) => {
+                await core.setShaderSmoothing(enabled);
+                if (gridLayerRef.current) {
+                    gridLayerRef.current.setSmoothing(enabled);
+                }
+            },
             setSmoothing: (enabled) => {
                 if (gridLayerRef.current) {
                     gridLayerRef.current.setSmoothing(enabled);
@@ -182,12 +374,21 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             refreshData: () => {
                 _checkForUpdates();
             },
+            /**
+             * NWS watches/warnings (Android native map): same options as mapsgl {@link WeatherLayerManager#configureWatchesWarnings}.
+             * @param {object} partial
+             */
+            configureWatchesWarnings: (partial) => {
+                setWatchesWarningsOptions((prev) => ({ ...prev, ...partial }));
+            },
         };
     }, [core, autoRefreshInterval, _checkForUpdates]);
 
     const preloadAllFramesToDisk = async (state) => {
-        const start = performance.now();
-        perfLog("preloadAllFramesToDisk called");
+        if (state.isNexrad || state.isSatellite) {
+            hasPreloadedRef.current = false;
+            return;
+        }
 
         if (hasPreloadedRef.current) {
             return;
@@ -286,9 +487,7 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             const options = { url, apiKey: core.apiKey, bundleId: core.bundleId };
 
             try {
-                const netStart = performance.now();
                 const result = await WeatherFrameProcessorModule.processFrame(options);
-                perfLog(`First frame fetched in ${(performance.now() - netStart).toFixed(2)}ms`);
 
                 if (!result || !result.filePath) {
                     return;
@@ -369,8 +568,6 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                     frameData.scale, frameData.offset, frameData.missing,
                     frameData.scaleType
                 );
-                
-                perfLog(`First frame updated to GPU`);
 
                 currentGridDataRef.current = {
                     nx: frameData.nx,
@@ -383,15 +580,12 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                     units: units,
                     scaleType: frameData.scaleType
                 };
-            } catch (error) {
-                console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${currentFrame}:`, error);
+            } catch {
                 hasPreloadedRef.current = false;
             }
         }
 
         // NOW preload the rest of the frames asynchronously
-        perfLog(`Triggering fetch for ${framesToPreload.length} background frames`);
-        
         framesToPreload.forEach((frame) => {
             const cacheKey = isMRMS ? `mrms-${frame}-${variable}` : `${model}-${date}-${run}-${frame}-${variable}`;
             if (preloadedDataCache.current.has(cacheKey)) {
@@ -415,7 +609,6 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             WeatherFrameProcessorModule.processFrame(options)
                 .then(result => {
                     if (!result || !result.filePath) {
-                        console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}: No filePath`);
                         return;
                     }
 
@@ -505,12 +698,8 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                         gridLayerRef.current.primeGpuCache(frameInfoForGpu);
                     }
                 })
-                .catch(error => {
-                    console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}:`, error);
-                });
+                .catch(() => {});
         });
-        
-        perfLog(`Completed preload triggering in ${(performance.now() - start).toFixed(2)}ms`);
     };
 
     useEffect(() => {
@@ -531,7 +720,6 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
     }, [autoRefresh, autoRefreshInterval, _checkForUpdates]);
 
     const updateGPUWithCachedData = (state) => {
-        const start = performance.now();
         const { model, date, run, forecastHour, variable, units, isMRMS, mrmsTimestamp } = state;
 
         const cacheKey = isMRMS
@@ -556,11 +744,7 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 };
             }
 
-            if (__DEV__) {
-                console.log(`[WeatherLayerManager] setActiveFrame: ${cacheKey}`);
-            }
             gridLayerRef.current.setActiveFrame(cacheKey);
-            perfLog(`setActiveFrame sent in ${(performance.now() - start).toFixed(2)}ms`);
             return true;
         }
 
@@ -571,7 +755,6 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
         }
 
         if (!gridLayerRef.current) {
-            console.warn(`⚠️ [updateGPUWithCachedData] GridLayer ref not available`); // CHANGED
             return false;
         }
 
@@ -624,8 +807,6 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 scaleType: cachedData.scaleType
             };
         } else {
-            // filePath should ALWAYS exist now — log and bail
-            console.error('❌ [updateGPUWithCachedData] No filePath in cached data. Keys:', Object.keys(cachedData));
             return false;
         }
 
@@ -651,10 +832,13 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
 
     const getValueAtPoint = async (lng, lat) => {
         if (!core) {
-            console.warn('🔍 [Inspector] Core not available');
             return null;
         }
 
+        if (Platform.OS === 'android' && core.state?.isNexrad) {
+            return getNexradInspectPayloadAt(lng, lat);
+        }
+
         // ADD THIS: Check if we have valid data before attempting inspection
         if (!currentGridDataRef.current) {
             return null;
@@ -700,15 +884,68 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 },
                 lngLat: { lng, lat }
             };
-        } catch (error) {
-            console.error('🔍 [Inspector] Error:', error);
+        } catch {
             return null;
         }
     };
 
+    const getValueAtPointRef = useRef(getValueAtPoint);
+    getValueAtPointRef.current = getValueAtPoint;
+    const getNexradInspectPayloadAtRef = useRef(getNexradInspectPayloadAt);
+    getNexradInspectPayloadAtRef.current = getNexradInspectPayloadAt;
+
     const _checkForUpdates = useMemo(() => async () => {
         if (!core) return;
-        const { isMRMS, model: currentModel, variable: currentVariable, date, run } = core.state;
+        const s = core.state;
+        const { isMRMS, isSatellite, isNexrad, model: currentModel, variable: currentVariable, date, run } = s;
+
+        if (isSatellite && s.satelliteInstrumentId) {
+            const prevTimeline = core._computeSatelliteTimeline();
+            const prevTimes = [...(prevTimeline.unixTimes || [])]
+                .map((t) => Number(t))
+                .filter((t) => !Number.isNaN(t))
+                .sort((a, b) => a - b);
+            const prevMax = prevTimes.length ? prevTimes[prevTimes.length - 1] : null;
+            const curSat = s.satelliteTimestamp == null ? null : Number(s.satelliteTimestamp);
+
+            await core.fetchSatelliteListing(true);
+            core._emitStateChange();
+
+            const nextTimeline = core._computeSatelliteTimeline();
+            const nextTimes = [...(nextTimeline.unixTimes || [])]
+                .map((t) => Number(t))
+                .filter((t) => !Number.isNaN(t))
+                .sort((a, b) => a - b);
+            const newMax = nextTimes.length ? nextTimes[nextTimes.length - 1] : null;
+
+            if (prevMax != null && curSat != null && curSat === prevMax && newMax != null && newMax > prevMax) {
+                await core.setSatelliteTimestamp(newMax);
+            } else if (curSat != null && newMax != null && nextTimes.length && !nextTimes.includes(curSat)) {
+                await core.setSatelliteTimestamp(newMax);
+            }
+            return;
+        }
+
+        if (isNexrad && s.nexradSite) {
+            const nk = core._nexradTimesCacheKey();
+            const rawBefore = nk ? core.nexradTimesByStation[nk]?.unixTimes : [];
+            const filteredBefore = core._getFilteredNexradTimestampsForVariable(rawBefore || []);
+            const prevMax = filteredBefore.length ? filteredBefore[filteredBefore.length - 1] : null;
+            const curNx = s.nexradTimestamp == null ? null : Number(s.nexradTimestamp);
+
+            await core.refreshNexradTimes();
+
+            const rawAfter = nk ? core.nexradTimesByStation[nk]?.unixTimes : [];
+            const filteredAfter = core._getFilteredNexradTimestampsForVariable(rawAfter || []);
+            const newMax = filteredAfter.length ? filteredAfter[filteredAfter.length - 1] : null;
+
+            if (prevMax != null && curNx != null && curNx === prevMax && newMax != null && newMax > prevMax) {
+                await core.setNexradTimestamp(newMax);
+            } else if (curNx != null && newMax != null && filteredAfter.length && !filteredAfter.includes(curNx)) {
+                await core.setNexradTimestamp(newMax);
+            }
+            return;
+        }
 
         if (isMRMS) {
             // --- MRMS LOGIC (Keep existing logic) ---
@@ -744,7 +981,7 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                             if (Platform.OS === 'ios' && gridLayerRef.current?.primeGpuCache) {
                                 gridLayerRef.current.primeGpuCache({ [cacheKey]: frameData });
                             }
-                        }).catch(error => console.warn(`[Auto-Refresh] Failed to preload frame ${frame}:`, error));
+                        }).catch(() => {});
                 });
 
                 const newTimestampsSet = new Set(newTimestamps);
@@ -756,8 +993,12 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 });
             }
         } else {
+            const previousStatus = core.modelStatus;
             const modelStatus = await core.fetchModelStatus(true);
-            core._emitStateChange();
+            const statusChanged = JSON.stringify(previousStatus) !== JSON.stringify(modelStatus);
+            if (statusChanged) {
+                core._emitStateChange();
+            }
 
             const latestRun = findLatestModelRun(modelStatus, currentModel);
             if (!latestRun) return;
@@ -766,7 +1007,6 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
 
     useEffect(() => {
         if (!core) {
-            console.warn('⚠️ [useEffect] Core is not available yet');
             return;
         }
 
@@ -781,24 +1021,47 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 gridLayerRef.current.setVariable(newState.variable);
             }
 
-            const stateKey = `${newState.model}-${newState.variable}-${newState.date}-${newState.run}-${newState.forecastHour}-${newState.units}-${newState.mrmsTimestamp}`;
+            const stateKey = newState.isNexrad
+                ? `nx-${newState.nexradSite}-${newState.nexradProduct}-${newState.nexradDataSource}-${newState.nexradTimestamp}-${newState.nexradTilt}-${newState.units}-${newState.model}-${newState.variable}-${newState.mrmsTimestamp}-${newState.forecastHour}`
+                : newState.isSatellite
+                  ? `sat-${newState.satelliteInstrumentId}-${newState.satelliteSectorLabel}-${newState.satelliteChannel}-${newState.satelliteTimestamp}-${newState.variable}-${newState.units}-${newState.opacity}`
+                  : `${newState.model}-${newState.variable}-${newState.date}-${newState.run}-${newState.forecastHour}-${newState.units}-${newState.mrmsTimestamp}`;
+
+            const sameTimeline = newState.isNexrad
+                ? newState.nexradTimestamp === previousStateRef.current?.nexradTimestamp &&
+                  newState.nexradSite === previousStateRef.current?.nexradSite &&
+                  newState.nexradProduct === previousStateRef.current?.nexradProduct &&
+                  Number(newState.nexradTilt) === Number(previousStateRef.current?.nexradTilt)
+                : newState.isSatellite
+                  ? newState.satelliteTimestamp === previousStateRef.current?.satelliteTimestamp &&
+                    newState.satelliteInstrumentId === previousStateRef.current?.satelliteInstrumentId &&
+                    newState.satelliteSectorLabel === previousStateRef.current?.satelliteSectorLabel &&
+                    newState.satelliteChannel === previousStateRef.current?.satelliteChannel
+                  : newState.forecastHour === previousStateRef.current?.forecastHour &&
+                    newState.mrmsTimestamp === previousStateRef.current?.mrmsTimestamp;
+
+            const sameModeAnchor =
+                newState.isSatellite
+                    ? newState.satelliteInstrumentId === previousStateRef.current?.satelliteInstrumentId &&
+                      newState.satelliteSectorLabel === previousStateRef.current?.satelliteSectorLabel &&
+                      newState.satelliteChannel === previousStateRef.current?.satelliteChannel
+                    : newState.model === previousStateRef.current?.model &&
+                      newState.isMRMS === previousStateRef.current?.isMRMS;
 
             const isOpacityOnlyChange =
                 hasInitialLoad.current &&
                 newState.opacity !== renderProps.opacity &&
                 newState.variable === previousStateRef.current?.variable &&
-                newState.forecastHour === previousStateRef.current?.forecastHour &&
-                newState.mrmsTimestamp === previousStateRef.current?.mrmsTimestamp &&
-                newState.model === previousStateRef.current?.model &&
+                sameTimeline &&
+                sameModeAnchor &&
                 newState.units === previousStateRef.current?.units;
 
             const isPlayStateOnlyChange =
                 hasInitialLoad.current &&
                 newState.isPlaying !== previousStateRef.current?.isPlaying &&
                 newState.variable === previousStateRef.current?.variable &&
-                newState.forecastHour === previousStateRef.current?.forecastHour &&
-                newState.mrmsTimestamp === previousStateRef.current?.mrmsTimestamp &&
-                newState.model === previousStateRef.current?.model &&
+                sameTimeline &&
+                sameModeAnchor &&
                 newState.units === previousStateRef.current?.units &&
                 newState.opacity === previousStateRef.current?.opacity;
 
@@ -813,6 +1076,18 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
 
             if (isOpacityOnlyChange) {
                 setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                if (Platform.OS === 'android' && newState.isNexrad) {
+                    nexradControllerRef.current?.applyStyleFromState?.(newState);
+                }
+                if (Platform.OS === 'android' && newState.isSatellite) {
+                    satelliteLayerRef.current?.updateSatelliteStyle?.(
+                        JSON.stringify({
+                            visible: newState.visible !== false,
+                            opacity: newState.opacity ?? 1,
+                            fillSmoothing: 0,
+                        }),
+                    );
+                }
                 previousStateRef.current = newState;
                 return;
             }
@@ -829,11 +1104,21 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 newState.variable === previousStateRef.current.variable &&
                 newState.date === previousStateRef.current.date &&
                 newState.run === previousStateRef.current.run &&
-                newState.forecastHour === previousStateRef.current.forecastHour &&
-                newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp &&
+                (newState.isNexrad
+                    ? newState.nexradTimestamp === previousStateRef.current.nexradTimestamp &&
+                      newState.nexradSite === previousStateRef.current.nexradSite &&
+                      newState.nexradProduct === previousStateRef.current.nexradProduct
+                    : newState.forecastHour === previousStateRef.current.forecastHour &&
+                      newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp) &&
                 newState.units !== previousStateRef.current.units;
 
             if (isUnitsOnlyChange) {
+                if (Platform.OS === 'android' && newState.isNexrad) {
+                    setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                    nexradControllerRef.current?.applyStyleFromState?.(newState);
+                    previousStateRef.current = newState;
+                    return;
+                }
                 const { variable, units, isMRMS, mrmsTimestamp, model, date, run, forecastHour } = newState;
                 const oldCacheKey = isMRMS
                     ? `mrms-${mrmsTimestamp}-${variable}`
@@ -916,15 +1201,56 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 return;
             }
 
+            const prev = previousStateRef.current;
             const needsFullLoad =
                 !hasInitialLoad.current ||
-                newState.model !== previousStateRef.current.model ||
-                newState.isMRMS !== previousStateRef.current.isMRMS ||
-                newState.variable !== previousStateRef.current.variable ||
-                newState.date !== previousStateRef.current.date ||
-                newState.run !== previousStateRef.current.run;
+                newState.isNexrad !== prev?.isNexrad ||
+                newState.isSatellite !== prev?.isSatellite ||
+                (newState.isNexrad &&
+                    prev?.isNexrad &&
+                    (newState.nexradSite !== prev.nexradSite ||
+                        newState.nexradDataSource !== prev.nexradDataSource ||
+                        newState.nexradProduct !== prev.nexradProduct)) ||
+                (newState.isSatellite &&
+                    prev?.isSatellite &&
+                    (newState.satelliteInstrumentId !== prev.satelliteInstrumentId ||
+                        newState.satelliteSectorLabel !== prev.satelliteSectorLabel ||
+                        newState.satelliteChannel !== prev.satelliteChannel)) ||
+                (!newState.isNexrad &&
+                    !newState.isSatellite &&
+                    (newState.model !== prev?.model ||
+                        newState.isMRMS !== prev?.isMRMS ||
+                        newState.variable !== prev?.variable ||
+                        newState.date !== prev?.date ||
+                        newState.run !== prev?.run));
 
             if (needsFullLoad) {
+                const nexradIdentityChange =
+                    Platform.OS === 'android' &&
+                    (newState.isNexrad !== prev?.isNexrad ||
+                        (newState.isNexrad &&
+                            prev?.isNexrad &&
+                            (newState.nexradSite !== prev.nexradSite ||
+                                newState.nexradDataSource !== prev.nexradDataSource ||
+                                newState.nexradProduct !== prev.nexradProduct)));
+                const satelliteIdentityChange =
+                    Platform.OS === 'android' &&
+                    (newState.isSatellite !== prev?.isSatellite ||
+                        (newState.isSatellite &&
+                            prev?.isSatellite &&
+                            (newState.satelliteInstrumentId !== prev.satelliteInstrumentId ||
+                                newState.satelliteSectorLabel !== prev.satelliteSectorLabel ||
+                                newState.satelliteChannel !== prev.satelliteChannel)));
+                if (nexradIdentityChange) {
+                    nexradPreloadInteractionRef.current?.cancel?.();
+                    nexradPreloadInteractionRef.current = null;
+                    nexradControllerRef.current?.destroy();
+                    nexradControllerRef.current = null;
+                }
+                if (satelliteIdentityChange) {
+                    satelliteControllerRef.current?.destroy();
+                    satelliteControllerRef.current = null;
+                }
                 if (gridLayerRef.current) {
                     gridLayerRef.current.setVariable(newState.variable);
                     gridLayerRef.current.clear();
@@ -943,20 +1269,65 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                     previousStateRef.current = newState;
                     return;
                 }
-                preloadAllFramesToDisk(newState);
-            } else if (newState.forecastHour !== previousStateRef.current.forecastHour || (newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp)) {
+                if (!newState.isNexrad && !newState.isSatellite) {
+                    preloadAllFramesToDisk(newState);
+                } else if (Platform.OS === 'android' && newState.isNexrad) {
+                    hasInitialLoad.current = true;
+                } else if (Platform.OS === 'android' && newState.isSatellite) {
+                    hasInitialLoad.current = true;
+                }
+            } else if (
+                !newState.isNexrad &&
+                (newState.forecastHour !== previousStateRef.current.forecastHour ||
+                    (newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp))
+            ) {
                 const success = updateGPUWithCachedData(newState);
                 if (success && newState.opacity !== renderProps.opacity) {
                     setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
                 }
             }
 
+            if (Platform.OS === 'android' && newState.isNexrad && newState.nexradSite && newState.nexradTimestamp != null) {
+                const ctl = ensureNexradController();
+                if (ctl) {
+                    hasInitialLoad.current = true;
+                    void ctl.sync(newState);
+                    nexradPreloadInteractionRef.current?.cancel?.();
+                    nexradPreloadInteractionRef.current = InteractionManager.runAfterInteractions(() => {
+                        nexradPreloadInteractionRef.current = null;
+                        const cur = nexradControllerRef.current;
+                        if (!cur) return;
+                        const s = core.state;
+                        if (!s.isNexrad || !s.nexradSite || s.nexradTimestamp == null) return;
+                        cur.preloadAllAvailable(s);
+                    });
+                }
+            } else if (Platform.OS === 'android' && (!newState.isNexrad || !newState.nexradSite)) {
+                nexradPreloadInteractionRef.current?.cancel?.();
+                nexradPreloadInteractionRef.current = null;
+                nexradControllerRef.current?.destroy();
+                nexradControllerRef.current = null;
+            }
+
+            if (Platform.OS === 'android' && newState.isSatellite && newState.satelliteInstrumentId) {
+                const satCtl = ensureSatelliteController();
+                if (satCtl) {
+                    hasInitialLoad.current = true;
+                    void satCtl.sync(newState);
+                }
+            } else if (Platform.OS === 'android' && !newState.isSatellite) {
+                satelliteControllerRef.current?.destroy();
+                satelliteControllerRef.current = null;
+            }
+
             previousStateRef.current = newState;
         };
 
         handleStateChangeRef.current = handleStateChange;
 
         const stableHandler = (newState) => {
+            lastEmittedStateForInspectRef.current = newState;
+            setNexradSitesMapVisible(Boolean(newState.isNexrad && newState.nexradShowSitesPicker !== false));
             // OPTIMIZATION: If playing (high speed), prioritize MAP update and skip debounce
             if (newState.isPlaying) {
                 // 1. Update Map FIRST (Native Enqueue)
@@ -984,24 +1355,47 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
                 clearTimeout(debounceTimeoutRef.current);
             }
 
+            const prevStable = previousStateRef.current;
+            const sameTimelineStable =
+                prevStable &&
+                (prevStable.isNexrad
+                    ? newState.nexradTimestamp === prevStable.nexradTimestamp &&
+                      newState.nexradSite === prevStable.nexradSite &&
+                      newState.nexradProduct === prevStable.nexradProduct &&
+                      Number(newState.nexradTilt) === Number(prevStable.nexradTilt)
+                    : prevStable.isSatellite
+                      ? newState.satelliteTimestamp === prevStable.satelliteTimestamp &&
+                        newState.satelliteInstrumentId === prevStable.satelliteInstrumentId &&
+                        newState.satelliteSectorLabel === prevStable.satelliteSectorLabel &&
+                        newState.satelliteChannel === prevStable.satelliteChannel
+                      : newState.forecastHour === prevStable.forecastHour &&
+                        newState.mrmsTimestamp === prevStable.mrmsTimestamp);
+
+            const sameModeStable =
+                prevStable &&
+                (newState.isSatellite
+                    ? newState.satelliteInstrumentId === prevStable.satelliteInstrumentId &&
+                      newState.satelliteSectorLabel === prevStable.satelliteSectorLabel &&
+                      newState.satelliteChannel === prevStable.satelliteChannel
+                    : newState.model === prevStable.model && newState.isMRMS === prevStable.isMRMS);
+
             // Opacity and Play state changes should be immediate for the native layer too
             const isOpacityOnlyChange =
-                previousStateRef.current &&
-                newState.opacity !== previousStateRef.current.opacity &&
-                newState.variable === previousStateRef.current.variable &&
-                newState.forecastHour === previousStateRef.current.forecastHour &&
-                newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp &&
-                newState.model === previousStateRef.current.model &&
-                newState.units === previousStateRef.current.units;
+                prevStable &&
+                sameTimelineStable &&
+                sameModeStable &&
+                newState.opacity !== prevStable.opacity &&
+                newState.variable === prevStable.variable &&
+                newState.units === prevStable.units;
 
             const isPlayStateOnlyChange =
-                previousStateRef.current &&
-                newState.isPlaying !== previousStateRef.current.isPlaying &&
-                newState.variable === previousStateRef.current.variable &&
-                newState.forecastHour === previousStateRef.current.forecastHour &&
-                newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp &&
-                newState.model === previousStateRef.current.model &&
-                newState.units === previousStateRef.current.units;
+                prevStable &&
+                sameTimelineStable &&
+                sameModeStable &&
+                newState.isPlaying !== prevStable.isPlaying &&
+                newState.variable === prevStable.variable &&
+                newState.units === prevStable.units &&
+                newState.opacity === prevStable.opacity;
 
             if (isOpacityOnlyChange || isPlayStateOnlyChange || !previousStateRef.current) {
                 if (handleStateChangeRef.current) {
@@ -1025,8 +1419,16 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             if (debounceTimeoutRef.current) {
                 clearTimeout(debounceTimeoutRef.current);
             }
+            if (Platform.OS === 'android') {
+                nexradPreloadInteractionRef.current?.cancel?.();
+                nexradPreloadInteractionRef.current = null;
+                nexradControllerRef.current?.destroy();
+                nexradControllerRef.current = null;
+                satelliteControllerRef.current?.destroy();
+                satelliteControllerRef.current = null;
+            }
         };
-    }, [core]);
+    }, [core, ensureNexradController, ensureSatelliteController]);
 
     useEffect(() => {
         return () => {
@@ -1037,6 +1439,14 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             if (gridLayerRef.current && Platform.OS === 'ios') {
                 gridLayerRef.current.clearGpuCache();
             }
+            if (Platform.OS === 'android') {
+                nexradPreloadInteractionRef.current?.cancel?.();
+                nexradPreloadInteractionRef.current = null;
+                nexradControllerRef.current?.destroy();
+                nexradControllerRef.current = null;
+                satelliteControllerRef.current?.destroy();
+                satelliteControllerRef.current = null;
+            }
         };
     }, []);
 
@@ -1048,7 +1458,7 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             return;
         }
 
-        const handleMapMove = async (center) => {
+        const handleMapMove = (center) => {
             if (!center || !Array.isArray(center) || center.length !== 2) {
                 return;
             }
@@ -1062,8 +1472,14 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
 
             const [longitude, latitude] = center;
 
-            const payload = await getValueAtPoint(longitude, latitude);
-            onInspect?.(payload);
+            if (Platform.OS === 'android' && core.state?.isNexrad) {
+                onInspect?.(getNexradInspectPayloadAtRef.current(longitude, latitude));
+                return;
+            }
+
+            void getValueAtPointRef.current(longitude, latitude).then((payload) => {
+                onInspect?.(payload);
+            });
         };
 
         core.on('map:move', handleMapMove);
@@ -1092,9 +1508,13 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
             if (center && Array.isArray(center) && center.length === 2) {
                 const [longitude, latitude] = center;
 
-                getValueAtPoint(longitude, latitude).then(payload => {
-                    onInspect?.(payload);
-                });
+                if (Platform.OS === 'android' && core?.state?.isNexrad) {
+                    onInspect?.(getNexradInspectPayloadAtRef.current(longitude, latitude));
+                } else {
+                    getValueAtPointRef.current(longitude, latitude).then((payload) => {
+                        onInspect?.(payload);
+                    });
+                }
             }
         };
 
@@ -1103,13 +1523,21 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
 
         return () => clearTimeout(timer);
     }, [
+        core?.state?.nexradTimestamp,
+        core?.state?.isNexrad,
+        core?.state?.nexradSite,
+        core?.state?.nexradProduct,
+        core?.state?.nexradTilt,
+        core?.state?.nexradDataSource,
+        core?.state?.nexradStormRelative,
         core?.state?.variable,
         core?.state?.model,
         core?.state?.forecastHour,
         core?.state?.mrmsTimestamp,
         core?.state?.units,
+        core?.state?.opacity,
         inspectorEnabled,
-        onInspect
+        onInspect,
     ]);
 
     useEffect(() => {
@@ -1138,25 +1566,40 @@ export const WeatherLayerManager = forwardRef((props, ref) => {
     }, [core]);
 
     useEffect(() => {
-        core.initialize();
+        core.initialize({ autoRefresh: false }); // <-- add the argument
         return () => {
             core.destroy();
         };
     }, [core]);
 
+    const gridBelowId =
+        belowIDFromProps ??
+        context?.weatherBeforeLayerId ??
+        'AML_-_terrain';
+
     return (
-        <GridRenderLayer
-            ref={gridLayerRef}
-            opacity={renderProps.opacity}
-            dataRange={renderProps.dataRange}
-            belowID="AML_-_terrain"
-        />
+        <>
+            <GridRenderLayer
+                ref={gridLayerRef}
+                opacity={renderProps.opacity}
+                dataRange={renderProps.dataRange}
+                belowID={gridBelowId}
+            />
+            {Platform.OS === 'android' ? <NexradRadarLayer ref={nexradLayerRef} belowID={gridBelowId} /> : null}
+            {Platform.OS === 'android' ? <SatelliteLayer ref={satelliteLayerRef} belowID={gridBelowId} /> : null}
+            <NwsAlertsOverlay core={core} watchesWarnings={watchesWarningsOptions} onNwsAlertClick={onNwsAlertClick} />
+            {Platform.OS === 'android' && nexradSitesMapVisible ? (
+                <NexradSitesMapLayer
+                    visible
+                    onSelectSite={(siteId) => void core.setNexradSite(siteId)}
+                />
+            ) : null}
+        </>
     );
 });
 
 WeatherLayerManager.getAvailableVariables = (options) => {
     if (!options || !options.apiKey) {
-        console.error("API key must be provided to get available variables.");
         return [];
     }
     const core = new AguaceroCore({ apiKey: options.apiKey });