@react-navigation/native 8.0.0-alpha.27 → 8.0.0-alpha.29

package/src/createMemoryHistory.tsx

@@ -10,7 +10,7 @@ type HistoryRecord = {
   path: string;
 };
 
-const getPathWithoutHash = (path: string) => path.split('#')[0];
+const getPathWithoutHash = (path: string) => path.split('#')[0] ?? '';
 
 export function createMemoryHistory() {
   let index = 0;
@@ -56,6 +56,10 @@ export function createMemoryHistory() {
       for (let i = index - 1; i >= 0; i--) {
         const item = items[i];
 
+        if (item == null) {
+          continue;
+        }
+
         if (item.path === pathWithoutHash) {
           return i;
         }
@@ -107,9 +111,12 @@ export function createMemoryHistory() {
         items = [{ path: pathWithoutHash, state, id }];
         index = 0;
       } else {
-        if (items[index].path === pathWithoutHash) {
+        const item = items[index];
+
+        if (item?.path === pathWithoutHash) {
           pathWithHash = pathWithHash + hash;
         }
+
         items[index] = { path: pathWithoutHash, state, id };
       }
 
@@ -185,7 +192,7 @@ export function createMemoryHistory() {
           const foundIndex = pending.findIndex((it) => it.ref === done);
 
           if (foundIndex > -1) {
-            pending[foundIndex].cb();
+            pending[foundIndex]?.cb();
             pending.splice(foundIndex, 1);
           }
 

package/src/createStandardNavigationFactories.tsx

@@ -0,0 +1,218 @@
+import {
+  CommonActions,
+  createNavigatorFactory,
+  createScreenFactory,
+  type DefaultRouterOptions,
+  type EventMapBase,
+  type NavigationAction,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type RouterFactory,
+  useNavigationBuilder,
+} from '@react-navigation/core';
+import * as React from 'react';
+import type {
+  createStandardNavigator,
+  NavigatorArgs as StandardNavigationArgs,
+} from 'standard-navigation';
+
+import { useBuildHref } from './useLinkBuilder';
+import { useMemoArray } from './useMemoArray';
+
+type StandardEventMap<EventMap extends EventMapBase> = {
+  [EventName in keyof EventMap]: {
+    data: EventMap[EventName] extends { data?: infer Data }
+      ? Data extends object | undefined
+        ? Data
+        : object | undefined
+      : undefined;
+    canPreventDefault: EventMap[EventName] extends { canPreventDefault: true }
+      ? true
+      : false;
+  };
+};
+
+export interface StandardNavigationTypeBagBase extends NavigatorTypeBagBase {
+  RouterOptions: DefaultRouterOptions;
+  Navigator: React.ComponentType<{}>;
+}
+
+type StandardNavigationTypeBagFor<
+  TypeBag extends StandardNavigationTypeBagBase,
+  ParamList extends ParamListBase,
+> = TypeBag & { ParamList: ParamList };
+
+type StandardNavigationListFor<
+  TypeBag extends StandardNavigationTypeBagBase,
+  ParamList extends ParamListBase,
+> = StandardNavigationTypeBagFor<TypeBag, ParamList>['NavigationList'];
+
+type StandardNavigationMapperProps<
+  TypeBag extends StandardNavigationTypeBagBase,
+> = {
+  state: StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'];
+  navigation: StandardNavigationListFor<
+    TypeBag,
+    ParamListBase
+  >[keyof StandardNavigationListFor<TypeBag, ParamListBase>];
+};
+
+export function createStandardNavigationFactories<
+  TypeBag extends StandardNavigationTypeBagBase,
+  NavigatorProps extends object = {},
+>(
+  navigator: ReturnType<
+    typeof createStandardNavigator<
+      TypeBag['ScreenOptions'],
+      StandardEventMap<TypeBag['EventMap']>,
+      NavigatorProps
+    >
+  >,
+  router: RouterFactory<
+    StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'],
+    NavigationAction,
+    TypeBag['RouterOptions']
+  >,
+  mapper?: (
+    props: StandardNavigationMapperProps<TypeBag>
+  ) => Partial<NavigatorProps>
+) {
+  const { type, version, NavigatorContent } = navigator;
+
+  if (type !== 'standard') {
+    throw new Error(
+      `createStandardNavigationFactories only works with standard navigator objects, but got navigator of ${typeof type === 'string' ? `type "${type}".` : 'unknown type.'}`
+    );
+  }
+
+  if (version !== 1) {
+    throw new Error(
+      `createStandardNavigationFactories only works with version 1 of standard navigator objects, but got version ${version}.`
+    );
+  }
+
+  type StandardArgs = StandardNavigationArgs<
+    TypeBag['ScreenOptions'],
+    StandardEventMap<TypeBag['EventMap']>
+  >;
+
+  function StandardNavigationNavigator(props: any) {
+    const builder = useNavigationBuilder<
+      TypeBag['State'],
+      TypeBag['RouterOptions'],
+      TypeBag['ActionHelpers'],
+      TypeBag['ScreenOptions'],
+      TypeBag['EventMap']
+    >(router, props);
+
+    const buildHref = useBuildHref();
+
+    const routes = useMemoArray(
+      builder.state.routes.map((route) => {
+        const href = buildHref(route.name, route.params);
+
+        return [
+          {
+            key: route.key,
+            name: route.name,
+            params: route.params,
+            href,
+          },
+          [route.key, route.name, route.params, href],
+        ];
+      })
+    );
+
+    const state = React.useMemo(
+      (): StandardArgs['state'] => ({
+        index: builder.state.index,
+        routes,
+      }),
+      [builder.state.index, routes]
+    );
+
+    const descriptors: StandardArgs['descriptors'] = {};
+
+    for (const route of state.routes) {
+      const descriptor = builder.descriptors[route.key];
+
+      if (descriptor == null) {
+        throw new Error(
+          `No descriptor found for route "${route.name}" (${route.key}).`
+        );
+      }
+
+      descriptors[route.key] = {
+        options: descriptor.options,
+        render: descriptor.render,
+      };
+    }
+
+    const actions = React.useMemo<StandardArgs['actions']>(
+      () => ({
+        navigate(name, params) {
+          builder.navigation.dispatch({
+            ...CommonActions.navigate(name, params),
+            target: builder.state.key,
+          });
+        },
+        back() {
+          builder.navigation.goBack();
+        },
+      }),
+      [builder.navigation, builder.state.key]
+    );
+
+    const emitter = React.useMemo<StandardArgs['emitter']>(
+      () => ({
+        // @ts-expect-error - they are compatible
+        emit: builder.navigation.emit,
+      }),
+      [builder.navigation]
+    );
+
+    const mapped = mapper?.({
+      state: builder.state as TypeBag['State'],
+      navigation: builder.navigation as never,
+    });
+
+    // Omit props used by useNavigationBuilder and routers internally
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      children,
+      initialRouteName,
+      layout,
+      routeNamesChangeBehavior,
+      router: routerOverride,
+      screenLayout,
+      screenListeners,
+      screenOptions,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = props;
+
+    return (
+      <builder.NavigationContent>
+        <NavigatorContent
+          {...(rest as NavigatorProps)}
+          {...mapped}
+          state={state}
+          descriptors={descriptors}
+          actions={actions}
+          emitter={emitter}
+        />
+      </builder.NavigationContent>
+    );
+  }
+
+  const createNavigator = createNavigatorFactory<TypeBag>(
+    StandardNavigationNavigator
+  );
+
+  const createScreen = createScreenFactory<TypeBag>();
+
+  return {
+    createNavigator,
+    createScreen,
+  };
+}

package/src/extractPathFromURL.tsx

@@ -25,7 +25,7 @@ export function extractPathFromURL(prefixes: LinkingPrefix[], url: string) {
       );
     }
 
-    const [originAndPath, ...searchParams] = url.split('?');
+    const [originAndPath = '', ...searchParams] = url.split('?');
 
     if (prefixRegex.test(originAndPath)) {
       const result = originAndPath

package/src/getStateFromHref.tsx

@@ -1,11 +1,16 @@
-import { getStateFromPath, type ParamListBase } from '@react-navigation/core';
+import {
+  getStateFromPath,
+  type NavigationState,
+  type ParamListBase,
+} from '@react-navigation/core';
 
 import { extractPathFromURL } from './extractPathFromURL';
 import type { LinkingOptions } from './types';
 
 export function getStateFromHref(
   href: string,
-  options: LinkingOptions<ParamListBase> | undefined
+  options: LinkingOptions<ParamListBase> | undefined,
+  previous: NavigationState | undefined
 ): ReturnType<typeof getStateFromPath> {
   const {
     prefixes,
@@ -40,7 +45,7 @@ export function getStateFromHref(
     );
   }
 
-  const state = getStateFromPathHelper(path, config);
+  const state = getStateFromPathHelper(path, config, previous);
 
   return state;
 }

package/src/index.tsx

@@ -1,3 +1,7 @@
+export {
+  createStandardNavigationFactories,
+  type StandardNavigationTypeBagBase,
+} from './createStandardNavigationFactories';
 export { createStaticNavigation } from './createStaticNavigation';
 export { Link } from './Link';
 export { LinkingContext } from './LinkingContext';

package/src/native/SFSymbol.ios.tsx

@@ -2,24 +2,68 @@ import type { ViewProps } from 'react-native';
 
 import { FONT_WEIGHTS } from './constants';
 import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
-import type { SFSymbolOptions } from './types';
+import type {
+  SFSymbolBreatheVariant,
+  SFSymbolContentTransitionEffect,
+  SFSymbolContentTransitionScope,
+  SFSymbolDrawDirection,
+  SFSymbolEffectDirection,
+  SFSymbolEffectName,
+  SFSymbolEffectRepeat,
+  SFSymbolEffectScope,
+  SFSymbolInactiveLayers,
+  SFSymbolOptions,
+  SFSymbolReplaceTransitionVariant,
+} from './types';
 
 export type SFSymbolProps = SFSymbolOptions & ViewProps;
 
+type NativeEffectConfig = {
+  type: SFSymbolEffectName;
+  speed?: number | undefined;
+  repeat?: SFSymbolEffectRepeat | undefined;
+  scope?: SFSymbolEffectScope | undefined;
+  direction?: SFSymbolEffectDirection | undefined;
+  variant?: SFSymbolBreatheVariant | undefined;
+  angle?: number | undefined;
+  reversing?: boolean | undefined;
+  cumulative?: boolean | undefined;
+  inactiveLayers?: SFSymbolInactiveLayers | undefined;
+  drawDirection?: SFSymbolDrawDirection | undefined;
+};
+
+type NativeContentTransitionConfig = {
+  type: SFSymbolContentTransitionEffect;
+  speed?: number | undefined;
+  variant?: SFSymbolReplaceTransitionVariant | undefined;
+  scope?: SFSymbolContentTransitionScope | undefined;
+  magic?: boolean | undefined;
+};
+
 export function SFSymbol({
   name,
   size = 24,
   color,
   weight,
   scale = 'medium',
-  mode = 'monochrome',
+  variableValue,
+  variableValueMode = 'automatic',
+  colorRenderingMode = 'automatic',
+  renderingMode = 'monochrome',
   colors,
-  animation,
+  effect,
+  contentTransition,
   style,
   ...rest
 }: SFSymbolProps): React.ReactElement {
-  const animConfig =
-    typeof animation === 'string' ? { effect: animation } : animation;
+  const effectConfig: NativeEffectConfig | undefined =
+    typeof effect === 'string' ? { type: effect } : effect;
+  const contentTransitionConfig: NativeContentTransitionConfig | undefined =
+    typeof contentTransition === 'string'
+      ? { type: contentTransition }
+      : contentTransition;
+
+  const repeat = effectConfig?.repeat;
 
   return (
     <SFSymbolViewNativeComponent
@@ -28,18 +72,33 @@ export function SFSymbol({
       color={color}
       weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
       scale={scale}
-      mode={mode}
+      variableValue={variableValue ?? -1}
+      variableValueMode={variableValueMode}
+      colorRenderingMode={colorRenderingMode}
+      renderingMode={renderingMode}
       colorPrimary={colors?.primary ?? color}
       colorSecondary={colors?.secondary}
       colorTertiary={colors?.tertiary}
-      animation={animConfig?.effect ?? ''}
-      animationRepeating={animConfig?.repeating ?? false}
-      animationRepeatCount={animConfig?.repeatCount ?? 0}
-      animationSpeed={animConfig?.speed ?? 1}
-      animationWholeSymbol={animConfig?.wholeSymbol ?? false}
-      animationDirection={animConfig?.direction ?? ''}
-      animationReversing={animConfig?.reversing ?? false}
-      animationCumulative={animConfig?.cumulative ?? false}
+      effect={effectConfig?.type ?? ''}
+      effectRepeat={
+        typeof repeat === 'string' ? repeat : repeat ? 'periodic' : ''
+      }
+      effectRepeatCount={typeof repeat === 'object' ? (repeat.count ?? 0) : 0}
+      effectRepeatDelay={typeof repeat === 'object' ? (repeat.delay ?? 0) : 0}
+      effectSpeed={effectConfig?.speed ?? 1}
+      effectScope={effectConfig?.scope ?? ''}
+      effectDirection={effectConfig?.direction ?? ''}
+      effectVariant={effectConfig?.variant ?? ''}
+      effectAngle={effectConfig?.angle ?? -1}
+      effectReversing={effectConfig?.reversing ?? false}
+      effectCumulative={effectConfig?.cumulative ?? false}
+      effectInactiveLayers={effectConfig?.inactiveLayers ?? ''}
+      effectDrawDirection={effectConfig?.drawDirection ?? ''}
+      contentTransition={contentTransitionConfig?.type ?? ''}
+      contentTransitionSpeed={contentTransitionConfig?.speed ?? 1}
+      contentTransitionVariant={contentTransitionConfig?.variant ?? ''}
+      contentTransitionScope={contentTransitionConfig?.scope ?? ''}
+      contentTransitionMagic={contentTransitionConfig?.magic ?? false}
       style={[
         {
           width: size,

package/src/native/SFSymbolViewNativeComponent.ts

@@ -13,18 +13,31 @@ export interface NativeProps extends ViewProps {
   color?: ColorValue;
   weight: CodegenTypes.Int32;
   scale: string;
-  mode: string;
+  variableValue: CodegenTypes.Float;
+  variableValueMode: string;
+  colorRenderingMode: string;
+  renderingMode: string;
   colorPrimary?: ColorValue;
   colorSecondary?: ColorValue;
   colorTertiary?: ColorValue;
-  animation: string;
-  animationRepeating: boolean;
-  animationRepeatCount: CodegenTypes.Int32;
-  animationSpeed: CodegenTypes.Float;
-  animationWholeSymbol: boolean;
-  animationDirection: string;
-  animationReversing: boolean;
-  animationCumulative: boolean;
+  effect: string;
+  effectRepeat: string;
+  effectRepeatCount: CodegenTypes.Int32;
+  effectRepeatDelay: CodegenTypes.Float;
+  effectSpeed: CodegenTypes.Float;
+  effectScope: string;
+  effectDirection: string;
+  effectVariant: string;
+  effectAngle: CodegenTypes.Float;
+  effectReversing: boolean;
+  effectCumulative: boolean;
+  effectInactiveLayers: string;
+  effectDrawDirection: string;
+  contentTransition: string;
+  contentTransitionSpeed: CodegenTypes.Float;
+  contentTransitionVariant: string;
+  contentTransitionScope: string;
+  contentTransitionMagic: boolean;
 }
 
 export default codegenNativeComponent<NativeProps>(