chore(JS): RNSLog remove from public API (#3744)

sgaczol · web-flow · commit f361221ad6db · 2026-03-12T11:21:43.000+01:00
## Description This PR moves `RNSLog` utility out of the library's public API as discussed there: #3733 (review) ## Changes - move `RNSLog` to `react-native-screens/private` - remove `bottomTabsDebugLog` - update `useRenderDebugInfo` - update logging in `StackContainer` and `BottomTabsContainer` ## Before & after - visual documentation N/A ## Test plan ## Checklist - [ ] Included code example that can be used to test this change. - [ ] Updated / created local changelog entries in relevant test files. - [ ] For visual changes, included screenshots / GIFs / recordings documenting the change. - [ ] For API changes, updated relevant public types. - [ ] Ensured that CI passes
diff --git a/FabricExample/App.tsx b/FabricExample/App.tsx
@@ -8,5 +8,6 @@ featureFlags.experiment.androidResetScreenShadowStateOnOrientationChangeEnabled
   true;
 featureFlags.experiment.iosPreventReattachmentOfDismissedScreens = true;
 featureFlags.experiment.ios26AllowInteractionsDuringTransition = true;
+featureFlags.stable.debugLogging = true;
 
 export default App;
diff --git a/TVOSExample/App.tsx b/TVOSExample/App.tsx
@@ -1,3 +1,6 @@
 import App from '../apps';
+import { featureFlags } from 'react-native-screens';
+
+featureFlags.stable.debugLogging = true;
 
 export default App;
diff --git a/apps/App.tsx b/apps/App.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { enableFreeze, featureFlags } from 'react-native-screens';
+import { enableFreeze } from 'react-native-screens';
 
 import Example from './Example';
 // import { NavigationContainer } from '@react-navigation/native';
 // import { Tests } from './src/tests';
 
 enableFreeze(true);
-featureFlags.stable.debugLogging = true;
 
 export default function App() {
   return <Example />;
diff --git a/apps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx b/apps/src/shared/gamma/containers/bottom-tabs/BottomTabsContainer.tsx
@@ -9,6 +9,7 @@ import {
 import SafeAreaView from '../../../../../../src/components/safe-area/SafeAreaView';
 import type { SafeAreaViewProps } from '../../../../../../src/components/safe-area/SafeAreaView.types';
 import ConfigWrapperContext from './ConfigWrapperContext';
+import { RNSLog } from 'react-native-screens/private';
 
 export interface TabConfiguration {
   tabScreenProps: TabsScreenProps;
@@ -21,12 +22,12 @@ export type BottomTabsContainerProps = TabsHostProps & {
 };
 
 export function BottomTabsContainer(props: BottomTabsContainerProps) {
-  console.info('BottomTabsContainer render');
+  RNSLog.info('BottomTabsContainer render');
 
   const { tabConfigs, ...restProps } = props;
 
   const [focusedScreenKey, setFocusedScreenKey] = React.useState<string>(() => {
-    console.log('BottomTabsContainer focusedStateKey initial state computed');
+    RNSLog.log('BottomTabsContainer focusedStateKey initial state computed');
 
     if (props.tabConfigs.length === 0) {
       throw new Error('There must be at least one tab defined');
@@ -67,7 +68,7 @@ export function BottomTabsContainer(props: BottomTabsContainerProps) {
       // };
 
       transitionFn(() => {
-        console.info(`Starting transition to ${screenKey}`);
+        RNSLog.info(`Starting transition to ${screenKey}`);
         setFocusedScreenKey(screenKey);
       });
     },
@@ -85,8 +86,9 @@ export function BottomTabsContainer(props: BottomTabsContainerProps) {
       {...restProps}>
       {tabConfigs.map(tabConfig => {
         const screenKey = tabConfig.tabScreenProps.screenKey;
-        const isFocused = tabConfig.tabScreenProps.screenKey === focusedScreenKey;
-        console.info(
+        const isFocused =
+          tabConfig.tabScreenProps.screenKey === focusedScreenKey;
+        RNSLog.info(
           `BottomTabsContainer map to component -> ${screenKey} ${
             isFocused ? '(focused)' : ''
           }`,
diff --git a/apps/src/shared/gamma/containers/stack/StackContainer.tsx b/apps/src/shared/gamma/containers/stack/StackContainer.tsx
@@ -17,6 +17,7 @@ import {
 } from './contexts/StackNavigationContext';
 import {
   type NativeComponentGenericRef,
+  RNSLog,
   useRenderDebugInfo,
 } from 'react-native-screens/private';
 import { useParentNavigationEffect } from './hooks/useParentNavigationEffect';
@@ -44,15 +45,15 @@ export function StackContainer({ routeConfigs }: StackContainerProps) {
 
   const onScreenDismissed = React.useCallback(
     (screenKey: string) => {
-      console.log(`onScreenDismissed for ${screenKey}`);
+      RNSLog.log(`onScreenDismissed for ${screenKey}`);
       navMethods.popCompletedAction(screenKey);
     },
     [navMethods],
   );
 
   const onScreenNativelyDismissed = React.useCallback(
     (screenKey: string) => {
-      console.log(`onScreenNativelyDismissed for ${screenKey}`);
+      RNSLog.log(`onScreenNativelyDismissed for ${screenKey}`);
       navMethods.popNativeAction(screenKey);
     },
     [navMethods],
diff --git a/apps/src/tests/issue-tests/TestBottomTabs/index.tsx b/apps/src/tests/issue-tests/TestBottomTabs/index.tsx
@@ -14,10 +14,8 @@ import {
 } from '../../../shared/gamma/containers/bottom-tabs/BottomTabsContainer';
 import { Tab1, Tab2, Tab3, Tab4 } from './tabs';
 import Colors from '../../../shared/styling/Colors';
-import { internalEnableDetailedBottomTabsLogging } from 'react-native-screens/private';
 
 enableFreeze(true);
-internalEnableDetailedBottomTabsLogging();
 
 const DEFAULT_APPEARANCE_ANDROID: TabsScreenAppearanceAndroid = {
   tabBarBackgroundColor: Colors.NavyLight100,
diff --git a/apps/src/tests/issue-tests/TestBottomTabsOrientation.tsx b/apps/src/tests/issue-tests/TestBottomTabsOrientation.tsx
@@ -10,7 +10,6 @@ import {
   type TabConfiguration,
 } from '../../shared/gamma/containers/bottom-tabs/BottomTabsContainer';
 import Colors from '../../shared/styling/Colors';
-import { internalEnableDetailedBottomTabsLogging } from 'react-native-screens/private';
 import { Button, ScrollView, Text, View } from 'react-native';
 import {
   NavigationContainer,
@@ -20,7 +19,6 @@ import {
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 enableFreeze(true);
-internalEnableDetailedBottomTabsLogging();
 
 function ScreenComponent() {
   return (
diff --git a/src/components/tabs/host/TabsHost.android.tsx b/src/components/tabs/host/TabsHost.android.tsx
@@ -6,14 +6,14 @@ import TabsHostAndroidNativeComponent, {
   type NativeProps as TabsHostAndroidNativeComponentProps,
 } from '../../../fabric/tabs/TabsHostAndroidNativeComponent';
 import type { TabsHostProps } from './TabsHost.types';
-import { bottomTabsDebugLog } from '../../../private/logging';
+import { RNSLog } from '../../../private';
 import { useTabsHost } from './useTabsHost';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
 function TabsHost(props: TabsHostProps) {
-  bottomTabsDebugLog(`TabsHost render`);
+  RNSLog.log(`TabsHost render`);
 
   // android props (even if unused for now) are extracted - these should be handled separately from base props
   // ios props are safely dropped
diff --git a/src/components/tabs/host/TabsHost.ios.tsx b/src/components/tabs/host/TabsHost.ios.tsx
@@ -6,7 +6,7 @@ import TabsHostIOSNativeComponent, {
   type NativeProps as TabsHostIOSNativeComponentProps,
 } from '../../../fabric/tabs/TabsHostIOSNativeComponent';
 import type { TabsHostProps } from './TabsHost.types';
-import { bottomTabsDebugLog } from '../../../private/logging';
+import { RNSLog } from '../../../private';
 import TabsBottomAccessory from '../bottom-accessory/TabsBottomAccessory';
 import { TabsBottomAccessoryEnvironment } from '../bottom-accessory/TabsBottomAccessory.types';
 import TabsBottomAccessoryContent from '../bottom-accessory/TabsBottomAccessoryContent';
@@ -17,7 +17,7 @@ import { useTabsHost } from './useTabsHost';
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
 function TabsHost(props: TabsHostProps) {
-  bottomTabsDebugLog(`TabsHost render`);
+  RNSLog.log(`TabsHost render`);
 
   // android props are safely dropped
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/src/components/tabs/host/useTabsHost.ts b/src/components/tabs/host/useTabsHost.ts
@@ -3,7 +3,7 @@ import { findNodeHandle, type NativeSyntheticEvent } from 'react-native';
 import type { NativeProps as TabsHostAndroidNativeComponentProps } from '../../../fabric/tabs/TabsHostAndroidNativeComponent';
 import type { NativeProps as TabsHostIOSNativeComponentProps } from '../../../fabric/tabs/TabsHostIOSNativeComponent';
 import featureFlags from '../../../flags';
-import { bottomTabsDebugLog } from '../../../private/logging';
+import { RNSLog } from '../../../private';
 import type { NativeFocusChangeEvent } from './TabsHost.types';
 
 type TabsHostPlatformNativeComponentProps =
@@ -36,7 +36,7 @@ export function useTabsHost<T extends TabsHostPlatformNativeComponentProps>({
 
   const onNativeFocusChangeCallback = React.useCallback(
     (event: NativeSyntheticEvent<NativeFocusChangeEvent>) => {
-      bottomTabsDebugLog(
+      RNSLog.log(
         `TabsHost [${
           componentNodeHandle.current ?? -1
         }] onNativeFocusChange: ${JSON.stringify(event.nativeEvent)}`,
diff --git a/src/components/tabs/screen/useTabsScreen.ts b/src/components/tabs/screen/useTabsScreen.ts
@@ -2,7 +2,7 @@ import React from 'react';
 import { findNodeHandle, type NativeSyntheticEvent } from 'react-native';
 import type { NativeProps as TabsScreenAndroidNativeComponentProps } from '../../../fabric/tabs/TabsScreenAndroidNativeComponent';
 import type { NativeProps as TabsScreenIOSNativeComponentProps } from '../../../fabric/tabs/TabsScreenIOSNativeComponent';
-import { bottomTabsDebugLog } from '../../../private/logging';
+import { RNSLog } from '../../../private';
 import type { EmptyObject, TabsScreenEventHandler } from './TabsScreen.types';
 
 type TabsScreenPlatformNativeComponentProps =
@@ -43,7 +43,7 @@ export function useTabsScreen<
 
   const onWillAppearCallback = React.useCallback(
     (event: NativeSyntheticEvent<EmptyObject>) => {
-      bottomTabsDebugLog(
+      RNSLog.log(
         `TabsScreen [${componentNodeHandle.current}] onWillAppear received`,
       );
       onWillAppear?.(event);
@@ -53,7 +53,7 @@ export function useTabsScreen<
 
   const onDidAppearCallback = React.useCallback(
     (event: NativeSyntheticEvent<EmptyObject>) => {
-      bottomTabsDebugLog(
+      RNSLog.log(
         `TabsScreen [${componentNodeHandle.current}] onDidAppear received`,
       );
       onDidAppear?.(event);
@@ -63,7 +63,7 @@ export function useTabsScreen<
 
   const onWillDisappearCallback = React.useCallback(
     (event: NativeSyntheticEvent<EmptyObject>) => {
-      bottomTabsDebugLog(
+      RNSLog.log(
         `TabsScreen [${componentNodeHandle.current}] onWillDisappear received`,
       );
       onWillDisappear?.(event);
@@ -73,15 +73,15 @@ export function useTabsScreen<
 
   const onDidDisappearCallback = React.useCallback(
     (event: NativeSyntheticEvent<EmptyObject>) => {
-      bottomTabsDebugLog(
+      RNSLog.log(
         `TabsScreen [${componentNodeHandle.current}] onDidDisappear received`,
       );
       onDidDisappear?.(event);
     },
     [onDidDisappear],
   );
 
-  bottomTabsDebugLog(
+  RNSLog.log(
     `TabsScreen [${
       componentNodeHandle.current ?? -1
     }] render; screenKey: ${screenKey}, isFocused: ${isFocused}`,
diff --git a/src/index.tsx b/src/index.tsx
@@ -59,11 +59,6 @@ export { compatibilityFlags, featureFlags } from './flags';
  */
 export { default as useTransitionProgress } from './useTransitionProgress';
 
-/**
- * RNSLog
- */
-export { RNSLog } from './utils';
-
 /**
  * EXPERIMENTAL API BELOW. MIGHT CHANGE W/O ANY NOTICE
  */
diff --git a/src/private/hooks/useRenderDebugInfo.tsx b/src/private/hooks/useRenderDebugInfo.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { findNodeHandle, ReactNativeElement } from 'react-native';
+import { RNSLog } from '../logging';
 
 export type NativeComponentGenericRef = React.Component & ReactNativeElement;
 
@@ -42,5 +43,5 @@ function logMessage(
   nodeHandle: number,
   message: string,
 ) {
-  console.log(`${componentName} [${nodeHandle}] ${message}`);
+  RNSLog.log(`${componentName} [${nodeHandle}] ${message}`);
 }
diff --git a/src/private/index.ts b/src/private/index.ts
@@ -2,10 +2,7 @@
 export type * from './types';
 
 // Logging
-export {
-  internalEnableDetailedBottomTabsLogging,
-  bottomTabsDebugLog,
-} from './logging';
+export { RNSLog } from './logging';
 
 // Hooks
 
diff --git a/src/private/logging.ts b/src/private/logging.ts
@@ -1,13 +1,28 @@
-let isDetailedLoggingEnabled = false;
+import { featureFlags } from '../flags';
 
-export function bottomTabsDebugLog(
-  ...args: Parameters<(typeof console)['log']>
-) {
-  if (isDetailedLoggingEnabled) {
-    console.log(...args);
-  }
-}
-
-export function internalEnableDetailedBottomTabsLogging() {
-  isDetailedLoggingEnabled = true;
-}
+export const RNSLog = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  log: (message?: any, ...args: any[]) => {
+    if (featureFlags.stable.debugLogging) {
+      console.log(message, ...args);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  warn: (message?: any, ...args: any[]) => {
+    if (featureFlags.stable.debugLogging) {
+      console.warn(message, ...args);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error: (message?: any, ...args: any[]) => {
+    if (featureFlags.stable.debugLogging) {
+      console.error(message, ...args);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  info: (message?: any, ...args: any[]) => {
+    if (featureFlags.stable.debugLogging) {
+      console.info(message, ...args);
+    }
+  },
+};
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,5 +1,4 @@
 import { BackHandler, Platform } from 'react-native';
-import { featureFlags } from './flags';
 
 export const isSearchBarAvailableForCurrentPlatform = [
   'ios',
@@ -28,30 +27,3 @@ export function parseBooleanToOptionalBooleanNativeProp(
       return 'false';
   }
 }
-
-export const RNSLog = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  log: (message?: any, ...args: any[]) => {
-    if (featureFlags.stable.debugLogging) {
-      console.log(message, ...args);
-    }
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  warn: (message?: any, ...args: any[]) => {
-    if (featureFlags.stable.debugLogging) {
-      console.warn(message, ...args);
-    }
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  error: (message?: any, ...args: any[]) => {
-    if (featureFlags.stable.debugLogging) {
-      console.error(message, ...args);
-    }
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  info: (message?: any, ...args: any[]) => {
-    if (featureFlags.stable.debugLogging) {
-      console.info(message, ...args);
-    }
-  },
-};
