@react-navigation/native 7.0.0-alpha.0 → 7.0.0-alpha.2

package/src/NavigationContainer.tsx

@@ -10,14 +10,14 @@ import {
 } from '@react-navigation/core';
 import * as React from 'react';
 
-import LinkingContext from './LinkingContext';
-import DefaultTheme from './theming/DefaultTheme';
-import ThemeProvider from './theming/ThemeProvider';
+import { LinkingContext } from './LinkingContext';
+import { DefaultTheme } from './theming/DefaultTheme';
+import { ThemeProvider } from './theming/ThemeProvider';
 import type { DocumentTitleOptions, LinkingOptions, Theme } from './types';
-import useBackButton from './useBackButton';
-import useDocumentTitle from './useDocumentTitle';
-import useLinking from './useLinking';
-import useThenable from './useThenable';
+import { useBackButton } from './useBackButton';
+import { useDocumentTitle } from './useDocumentTitle';
+import { useLinking } from './useLinking';
+import { useThenable } from './useThenable';
 
 declare global {
   var REACT_NAVIGATION_DEVTOOLS: WeakMap<
@@ -128,12 +128,10 @@ function NavigationContainerInner(
   );
 }
 
-const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
-  RootParamList extends {} = ReactNavigation.RootParamList
->(
+export const NavigationContainer = React.forwardRef(
+  NavigationContainerInner
+) as <RootParamList extends {} = ReactNavigation.RootParamList>(
   props: Props<RootParamList> & {
     ref?: React.Ref<NavigationContainerRef<RootParamList>>;
   }
 ) => React.ReactElement;
-
-export default NavigationContainer;

package/src/ServerContainer.tsx

@@ -1,7 +1,7 @@
 import { CurrentRenderContext } from '@react-navigation/core';
 import * as React from 'react';
 
-import ServerContext, { ServerContextType } from './ServerContext';
+import { ServerContext, ServerContextType } from './ServerContext';
 import type { ServerContainerRef } from './types';
 
 type Props = ServerContextType & {
@@ -15,7 +15,7 @@ type Props = ServerContextType & {
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which contains helper methods.
  */
-export default React.forwardRef(function ServerContainer(
+export const ServerContainer = React.forwardRef(function ServerContainer(
   { children, location }: Props,
   ref: React.Ref<ServerContainerRef>
 ) {

package/src/ServerContext.tsx

@@ -7,8 +7,6 @@ export type ServerContextType = {
   };
 };
 
-const ServerContext = React.createContext<ServerContextType | undefined>(
+export const ServerContext = React.createContext<ServerContextType | undefined>(
   undefined
 );
-
-export default ServerContext;

package/src/__mocks__/createStackNavigator.tsx

@@ -5,7 +5,7 @@ import {
 } from '@react-navigation/core';
 import * as React from 'react';
 
-const createStackNavigator = createNavigatorFactory((props) => {
+export const createStackNavigator = createNavigatorFactory((props) => {
   const { state, descriptors, NavigationContent } = useNavigationBuilder(
     StackRouter,
     props
@@ -17,5 +17,3 @@ const createStackNavigator = createNavigatorFactory((props) => {
     </NavigationContent>
   );
 });
-
-export default createStackNavigator;

package/src/__mocks__/window.tsx

@@ -63,7 +63,7 @@ const removeEventListener = (type: 'popstate', listener: () => void) => {
   }
 };
 
-const window = {
+export const window = {
   document: { title: '' },
   location,
   history,
@@ -73,5 +73,3 @@ const window = {
     return window;
   },
 };
-
-export default window;

package/src/createMemoryHistory.tsx

@@ -10,7 +10,7 @@ type HistoryRecord = {
   path: string;
 };
 
-export default function createMemoryHistory() {
+export function createMemoryHistory() {
   let index = 0;
   let items: HistoryRecord[] = [];
 

package/src/createStaticNavigation.tsx

@@ -6,7 +6,7 @@ import {
 } from '@react-navigation/core';
 import * as React from 'react';
 
-import NavigationContainer from './NavigationContainer';
+import { NavigationContainer } from './NavigationContainer';
 import type { LinkingOptions } from './types';
 
 type Props = Omit<
@@ -26,9 +26,7 @@ type Props = Omit<
  * @param tree Static navigation config.
  * @returns Navigation component to use in your app.
  */
-export default function createStaticNavigation(
-  tree: StaticNavigation<any, any, any>
-) {
+export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
   const Component = createComponentForStaticNavigation(tree, 'RootNavigator');
   const linkingConfig = {
     screens: tree.config.screens

package/src/extractPathFromURL.tsx

@@ -1,6 +1,6 @@
 import escapeStringRegexp from 'escape-string-regexp';
 
-export default function extractPathFromURL(prefixes: string[], url: string) {
+export function extractPathFromURL(prefixes: string[], url: string) {
   for (const prefix of prefixes) {
     const protocol = prefix.match(/^[^:]+:/)?.[0] ?? '';
     const host = prefix

package/src/index.tsx

@@ -1,14 +1,14 @@
-export { default as createStaticNavigation } from './createStaticNavigation';
-export { default as Link } from './Link';
-export { default as LinkingContext } from './LinkingContext';
-export { default as NavigationContainer } from './NavigationContainer';
-export { default as ServerContainer } from './ServerContainer';
-export { default as DarkTheme } from './theming/DarkTheme';
-export { default as DefaultTheme } from './theming/DefaultTheme';
-export { default as ThemeProvider } from './theming/ThemeProvider';
-export { default as useTheme } from './theming/useTheme';
+export { createStaticNavigation } from './createStaticNavigation';
+export { Link } from './Link';
+export { LinkingContext } from './LinkingContext';
+export { NavigationContainer } from './NavigationContainer';
+export { ServerContainer } from './ServerContainer';
+export { DarkTheme } from './theming/DarkTheme';
+export { DefaultTheme } from './theming/DefaultTheme';
+export { ThemeProvider } from './theming/ThemeProvider';
+export { useTheme } from './theming/useTheme';
 export * from './types';
-export { default as useLinkProps } from './useLinkProps';
-export { default as useLinkTools } from './useLinkTools';
-export { default as useScrollToTop } from './useScrollToTop';
+export { useLinkProps } from './useLinkProps';
+export { useLinkTools } from './useLinkTools';
+export { useScrollToTop } from './useScrollToTop';
 export * from '@react-navigation/core';

package/src/theming/DarkTheme.tsx

@@ -1,6 +1,7 @@
 import type { Theme } from '../types';
+import { fonts } from './fonts';
 
-const DarkTheme: Theme = {
+export const DarkTheme: Theme = {
   dark: true,
   colors: {
     primary: 'rgb(10, 132, 255)',
@@ -10,6 +11,5 @@ const DarkTheme: Theme = {
     border: 'rgb(39, 39, 41)',
     notification: 'rgb(255, 69, 58)',
   },
+  fonts,
 };
-
-export default DarkTheme;

package/src/theming/DefaultTheme.tsx

@@ -1,6 +1,7 @@
 import type { Theme } from '../types';
+import { fonts } from './fonts';
 
-const DefaultTheme: Theme = {
+export const DefaultTheme: Theme = {
   dark: false,
   colors: {
     primary: 'rgb(0, 122, 255)',
@@ -10,6 +11,5 @@ const DefaultTheme: Theme = {
     border: 'rgb(216, 216, 216)',
     notification: 'rgb(255, 59, 48)',
   },
+  fonts,
 };
-
-export default DefaultTheme;

package/src/theming/ThemeContext.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
 
 import type { Theme } from '../types';
-import DefaultTheme from './DefaultTheme';
+import { DefaultTheme } from './DefaultTheme';
 
-const ThemeContext = React.createContext<Theme>(DefaultTheme);
+export const ThemeContext = React.createContext<Theme>(DefaultTheme);
 
 ThemeContext.displayName = 'ThemeContext';
-
-export default ThemeContext;

package/src/theming/ThemeProvider.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 
 import type { Theme } from '../types';
-import ThemeContext from './ThemeContext';
+import { ThemeContext } from './ThemeContext';
 
 type Props = {
   value: Theme;
   children: React.ReactNode;
 };
 
-export default function ThemeProvider({ value, children }: Props) {
+export function ThemeProvider({ value, children }: Props) {
   return (
     <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
   );

package/src/theming/fonts.tsx

@@ -0,0 +1,63 @@
+import { Platform } from 'react-native';
+
+import type { Theme } from '../types';
+
+const WEB_FONT_STACK =
+  'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+
+export const fonts = Platform.select({
+  web: {
+    regular: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '500',
+    },
+    bold: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: WEB_FONT_STACK,
+      fontWeight: '700',
+    },
+  },
+  ios: {
+    regular: {
+      fontFamily: 'System',
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: 'System',
+      fontWeight: '500',
+    },
+    bold: {
+      fontFamily: 'System',
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: 'System',
+      fontWeight: '700',
+    },
+  },
+  default: {
+    regular: {
+      fontFamily: 'sans-serif',
+      fontWeight: 'normal',
+    },
+    medium: {
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    bold: {
+      fontFamily: 'sans-serif',
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: 'sans-serif',
+      fontWeight: '700',
+    },
+  },
+} as const satisfies Record<string, Theme['fonts']>);

package/src/theming/useTheme.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import ThemeContext from './ThemeContext';
+import { ThemeContext } from './ThemeContext';
 
-export default function useTheme() {
+export function useTheme() {
   const theme = React.useContext(ThemeContext);
 
   return theme;

package/src/types.tsx

@@ -6,6 +6,22 @@ import type {
   Route,
 } from '@react-navigation/core';
 
+type FontStyle = {
+  fontFamily: string;
+  fontWeight:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+};
+
 export type Theme = {
   dark: boolean;
   colors: {
@@ -16,6 +32,12 @@ export type Theme = {
     border: string;
     notification: string;
   };
+  fonts: {
+    regular: FontStyle;
+    medium: FontStyle;
+    bold: FontStyle;
+    heavy: FontStyle;
+  };
 };
 
 export type LinkingOptions<ParamList extends {}> = {
@@ -74,8 +96,21 @@ export type LinkingOptions<ParamList extends {}> = {
    * ```
    */
   config?: {
-    initialRouteName?: keyof ParamList;
+    /**
+     * Path string to match against for the whole navigation tree.
+     * It's not possible to specify params here since this doesn't belong to a screen.
+     * This is useful when the whole app is under a specific path.
+     * e.g. all of the screens are under `/admin` in `https://example.com/admin`
+     */
+    path?: string;
+    /**
+     * Path configuration for child screens.
+     */
     screens: PathConfigMap<ParamList>;
+    /**
+     * Name of the initial route to use for the root navigator.
+     */
+    initialRouteName?: keyof ParamList;
   };
   /**
    * Custom function to get the initial URL used for linking.

package/src/useBackButton.tsx

@@ -5,7 +5,7 @@ import type {
 import * as React from 'react';
 import { BackHandler } from 'react-native';
 
-export default function useBackButton(
+export function useBackButton(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>
 ) {
   React.useEffect(() => {

package/src/useDocumentTitle.native.tsx

@@ -1,3 +1,3 @@
-export default function useDocumentTitle() {
+export function useDocumentTitle() {
   // Noop for React Native
 }

package/src/useDocumentTitle.tsx

@@ -9,7 +9,7 @@ import type { DocumentTitleOptions } from './types';
 /**
  * Set the document title for the active screen
  */
-export default function useDocumentTitle(
+export function useDocumentTitle(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,

package/src/useLinkProps.tsx

@@ -10,7 +10,7 @@ import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
 import { GestureResponderEvent, Platform } from 'react-native';
 
-import LinkingContext from './LinkingContext';
+import { LinkingContext } from './LinkingContext';
 
 export type Props<
   ParamList extends ReactNavigation.RootParamList,
@@ -67,9 +67,12 @@ const getStateFromParams = (
  * @param props.href Optional absolute path to use for the href (e.g. `/feeds/hot`).
  * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
  */
-export default function useLinkProps<
-  ParamList extends ReactNavigation.RootParamList
->({ screen, params, href, action }: Props<ParamList>) {
+export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
+  screen,
+  params,
+  href,
+  action,
+}: Props<ParamList>) {
   const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationHelpersContext);
   const { options } = React.useContext(LinkingContext);

package/src/useLinkTools.tsx

@@ -10,7 +10,7 @@ import {
 } from '@react-navigation/core';
 import * as React from 'react';
 
-import LinkingContext from './LinkingContext';
+import { LinkingContext } from './LinkingContext';
 
 type NavigationObject =
   | NavigationHelpers<ParamListBase>
@@ -48,7 +48,7 @@ const getRootStateForNavigate = (
  * Build destination link for a navigate action.
  * Useful for showing anchor tags on the web for buttons that perform navigation.
  */
-export default function useLinkTools() {
+export function useLinkTools() {
   const navigation = React.useContext(NavigationHelpersContext);
   const linking = React.useContext(LinkingContext);
 

package/src/useLinking.native.tsx

@@ -8,7 +8,7 @@ import {
 import * as React from 'react';
 import { Linking, Platform } from 'react-native';
 
-import extractPathFromURL from './extractPathFromURL';
+import { extractPathFromURL } from './extractPathFromURL';
 import type { LinkingOptions } from './types';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
@@ -17,7 +17,7 @@ type Options = LinkingOptions<ParamListBase>;
 
 let linkingHandlers: Symbol[] = [];
 
-export default function useLinking(
+export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,

package/src/useLinking.tsx

@@ -11,8 +11,8 @@ import {
 import isEqual from 'fast-deep-equal';
 import * as React from 'react';
 
-import createMemoryHistory from './createMemoryHistory';
-import ServerContext from './ServerContext';
+import { createMemoryHistory } from './createMemoryHistory';
+import { ServerContext } from './ServerContext';
 import type { LinkingOptions } from './types';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
@@ -96,7 +96,7 @@ let linkingHandlers: Symbol[] = [];
 
 type Options = LinkingOptions<ParamListBase>;
 
-export default function useLinking(
+export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,

package/src/useScrollToTop.tsx

@@ -48,9 +48,7 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
   }
 }
 
-export default function useScrollToTop(
-  ref: React.RefObject<ScrollableWrapper>
-) {
+export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
   const navigation = useNavigation();
   const route = useRoute();
 

package/src/useThenable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export default function useThenable<T>(create: () => PromiseLike<T>) {
+export function useThenable<T>(create: () => PromiseLike<T>) {
   const [promise] = React.useState(create);
 
   let initialState: [boolean, T | undefined] = [false, undefined];