@react-navigation/native 8.0.0-alpha.4 → 8.0.0-alpha.41

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -2,22 +2,25 @@
 
 import {
   codegenNativeComponent,
-  CodegenTypes,
+  type CodegenTypes,
   type ColorValue,
   type ViewProps,
 } from 'react-native';
 
 export interface NativeProps extends ViewProps {
   name: string;
-  variant?: string;
+  variant?: string | undefined;
   weight?: CodegenTypes.WithDefault<
     0 | 100 | 200 | 300 | 400 | 500 | 600 | 700,
     0
   >;
   size: CodegenTypes.Float;
-  color: ColorValue;
+  color?: ColorValue | undefined;
 }
 
 export default codegenNativeComponent<NativeProps>(
-  'ReactNavigationMaterialSymbolView'
+  'ReactNavigationMaterialSymbolView',
+  {
+    excludedPlatforms: ['iOS'],
+  }
 );

package/src/native/ReactNavigationCornerInsetViewNativeComponent.ts

@@ -0,0 +1,31 @@
+/* eslint-disable import-x/no-default-export */
+import * as React from 'react';
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  direction?: CodegenTypes.WithDefault<'vertical' | 'horizontal', 'vertical'>;
+  edge?: CodegenTypes.WithDefault<'top' | 'right' | 'bottom' | 'left', 'top'>;
+  adaptive?: CodegenTypes.WithDefault<boolean, true>;
+}
+
+interface NativeCommands {
+  relayout(viewRef: React.ComponentRef<HostComponent<NativeProps>>): void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['relayout'],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNavigationCornerInsetView',
+  {
+    excludedPlatforms: ['android'],
+    interfaceOnly: true,
+  }
+);

package/src/native/SFSymbol.ios.tsx

@@ -1,10 +1,49 @@
-import type { ViewProps } from 'react-native';
+import type { ViewStyle } 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;
+export type SFSymbolProps = SFSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
+
+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,
@@ -12,14 +51,23 @@ export function SFSymbol({
   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 +76,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,
@@ -47,7 +110,6 @@ export function SFSymbol({
         },
         style,
       ]}
-      {...rest}
     />
   );
 }

package/src/native/SFSymbol.tsx

@@ -1,8 +1,13 @@
-import type { ViewProps } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import type { SFSymbolOptions } from './types';
 
-export type SFSymbolProps = SFSymbolOptions & ViewProps;
+export type SFSymbolProps = SFSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
 
 export function SFSymbol(_: SFSymbolProps): React.ReactElement {
   throw new Error('SFSymbol is only supported on iOS.');

package/src/native/SFSymbolViewNativeComponent.ts

@@ -2,7 +2,7 @@
 
 import {
   codegenNativeComponent,
-  CodegenTypes,
+  type CodegenTypes,
   type ColorValue,
   type ViewProps,
 } from 'react-native';
@@ -10,23 +10,39 @@ import {
 export interface NativeProps extends ViewProps {
   name: string;
   size: CodegenTypes.Float;
-  color?: ColorValue;
+  color?: ColorValue | undefined;
   weight: CodegenTypes.Int32;
   scale: string;
-  mode: 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;
+  variableValue: CodegenTypes.Float;
+  variableValueMode: string;
+  colorRenderingMode: string;
+  renderingMode: string;
+  colorPrimary?: ColorValue | undefined;
+  colorSecondary?: ColorValue | undefined;
+  colorTertiary?: ColorValue | undefined;
+  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>(
-  'ReactNavigationSFSymbolView'
+  'ReactNavigationSFSymbolView',
+  {
+    excludedPlatforms: ['android'],
+  }
 );