@react-navigation/native 8.0.0-alpha.3 → 8.0.0-alpha.31

package/src/useLinking.tsx

@@ -12,21 +12,26 @@ import isEqual from 'fast-deep-equal';
 import * as React from 'react';
 
 import { createMemoryHistory } from './createMemoryHistory';
-import { ServerContext } from './ServerContext';
+import { ServerContext } from './server/ServerContext';
 import type { LinkingOptions } from './types';
 import type { Thenable } from './useThenable';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
+const getRoutesUntilIndex = (state: NavigationState) =>
+  state.routes.slice(0, state.index + 1);
+
 /**
  * Calculate total history length including both navigator history and route history
  */
 const getTotalHistoryLength = (state: NavigationState): number => {
+  const routes = getRoutesUntilIndex(state);
+
   const baseHistoryLength = state.history
     ? state.history.length
-    : state.routes.length;
+    : routes.length;
 
-  const routeHistoryLength = state.routes.reduce((acc, r) => {
+  const routeHistoryLength = routes.reduce((acc, r) => {
     return acc + (r.history ? r.history.length : 0);
   }, 0);
 
@@ -51,6 +56,10 @@ const findMatchingState = <T extends NavigationState>(
   const aRoute = a.routes[a.index];
   const bRoute = b.routes[b.index];
 
+  if (aRoute == null || bRoute == null) {
+    return [a, b];
+  }
+
   const aChildState = aRoute.state as T | undefined;
   const bChildState = bRoute.state as T | undefined;
 
@@ -74,6 +83,48 @@ const findMatchingState = <T extends NavigationState>(
   return findMatchingState(aChildState, bChildState);
 };
 
+/**
+ * Check if the state change is popping the last route or history entry.
+ */
+const isPoppingLastEntry = (
+  current: NavigationState,
+  record: NavigationState
+): boolean => {
+  const currentRoute = current.routes[current.index];
+  const recordRoute = record.routes[record.index];
+
+  if (currentRoute == null || recordRoute == null) {
+    return false;
+  }
+
+  const currentRouteHistory = currentRoute.history;
+  const recordRouteHistory = recordRoute.history ?? [];
+
+  if (currentRouteHistory?.length) {
+    return (
+      currentRoute.key === recordRoute.key &&
+      currentRouteHistory.length === recordRouteHistory.length + 1
+    );
+  }
+
+  if (current.history && record.history) {
+    return current.history.length === record.history.length + 1;
+  }
+
+  const currentRoutes = getRoutesUntilIndex(current);
+  const recordRoutes = getRoutesUntilIndex(record);
+
+  if (currentRoutes.length === recordRoutes.length + 1) {
+    return recordRoutes.every((route, i) => {
+      const currentRoute = currentRoutes[i];
+
+      return currentRoute != null && route.key === currentRoute.key;
+    });
+  }
+
+  return false;
+};
+
 /**
  * Run async function in series as it's called.
  */
@@ -88,17 +139,15 @@ export const series = (cb: () => Promise<void>) => {
 
 const linkingHandlers = new Set<symbol>();
 
-type Options = LinkingOptions<ParamListBase>;
-
-export function useLinking(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
+export function useLinking<ParamList extends ParamListBase>(
+  ref: React.RefObject<NavigationContainerRef<ParamList> | null>,
   {
     enabled = true,
     config,
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: LinkingOptions<ParamList>
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -134,7 +183,15 @@ export function useLinking(
     };
   }, [enabled, independent]);
 
-  const [history] = React.useState(createMemoryHistory);
+  const server = React.use(ServerContext);
+
+  const [history] = React.useState(() => {
+    if (server || typeof window === 'undefined') {
+      return undefined;
+    }
+
+    return createMemoryHistory();
+  });
 
   // We store these options in ref to avoid re-creating getInitialState and re-subscribing listeners
   // This lets user avoid wrapping the items in `React.useCallback` or `React.useMemo`
@@ -164,20 +221,26 @@ export function useLinking(
     [ref]
   );
 
-  const server = React.useContext(ServerContext);
-
   const getInitialState = React.useCallback(() => {
     let value: ResultState | undefined;
 
     if (enabledRef.current) {
-      const location =
-        server?.location ??
-        (typeof window !== 'undefined' ? window.location : undefined);
+      const location = server
+        ? server.location
+        : typeof window !== 'undefined'
+          ? window.location
+          : undefined;
 
       const path = location ? location.pathname + location.search : undefined;
 
       if (path) {
-        value = getStateFromPathRef.current(path, configRef.current);
+        try {
+          value = getStateFromPathRef.current(path, configRef.current);
+        } catch (e) {
+          console.error(e);
+
+          value = undefined;
+        }
       }
     }
 
@@ -196,6 +259,10 @@ export function useLinking(
   const pendingPopStatePathRef = React.useRef<string | undefined>(undefined);
 
   React.useEffect(() => {
+    if (!history) {
+      return;
+    }
+
     previousIndexRef.current = history.index;
 
     return history.listen(() => {
@@ -221,11 +288,43 @@ export function useLinking(
       const record = history.get(index);
 
       if (record?.path === path && record?.state) {
-        navigation.resetRoot(record.state);
+        const currentState = navigation.getRootState();
+
+        const [currentFocused, recordFocused] = findMatchingState(
+          currentState,
+          record.state
+        );
+
+        if (
+          previousIndex - index === 1 &&
+          currentFocused &&
+          recordFocused &&
+          isPoppingLastEntry(currentFocused, recordFocused)
+        ) {
+          // If we detect that the state change is popping the last entry
+          // Dispatch a back action instead of resetting to the state
+          // This makes sure changes to history state since the entry was added don't get lost
+          navigation.goBack();
+        } else {
+          navigation.resetRoot(record.state);
+        }
+
         return;
       }
 
-      const state = getStateFromPathRef.current(path, configRef.current);
+      let state: ResultState | undefined;
+
+      try {
+        state = getStateFromPathRef.current(
+          path,
+          configRef.current,
+          navigation.getRootState()
+        );
+      } catch (e) {
+        console.error(e);
+
+        state = undefined;
+      }
 
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
@@ -270,7 +369,7 @@ export function useLinking(
   }, [enabled, history, ref, validateRoutesNotExistInRootState]);
 
   React.useEffect(() => {
-    if (!enabled) {
+    if (!enabled || !history) {
       return;
     }
 
@@ -283,10 +382,18 @@ export function useLinking(
       // If the `route` object contains a `path`, use that path as long as `route.name` and `params` still match
       // This makes sure that we preserve the original URL for wildcard routes
       if (route?.path) {
-        const stateForPath = getStateFromPathRef.current(
-          route.path,
-          configRef.current
-        );
+        let stateForPath: ResultState | undefined;
+
+        try {
+          stateForPath = getStateFromPathRef.current(
+            route.path,
+            configRef.current
+          );
+        } catch (e) {
+          console.error(e);
+
+          stateForPath = undefined;
+        }
 
         if (stateForPath) {
           const focusedRoute = findFocusedRoute(stateForPath);
@@ -337,6 +444,7 @@ export function useLinking(
         }
 
         history.replace({ path, state });
+        previousIndexRef.current = history.index;
       }
     }
 
@@ -422,6 +530,8 @@ export function useLinking(
         // This would happen if the user did a reset/conditionally changed navigators
         history.replace({ path, state });
       }
+
+      previousIndexRef.current = history.index;
     };
 
     // We debounce onStateChange coz we don't want multiple state changes to be handled at one time

package/src/useLocale.tsx

@@ -6,7 +6,7 @@ import { LocaleDirContext } from './LocaleDirContext';
  * Hook to access the text direction specified in the `NavigationContainer`.
  */
 export function useLocale() {
-  const direction = React.useContext(LocaleDirContext);
+  const direction = React.use(LocaleDirContext);
 
   if (direction === undefined) {
     throw new Error(

package/src/useMemoArray.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+export function useMemoArray<T>(
+  entries: [item: T, deps: readonly unknown[]][]
+): T[] {
+  const previousRef = React.useRef<
+    | {
+        entries: { item: T; deps: readonly unknown[] }[];
+        items: T[];
+      }
+    | undefined
+  >(undefined);
+
+  const previous = previousRef.current;
+  const next = entries.map(([item, deps], index) => {
+    const previousEntry = previous?.entries[index];
+    const depsEqual =
+      previousEntry &&
+      previousEntry.deps.length === deps.length &&
+      previousEntry.deps.every((it, index) => Object.is(it, deps[index]));
+
+    return depsEqual ? previousEntry : { item, deps };
+  });
+
+  if (
+    previous &&
+    previous.entries.length === next.length &&
+    next.every((entry, index) => entry === previous.entries[index])
+  ) {
+    return previous.items;
+  }
+
+  const items = next.map((entry) => entry.item);
+
+  previousRef.current = {
+    entries: next,
+    items,
+  };
+
+  return items;
+}

package/src/useRoutePath.tsx

@@ -9,7 +9,7 @@ import { LinkingContext } from './LinkingContext';
  * @returns Path for the current route.
  */
 export function useRoutePath() {
-  const { options } = React.useContext(LinkingContext);
+  const { options } = React.use(LinkingContext);
   const state = useStateForPath();
 
   if (state === undefined) {

package/src/useScrollToTop.tsx

@@ -51,7 +51,7 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
 }
 
 export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
-  const navigation = React.useContext(NavigationContext);
+  const navigation = React.use(NavigationContext);
   const route = useRoute();
 
   if (navigation === undefined) {
@@ -91,9 +91,10 @@ export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
 
           // In a nested stack navigator, tab press resets the stack to first screen
           // So we should scroll to top only when we are on first screen
+          const firstRoute = navigation.getState().routes[0];
           const isFirst =
             tabNavigations.includes(navigation) ||
-            navigation.getState().routes[0].key === route.key;
+            firstRoute?.key === route.key;
 
           // Run the operation in the next frame so we're sure all listeners have been run
           // This is necessary to know if preventDefault() has been called

package/android/build/.transforms/586a73aab4c351d3f13dc604ca6964e8/results.bin

@@ -1 +0,0 @@
-o/classes

package/android/build/.transforms/fb9c4b42fa16b6541a5819cb4bf06272/results.bin

@@ -1 +0,0 @@
-o/bundleLibRuntimeToDirDebug

package/android/build/generated/source/buildConfig/debug/org/reactnavigation/BuildConfig.java

@@ -1,10 +0,0 @@
-/**
- * Automatically generated file. DO NOT MODIFY
- */
-package org.reactnavigation;
-
-public final class BuildConfig {
-  public static final boolean DEBUG = Boolean.parseBoolean("true");
-  public static final String LIBRARY_PACKAGE_NAME = "org.reactnavigation";
-  public static final String BUILD_TYPE = "debug";
-}

package/android/build/generated/source/codegen/java/com/facebook/fbreact/specs/NativeMaterialSymbolModuleSpec.java

@@ -1,38 +0,0 @@
-
-/**
- * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
- *
- * Do not edit this file as changes may cause incorrect behavior and will be lost
- * once the code is regenerated.
- *
- * @generated by codegen project: GenerateModuleJavaSpec.js
- *
- * @nolint
- */
-
-package com.facebook.fbreact.specs;
-
-import com.facebook.proguard.annotations.DoNotStrip;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.turbomodule.core.interfaces.TurboModule;
-import javax.annotation.Nonnull;
-
-public abstract class NativeMaterialSymbolModuleSpec extends ReactContextBaseJavaModule implements TurboModule {
-  public static final String NAME = "ReactNavigationMaterialSymbolModule";
-
-  public NativeMaterialSymbolModuleSpec(ReactApplicationContext reactContext) {
-    super(reactContext);
-  }
-
-  @Override
-  public @Nonnull String getName() {
-    return NAME;
-  }
-
-  @ReactMethod(isBlockingSynchronousMethod = true)
-  @DoNotStrip
-  public abstract String getImageSource(String name, String variant, double size, double weight, ReadableMap color, String hash);
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationMaterialSymbolViewManagerDelegate.java

@@ -1,45 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaDelegate.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.bridge.ColorPropConverter;
-import com.facebook.react.uimanager.BaseViewManager;
-import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.LayoutShadowNode;
-
-public class ReactNavigationMaterialSymbolViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNavigationMaterialSymbolViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
-  public ReactNavigationMaterialSymbolViewManagerDelegate(U viewManager) {
-    super(viewManager);
-  }
-  @Override
-  public void setProperty(T view, String propName, @Nullable Object value) {
-    switch (propName) {
-      case "name":
-        mViewManager.setName(view, value == null ? null : (String) value);
-        break;
-      case "variant":
-        mViewManager.setVariant(view, value == null ? null : (String) value);
-        break;
-      case "weight":
-        mViewManager.setWeight(view, value == null ? 400 : ((Double) value).intValue());
-        break;
-      case "size":
-        mViewManager.setSize(view, value == null ? Float.NaN : ((Double) value).floatValue());
-        break;
-      case "color":
-        mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
-        break;
-      default:
-        super.setProperty(view, propName, value);
-    }
-  }
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationMaterialSymbolViewManagerInterface.java

@@ -1,22 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaInterface.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
-
-public interface ReactNavigationMaterialSymbolViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
-  void setName(T view, @Nullable String value);
-  void setVariant(T view, @Nullable String value);
-  void setWeight(T view, @Nullable Integer value);
-  void setSize(T view, float value);
-  void setColor(T view, @Nullable Integer value);
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationSFSymbolViewManagerDelegate.java

@@ -1,39 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaDelegate.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.bridge.ColorPropConverter;
-import com.facebook.react.uimanager.BaseViewManager;
-import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.LayoutShadowNode;
-
-public class ReactNavigationSFSymbolViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNavigationSFSymbolViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
-  public ReactNavigationSFSymbolViewManagerDelegate(U viewManager) {
-    super(viewManager);
-  }
-  @Override
-  public void setProperty(T view, String propName, @Nullable Object value) {
-    switch (propName) {
-      case "name":
-        mViewManager.setName(view, value == null ? null : (String) value);
-        break;
-      case "size":
-        mViewManager.setSize(view, value == null ? Float.NaN : ((Double) value).floatValue());
-        break;
-      case "color":
-        mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
-        break;
-      default:
-        super.setProperty(view, propName, value);
-    }
-  }
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationSFSymbolViewManagerInterface.java

@@ -1,20 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaInterface.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
-
-public interface ReactNavigationSFSymbolViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
-  void setName(T view, @Nullable String value);
-  void setSize(T view, float value);
-  void setColor(T view, @Nullable Integer value);
-}

package/android/build/generated/source/codegen/jni/CMakeLists.txt

@@ -1,28 +0,0 @@
-# Copyright (c) Meta Platforms, Inc. and affiliates.
-#
-# This source code is licensed under the MIT license found in the
-# LICENSE file in the root directory of this source tree.
-
-cmake_minimum_required(VERSION 3.13)
-set(CMAKE_VERBOSE_MAKEFILE on)
-
-file(GLOB react_codegen_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/ReactNavigationSpec/*.cpp)
-
-add_library(
-  react_codegen_ReactNavigationSpec
-  OBJECT
-  ${react_codegen_SRCS}
-)
-
-target_include_directories(react_codegen_ReactNavigationSpec PUBLIC . react/renderer/components/ReactNavigationSpec)
-
-target_link_libraries(
-  react_codegen_ReactNavigationSpec
-  fbjni
-  jsi
-  # We need to link different libraries based on whether we are building rncore or not, that's necessary
-  # because we want to break a circular dependency between react_codegen_rncore and reactnative
-  reactnative
-)
-
-target_compile_reactnative_options(react_codegen_ReactNavigationSpec PRIVATE)

package/android/build/generated/source/codegen/jni/ReactNavigationSpec-generated.cpp

@@ -1,32 +0,0 @@
-
-/**
- * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
- *
- * Do not edit this file as changes may cause incorrect behavior and will be lost
- * once the code is regenerated.
- *
- * @generated by codegen project: GenerateModuleJniCpp.js
- */
-
-#include "ReactNavigationSpec.h"
-
-namespace facebook::react {
-
-static facebook::jsi::Value __hostFunction_NativeMaterialSymbolModuleSpecJSI_getImageSource(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
-  static jmethodID cachedMethodId = nullptr;
-  return static_cast<JavaTurboModule &>(turboModule).invokeJavaMethod(rt, StringKind, "getImageSource", "(Ljava/lang/String;Ljava/lang/String;DDLcom/facebook/react/bridge/ReadableMap;Ljava/lang/String;)Ljava/lang/String;", args, count, cachedMethodId);
-}
-
-NativeMaterialSymbolModuleSpecJSI::NativeMaterialSymbolModuleSpecJSI(const JavaTurboModule::InitParams &params)
-  : JavaTurboModule(params) {
-  methodMap_["getImageSource"] = MethodMetadata {6, __hostFunction_NativeMaterialSymbolModuleSpecJSI_getImageSource};
-}
-
-std::shared_ptr<TurboModule> ReactNavigationSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params) {
-  if (moduleName == "ReactNavigationMaterialSymbolModule") {
-    return std::make_shared<NativeMaterialSymbolModuleSpecJSI>(params);
-  }
-  return nullptr;
-}
-
-} // namespace facebook::react