Repository: expo/expo
File: packages/expo-router/src/split-view/split-view.tsx (TypeScript)

Code before:
import Constants from 'expo-constants';
import React, { createContext, isValidElement, use, type ReactNode } from 'react';
import {
  SplitViewHost,
  SplitViewScreen,
  type SplitViewHostProps,
} from 'react-native-screens/experimental';

import { SplitViewColumn, SplitViewInspector } from './elements';
import { IsWithinLayoutContext } from '../layouts/IsWithinLayoutContext';
import { Slot } from '../views/Navigator';

const IsWithinSplitViewContext = createContext(false);

/**
 * For full list of supported props, see [SplitViewHostProps](https://github.com/software-mansion/react-native-screens/blob/main/src/components/gamma/split-view/SplitViewHost.types.ts#L124)
 */
export interface SplitViewProps extends Omit<SplitViewHostProps, 'children'> {
  children?: ReactNode;
}

function SplitViewNavigator({ children, ...splitViewHostProps }: SplitViewProps) {
  if (use(IsWithinSplitViewContext)) {
    throw new Error('There can only be one SplitView in the navigation hierarchy.');
  }

  // TODO: Add better way of detecting if SplitView is rendered inside Native navigator.
  if (use(IsWithinLayoutContext)) {
    throw new Error('SplitView cannot be used inside another navigator, except for Slot.');
  }

  if (!Constants.expoConfig?.extra?.router?.unstable_splitView) {
    throw new Error(
      'SplitView is not enabled. Make sure to enable it in your expo-router configuration with "unstable_splitView": true. After enabling, make sure to prebuild your app.'
    );
  }

  if (process.env.EXPO_OS !== 'ios') {
    console.warn(
      'SplitView is only supported on iOS. The SplitView will behave like a Slot navigator on other platforms.'
    );

Review comment (suggestion):
```suggestion
 * For full list of supported props, see [`SplitViewHostProps`](https://github.com/software-mansion/react-native-screens/blob/main/src/components/gamma/split-view/SplitViewHost.types.ts#L124)
```

Let's add an inline syntax highlight for the interface name here.

Code after:
import Constants from 'expo-constants';
import React, { createContext, isValidElement, use, type ReactNode } from 'react';
import {
  SplitViewHost,
  SplitViewScreen,
  type SplitViewHostProps,
} from 'react-native-screens/experimental';

import { SplitViewColumn, SplitViewInspector } from './elements';
import { IsWithinLayoutContext } from '../layouts/IsWithinLayoutContext';
import { Slot } from '../views/Navigator';

const IsWithinSplitViewContext = createContext(false);

/**
 * For full list of supported props, see [`SplitViewHostProps`](https://github.com/software-mansion/react-native-screens/blob/main/src/components/gamma/split-view/SplitViewHost.types.ts#L124)
 */
export interface SplitViewProps extends Omit<SplitViewHostProps, 'children'> {
  children?: ReactNode;
}

function SplitViewNavigator({ children, ...splitViewHostProps }: SplitViewProps) {
  if (use(IsWithinSplitViewContext)) {
    throw new Error('There can only be one SplitView in the navigation hierarchy.');
  }

  // TODO: Add better way of detecting if SplitView is rendered inside Native navigator.
  if (use(IsWithinLayoutContext)) {
    throw new Error('SplitView cannot be used inside another navigator, except for Slot.');
  }

  if (!Constants.expoConfig?.extra?.router?.unstable_splitView) {
    throw new Error(
      'SplitView is not enabled. Make sure to enable it in your expo-router configuration with "unstable_splitView": true. After enabling, make sure to prebuild your app.'
    );
  }

  if (process.env.EXPO_OS !== 'ios') {
    console.warn(
      'SplitView is only supported on iOS. The SplitView will behave like a Slot navigator on other platforms.'
    );