Native Routing Components

/**
 * A Router component that runs on React Native
 * Built on top of MemoryRouter for mobile-optimized routing
 * @param props - Router configuration props
 * @returns JSX.Element router component
 */
interface NativeRouterProps extends MemoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
  future?: Partial<FutureConfig>;
}

function NativeRouter(props: NativeRouterProps): JSX.Element;

import { NativeRouter, Routes, Route } from "react-router-native";
import { View, Text } from "react-native";

// Basic routing setup
function App() {
  return (
    <NativeRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </NativeRouter>
  );
}

// With initial entries for deep linking
function AppWithInitial() {
  return (
    <NativeRouter initialEntries={["/", "/profile"]} initialIndex={0}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </NativeRouter>
  );
}

// With basename for app prefixes
function AppWithBasename() {
  return (
    <NativeRouter basename="/app">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </NativeRouter>
  );
}

/**
 * A TouchableHighlight that navigates to a different URL when touched
 * Provides native touch feedback and accessibility
 * @param props - Link configuration and TouchableHighlight props
 * @returns JSX.Element touchable link component
 */
interface LinkProps extends TouchableHighlightProps {
  children?: React.ReactNode;
  onPress?: (event: GestureResponderEvent) => void;
  relative?: RelativeRoutingType;
  replace?: boolean;
  state?: any;
  to: To;
}

function Link(props: LinkProps): JSX.Element;

import { Link } from "react-router-native";
import { View, Text } from "react-native";

// Basic navigation link
function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
      <Link to="/about">
        <Text>Go to About</Text>
      </Link>
    </View>
  );
}

// Link with state and custom styling
function ProductList() {
  return (
    <View>
      {products.map((product) => (
        <Link
          key={product.id}
          to={`/product/${product.id}`}
          state={{ product }}
          style={{ padding: 16, backgroundColor: "#f0f0f0", margin: 8 }}
          underlayColor="#e0e0e0"
        >
          <Text>{product.name}</Text>
        </Link>
      ))}
    </View>
  );
}

// Link with custom onPress handler
function CustomLink() {
  return (
    <Link
      to="/settings"
      onPress={(event) => {
        console.log("Link pressed");
        // Additional custom handling
        // Navigation still occurs unless event.preventDefault() is called
      }}
    >
      <Text>Settings</Text>
    </Link>
  );
}

// Link with replace navigation
function LoginRedirect() {
  return (
    <Link to="/dashboard" replace>
      <Text>Continue to Dashboard</Text>
    </Link>
  );
}

// Link with relative routing
function NestedNavigation() {
  return (
    <View>
      <Link to="../parent" relative="path">
        <Text>Go to Parent</Text>
      </Link>
      <Link to="child" relative="route">
        <Text>Go to Child</Text>
      </Link>
    </View>
  );
}

// Preventing navigation with preventDefault
function ConditionalLink() {
  const isLoggedIn = useIsLoggedIn();
  
  return (
    <Link
      to="/protected"
      onPress={(event) => {
        if (!isLoggedIn) {
          event.preventDefault();
          // Show login prompt instead
          showLoginPrompt();
        }
      }}
    >
      <Text>Protected Content</Text>
    </Link>
  );
}

interface NativeRouterProps extends MemoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
  future?: Partial<FutureConfig>;
}

interface LinkProps extends TouchableHighlightProps {
  children?: React.ReactNode;
  onPress?: (event: GestureResponderEvent) => void;
  relative?: RelativeRoutingType;
  replace?: boolean;
  state?: any;
  to: To;
}

// Re-exported from React Router
type To = string | Partial<Path>;
type RelativeRoutingType = "route" | "path";
type InitialEntry = string | Partial<Location>;

interface Path {
  pathname: string;
  search: string;
  hash: string;
}

interface Location extends Path {
  state: any;
  key: string;
}