chore: make all exports from v5 component modules explicit (#3808)

## Description

While doing
#3785 I've
encountered a problem, where I could not export any non-type symbol from
`src/components/tabs/index.ts` because such symbol would be exported
twice - once from `src/index.ts:'export type * from './types'` and once
from `src/index.ts:<my added symbol export>` resulting in duplicated
exports error. This made me notice that our API export structure is
wrong. This PR changes that to one consistent structure across all of
our new components. It should not be a breaking change unless somebody
used deep-imports.

I'll create a doc describing the new system later, but here me out here
first.

1. Each component module should be responsible for defining it's own
public API at `src/components/<component-name>/index.ts` boundary.
Anything not directly importable from that file is not a part of public
API.
2. Root `src/index.tsx` file just reexports all the symbols exported at
the component module level.
3. No `export * from ...` type exports on the component module boundary
level. Only explicit exports are allowed. It's better to not ship some
symbol and add it later, than publish something by accident and remove
it later.
4. No default exports neither from component module boundary level nor
component implementation modules.

Such setup will also allow for easier library modularisation down the
line.

## Changes

Replaces wildcard (`export *` / `export type *`) re-exports with
explicit named exports across all v5 (experimental) component modules:
`Tabs`, `Stack`, `Split`, `SafeAreaView`, and `ScrollViewMarker`.

Also converts default exports to named exports for these components so
that each module's public surface is clearly declared in one place.

- **`src/components/tabs/index.ts`** — explicit type exports, `export
const Tabs` instead of `export default`
- **`src/components/gamma/stack/index.ts`** — explicit type exports,
`export const Stack` instead of `export default`
- **`src/components/gamma/split/index.ts`** — explicit type exports,
`export const Split` instead of `export default`
- **`src/components/safe-area/SafeAreaView.tsx`** — named export instead
of default
- **`src/components/safe-area/index.ts`** — new barrel with explicit
exports
- **`src/components/gamma/scroll-view-marker/`** — named export,
explicit re-exports
- **`src/experimental/index.ts`** — simplified to `export *` from each
component index (which now have explicit surfaces)
- **`src/experimental/types.ts`** — deleted; types are now owned by
their respective component index files
- **`src/index.tsx`** — `export type *` for v4 types; `export * from
'./components/tabs'` to correctly expose `SCREEN_KEY_MORE_NAV_CTRL` and
`Tabs` as a named export
- **`src/types.tsx`** — removed stale re-exports of tabs & shared types
(moved to `src/index.tsx`)

## Test plan

- Verified that `Tabs`, `Stack`, `Split`, `SafeAreaView`,
`ScrollViewMarker` remain importable from their respective entry points.

## 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

Author: kkafar

src/components/ScreenStackItem.tsx

@@ -20,7 +20,7 @@ import ScreenStack from './ScreenStack';
 import { RNSScreensRefContext } from '../contexts';
 import { FooterComponent } from './ScreenFooter';
 import { SafeAreaViewProps } from './safe-area/SafeAreaView.types';
-import SafeAreaView from './safe-area/SafeAreaView';
+import { SafeAreaView } from './safe-area/SafeAreaView';
 import { featureFlags } from '../flags';
 import { isIOS26OrHigher } from './helpers/PlatformUtils';
 

src/components/gamma/scroll-view-marker/ScrollViewMarker.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ScrollViewMarkerNativeComponent from '../../../fabric/gamma/ScrollViewMarkerNativeComponent';
 import type { ScrollViewMarkerProps } from './ScrollViewMarker.types';
 
-export default function ScrollViewMarker(props: ScrollViewMarkerProps) {
+export function ScrollViewMarker(props: ScrollViewMarkerProps) {
   const { scrollEdgeEffects, ...rest } = props;
 
   return (

src/components/gamma/scroll-view-marker/ScrollViewMarker.types.ts

@@ -1,5 +1,5 @@
 import type { ViewProps } from 'react-native';
-import type { ScrollEdgeEffect } from '../../../types';
+import type { ScrollEdgeEffect } from '../../shared/types';
 
 export interface ScrollViewMarkerProps {
   children: ViewProps['children'];

src/components/gamma/scroll-view-marker/index.ts

@@ -1,3 +1,3 @@
-export type * from './ScrollViewMarker.types';
+export type { ScrollViewMarkerProps } from './ScrollViewMarker.types';
 
-export { default as ScrollViewMarker } from './ScrollViewMarker';
+export { ScrollViewMarker } from './ScrollViewMarker';

src/components/gamma/split/index.ts

@@ -1,16 +1,30 @@
 import SplitHost from './SplitHost';
 import SplitScreen from './SplitScreen';
 
-export * from './SplitHost.types';
-export * from './SplitScreen.types';
+export type {
+  DisplayModeWillChangeEvent, // TODO: This event should be renamed to match the convention
+  SplitDisplayModeButtonVisibility,
+  SplitBehavior,
+  SplitPrimaryEdge,
+  SplitPrimaryBackgroundStyle,
+  SplitDisplayMode,
+  SplitHostOrientation,
+  SplitColumnMetrics,
+  SplitNavigableColumn,
+  SplitHostCommands,
+  SplitHostProps,
+} from './SplitHost.types';
+
+export type {
+  SplitScreenColumnType,
+  SplitScreenProps,
+} from './SplitScreen.types';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-const Split = {
+export const Split = {
   Host: SplitHost,
   Column: SplitScreen.Column,
   Inspector: SplitScreen.Inspector,
 };
-
-export default Split;

src/components/gamma/stack/index.ts

@@ -1,15 +1,21 @@
 import StackHost from './StackHost';
 import StackScreen from './StackScreen';
 
-export * from './StackHost.types';
-export * from './StackScreen.types';
+export type { StackHostProps } from './StackHost.types';
+
+export type {
+  OnDismissEventPayload,
+  EmptyEventPayload, // TODO: Remove this from public types (we need one shared type for this)
+  OnDismissEvent,
+  StackScreenActivityMode,
+  StackScreenEventHandler,
+  StackScreenProps,
+} from './StackScreen.types';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-const Stack = {
+export const Stack = {
   Host: StackHost,
   Screen: StackScreen,
 };
-
-export default Stack;

src/components/safe-area/SafeAreaView.tsx

@@ -9,7 +9,7 @@ import SafeAreaViewNativeComponent, {
 } from '../../fabric/safe-area/SafeAreaViewNativeComponent';
 import { StyleSheet } from 'react-native';
 
-function SafeAreaView(props: SafeAreaViewProps) {
+export function SafeAreaView(props: SafeAreaViewProps) {
   return (
     <SafeAreaViewNativeComponent
       {...props}
@@ -19,8 +19,6 @@ function SafeAreaView(props: SafeAreaViewProps) {
   );
 }
 
-export default SafeAreaView;
-
 function getNativeEdgesProp(
   edges: SafeAreaViewProps['edges'],
 ): SafeAreaViewNativeComponentProps['edges'] {

src/components/safe-area/index.ts

@@ -0,0 +1,3 @@
+export { SafeAreaView } from './SafeAreaView';
+
+export type { Edge, InsetType, SafeAreaViewProps } from './SafeAreaView.types';

src/components/tabs/index.ts

@@ -1,17 +1,48 @@
 import { TabsHost } from './host';
 import { TabsScreen } from './screen';
 
-export type * from './host';
-export type * from './screen';
+export type {
+  TabsHostNavState,
+  TabChangeEvent,
+  TabsHostColorScheme,
+  TabsHostDirection,
+  TabsHostNativeContainerStyleProps,
+  TabsHostPropsBase,
+  TabsHostProps,
+  // Android
+  TabsHostPropsAndroid,
+  // iOS
+  TabsBottomAccessoryComponentFactory,
+  TabBarMinimizeBehavior,
+  TabBarControllerMode,
+  TabsHostPropsIOS,
+} from './host';
+
+export type {
+  TabsScreenEventHandler,
+  TabsScreenOrientation,
+  TabsScreenPropsBase,
+  TabsScreenProps,
+  // Android
+  TabBarItemLabelVisibilityMode,
+  TabsScreenItemStateAppearanceAndroid,
+  TabsScreenAppearanceAndroid,
+  TabsScreenPropsAndroid,
+  // iOS
+  TabsScreenBlurEffect,
+  TabsScreenSystemItem,
+  TabsScreenAppearanceIOS,
+  TabsScreenItemAppearanceIOS,
+  TabsScreenItemStateAppearanceIOS,
+  TabsScreenPropsIOS,
+} from './screen';
 
 export type { TabsBottomAccessoryEnvironment } from './bottom-accessory';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-const Tabs = {
+export const Tabs = {
   Host: TabsHost,
   Screen: TabsScreen,
 };
-
-export default Tabs;

src/experimental/index.ts

@@ -3,14 +3,9 @@
  * BE SUBJECT TO BREAKING CHANGES WITHOUT NOTICE OR LIBRARY MAJOR VERSION CHANGE.
  */
 
-// Types
-export type * from './types';
+// Components & types
 
-// Components
-
-export { default as Stack } from '../components/gamma/stack';
-
-export { default as Split } from '../components/gamma/split';
-export { default as SafeAreaView } from '../components/safe-area/SafeAreaView';
-
-export { default as ScrollViewMarker } from '../components/gamma/scroll-view-marker/ScrollViewMarker';
+export * from '../components/gamma/stack';
+export * from '../components/gamma/split';
+export * from '../components/safe-area';
+export * from '../components/gamma/scroll-view-marker';