@react-navigation/core 7.0.0-alpha.11 → 7.0.0-alpha.13

package/src/deepFreeze.tsx

@@ -0,0 +1,34 @@
+export const isPlainObject = (value: unknown): value is object => {
+  if (typeof value === 'object' && value !== null) {
+    return Object.getPrototypeOf(value) === Object.prototype;
+  }
+
+  return false;
+};
+
+export const deepFreeze = <T,>(object: T): Readonly<T> => {
+  // We only freeze in development to catch issues early
+  // Don't freeze in production to avoid unnecessary performance overhead
+  if (process.env.NODE_ENV === 'production') {
+    return object;
+  }
+
+  if (Object.isFrozen(object)) {
+    return object;
+  }
+
+  if (!isPlainObject(object) && !Array.isArray(object)) {
+    return object;
+  }
+
+  // Freeze properties before freezing self
+  for (const key in object) {
+    if (Object.getOwnPropertyDescriptor(object, key)?.configurable) {
+      const value = object[key];
+
+      deepFreeze(value);
+    }
+  }
+
+  return Object.freeze(object);
+};

package/src/types.tsx

@@ -555,7 +555,7 @@ export type ScreenListeners<
   EventMap extends EventMapBase,
 > = Partial<{
   [EventName in keyof (EventMap & EventMapCore<State>)]: EventListenerCallback<
-    EventMap,
+    EventMap & EventMapCore<State>,
     EventName
   >;
 }>;

package/src/useFocusEffect.tsx

@@ -71,7 +71,7 @@ export function useFocusEffect(effect: EffectCallback) {
       }
     };
 
-    // We need to run the effect on intial render/dep changes if the screen is focused
+    // We need to run the effect on initial render/dep changes if the screen is focused
     if (navigation.isFocused()) {
       cleanup = callback();
       isFocused = true;
@@ -79,7 +79,7 @@ export function useFocusEffect(effect: EffectCallback) {
 
     const unsubscribeFocus = navigation.addListener('focus', () => {
       // If callback was already called for focus, avoid calling it again
-      // The focus event may also fire on intial render, so we guard against runing the effect twice
+      // The focus event may also fire on initial render, so we guard against running the effect twice
       if (isFocused) {
         return;
       }

package/src/useNavigationBuilder.tsx

@@ -14,6 +14,7 @@ import * as React from 'react';
 import { isValidElementType } from 'react-is';
 import useLatestCallback from 'use-latest-callback';
 
+import { deepFreeze } from './deepFreeze';
 import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
 import { isRecordEqual } from './isRecordEqual';
@@ -457,7 +458,7 @@ export function useNavigationBuilder<
 
   let state =
     // If the state isn't initialized, or stale, use the state we initialized instead
-    // The state won't update until there's a change needed in the state we have initalized locally
+    // The state won't update until there's a change needed in the state we have initialized locally
     // So it'll be `undefined` or stale until the first navigation event happens
     isStateInitialized(currentState)
       ? (currentState as State)
@@ -582,9 +583,11 @@ export function useNavigationBuilder<
   const getState = useLatestCallback((): State => {
     const currentState = shouldUpdate ? nextState : getCurrentState();
 
-    return (
-      isStateInitialized(currentState) ? currentState : initializedState
-    ) as State;
+    return deepFreeze(
+      (isStateInitialized(currentState)
+        ? currentState
+        : initializedState) as State
+    );
   });
 
   const emitter = useEventEmitter<EventMapCore<State>>((e) => {

package/src/useRouteCache.tsx

@@ -7,7 +7,7 @@ import type { RouteProp } from './types';
 type RouteCache = Map<string, RouteProp<ParamListBase>>;
 
 /**
- * Utilites such as `getFocusedRouteNameFromRoute` need to access state.
+ * Utilities such as `getFocusedRouteNameFromRoute` need to access state.
  * So we need a way to suppress the warning for those use cases.
  * This is fine since they are internal utilities and this is not public API.
  */
@@ -41,6 +41,22 @@ export function useRouteCache<State extends NavigationState>(
       proxy = routeWithoutState;
     }
 
+    if (process.env.NODE_ENV !== 'production') {
+      // FIXME: since the state is updated with mutation, the route object cannot be frozen
+      // As a workaround, loop through the object and make the properties readonly
+      for (const key in proxy) {
+        // @ts-expect-error: this is fine since we are looping through the object
+        const value = proxy[key];
+
+        Object.defineProperty(proxy, key, {
+          enumerable: true,
+          configurable: true,
+          writable: false,
+          value,
+        });
+      }
+    }
+
     Object.defineProperty(proxy, CHILD_STATE, {
       enumerable: false,
       configurable: true,

package/src/useSyncState.tsx

@@ -1,14 +1,27 @@
 import * as React from 'react';
 
+import { deepFreeze } from './deepFreeze';
+
 const createStore = <T,>(getInitialState: () => T) => {
   const listeners: (() => void)[] = [];
 
-  let state: T = getInitialState();
+  let initialized = false;
+  let state: T;
+
+  const getState = () => {
+    if (initialized) {
+      return state;
+    }
 
-  const getState = () => state;
+    initialized = true;
+    state = deepFreeze(getInitialState());
+
+    return state;
+  };
 
   const setState = (newState: T) => {
-    state = newState;
+    state = deepFreeze(newState);
+
     listeners.forEach((listener) => listener());
   };