diff --git a/example/StackNavigator.tsx b/example/StackNavigator.tsx index 744b9ee4..bc5dac85 100644 --- a/example/StackNavigator.tsx +++ b/example/StackNavigator.tsx @@ -256,7 +256,8 @@ function StackRouter(options: DefaultRouterOptions) { export function StackNavigator(props: Props) { const { state, descriptors } = useNavigationBuilder< NavigationState, - StackNavigationOptions + StackNavigationOptions, + DefaultRouterOptions >(StackRouter, props); return ( diff --git a/example/TabNavigator.tsx b/example/TabNavigator.tsx index 5f87b9d5..47d42849 100644 --- a/example/TabNavigator.tsx +++ b/example/TabNavigator.tsx @@ -180,7 +180,8 @@ function TabRouter(options: DefaultRouterOptions) { export function TabNavigator(props: Props) { const { state, descriptors } = useNavigationBuilder< NavigationState, - TabNavigationOptions + TabNavigationOptions, + DefaultRouterOptions >(TabRouter, props); return ( diff --git a/src/__tests__/__fixtures__/MockRouter.tsx b/src/__tests__/__fixtures__/MockRouter.tsx index f4377121..b129b81b 100644 --- a/src/__tests__/__fixtures__/MockRouter.tsx +++ b/src/__tests__/__fixtures__/MockRouter.tsx @@ -1,5 +1,10 @@ -import {Router, CommonAction, NavigationState, DefaultRouterOptions} from '../../types'; -import { BaseRouter } from '../../index'; +import BaseRouter from '../../BaseRouter'; +import { + Router, + CommonAction, + NavigationState, + DefaultRouterOptions, +} from '../../types'; export type MockActions = CommonAction & { type: 'NOOP' | 'REVERSE' | 'UPDATE'; diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx index 29ccaa75..2464793f 100644 --- a/src/__tests__/index.test.tsx +++ b/src/__tests__/index.test.tsx @@ -3,7 +3,7 @@ import { render, act } from 'react-native-testing-library'; import Screen from '../Screen'; import NavigationContainer from '../NavigationContainer'; import useNavigationBuilder from '../useNavigationBuilder'; -import MockRouter, {MockRouterKey} from './__fixtures__/MockRouter'; +import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter'; beforeEach(() => (MockRouterKey.current = 0)); diff --git a/src/__tests__/useDescriptors.test.tsx b/src/__tests__/useDescriptors.test.tsx index 6232e051..c8a74100 100644 --- a/src/__tests__/useDescriptors.test.tsx +++ b/src/__tests__/useDescriptors.test.tsx @@ -14,7 +14,8 @@ it('sets options with options prop as an object', () => { const TestNavigator = (props: any) => { const { state, descriptors } = useNavigationBuilder< NavigationState, - { title?: string } + { title?: string }, + any >(MockRouter, props); const { render, options } = descriptors[state.routes[state.index].key]; @@ -57,7 +58,8 @@ it('sets options with options prop as a fuction', () => { const TestNavigator = (props: any) => { const { state, descriptors } = useNavigationBuilder< NavigationState, - { title?: string } + { title?: string }, + any >(MockRouter, props); const { render, options } = descriptors[state.routes[state.index].key]; @@ -104,7 +106,8 @@ it('sets initial options with setOptions', () => { { title?: string; color?: string; - } + }, + any >(MockRouter, props); const { render, options } = descriptors[state.routes[state.index].key]; @@ -151,10 +154,11 @@ it('sets initial options with setOptions', () => { it('updates options with setOptions', () => { const TestNavigator = (props: any) => { - const { state, descriptors } = useNavigationBuilder( - MockRouter, - props - ); + const { state, descriptors } = useNavigationBuilder< + NavigationState, + any, + any + >(MockRouter, props); const { render, options } = descriptors[state.routes[state.index].key]; return ( diff --git a/src/types.tsx b/src/types.tsx index 8693b8cf..e657ae3d 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -1,5 +1,4 @@ import * as BaseActions from './BaseActions'; -import * as React from 'react'; export type CommonAction = BaseActions.Action; @@ -73,10 +72,9 @@ export type ActionCreators = { export type DefaultRouterOptions = { initialRouteName?: string; - children: React.ReactNode; }; -export type RouterHelper< +export type RouterFactory< State extends NavigationState, Action extends NavigationAction, RouterOptions extends DefaultRouterOptions @@ -90,7 +88,7 @@ export type Router< * Initialize the navigation state. * * @param options.routeNames List of valid route names as defined in the screen components. - * @param options.initialRouteName Route to focus in the state. + * @param options.routeParamsList Object containing params for each route. */ getInitialState(options: { routeNames: string[]; @@ -113,7 +111,7 @@ export type Router< * * @param state State object to update. * @param options.routeNames New list of route names. - * @param options.initialRouteName Route to focus in the state. + * @param options.routeParamsList Object containing params for each route. */ getStateForRouteNamesChange( state: State, diff --git a/src/useNavigationBuilder.tsx b/src/useNavigationBuilder.tsx index 30e92207..18bf3938 100644 --- a/src/useNavigationBuilder.tsx +++ b/src/useNavigationBuilder.tsx @@ -11,11 +11,15 @@ import { ParamListBase, RouteConfig, Router, - RouterHelper, + RouterFactory, } from './types'; import useOnRouteFocus from './useOnRouteFocus'; import useChildActionListeners from './useChildActionListeners'; +type Options = { + children: React.ReactNode; +}; + const isArrayEqual = (a: any[], b: any[]) => a.length === b.length && a.every((it, index) => it === b[index]); @@ -54,19 +58,19 @@ const getRouteConfigsFromChildren = ( export default function useNavigationBuilder< State extends NavigationState, ScreenOptions extends object, - RouterOptions extends DefaultRouterOptions = DefaultRouterOptions + RouterOptions extends DefaultRouterOptions >( - routerCreator: RouterHelper, - options: RouterOptions + createRouter: RouterFactory, + options: Options & RouterOptions ) { + useRegisterNavigator(); + + const { children, ...rest } = options; const { current: router } = React.useRef>( - routerCreator(options) + createRouter((rest as unknown) as RouterOptions) ); - useRegisterNavigator(); - const screens = getRouteConfigsFromChildren( - options.children - ).reduce( + const screens = getRouteConfigsFromChildren(children).reduce( (acc, curr) => { acc[curr.name] = curr; return acc; @@ -74,7 +78,7 @@ export default function useNavigationBuilder< {} as { [key: string]: RouteConfig } ); - const routeNames = Object.keys(screens) + const routeNames = Object.keys(screens); const routeParamList = routeNames.reduce( (acc, curr) => { acc[curr] = screens[curr].initialParams;