TypeScript errors related to new component API?

Hi. Fantastic library! Came across it thanks to a comment you made on the RNN repo.

I’m receiving the following ts errors with the Hello World example from the doc site:

(alias) class NavigationHandler
import NavigationHandler
Provides the navigation event data

No overload matches this call.
  Overload 1 of 2, '(props: { stateNavigator: StateNavigator<any, string>; } | Readonly<{ stateNavigator: StateNavigator<any, string>; }>): NavigationHandler', gave the following error.
    Type '{ children: Element; stateNavigator: StateNavigator<{ hello: any; } & { world: any; }, "hello" | "world">; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationHandler> & Readonly<{ stateNavigator: StateNavigator<any, string>; }>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationHandler> & Readonly<{ stateNavigator: StateNavigator<any, string>; }>'.
  Overload 2 of 2, '(props: { stateNavigator: StateNavigator<any, string>; }, context: any): NavigationHandler', gave the following error.
    Type '{ children: Element; stateNavigator: StateNavigator<{ hello: any; } & { world: any; }, "hello" | "world">; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationHandler> & Readonly<{ stateNavigator: StateNavigator<any, string>; }>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationHandler> & Readonly<{ stateNavigator: StateNavigator<any, string>; }>'.ts(2769)

(alias) class NavigationStack
import NavigationStack
Renders a stack of Scenes

No overload matches this call.
  Overload 1 of 2, '(props: NavigationStackProps | Readonly<NavigationStackProps>): NavigationStack', gave the following error.
    Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationStack> & Readonly<NavigationStackProps>'.
  Overload 2 of 2, '(props: NavigationStackProps, context: any): NavigationStack', gave the following error.
    Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationStack> & Readonly<NavigationStackProps>'.ts(2769)

(alias) class Scene<NavigationInfo extends { [index: string]: any; } = any>
import Scene
Configures the Scene for a State

No overload matches this call.
  Overload 1 of 2, '(props: SceneProps<{ hello: any; }> | Readonly<SceneProps<{ hello: any; }>>): Scene<{ hello: any; }>', gave the following error.
    Type '{ children: Element; stateKey: "hello"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Scene<{ hello: any; }>> & Readonly<SceneProps<{ hello: any; }>>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Scene<{ hello: any; }>> & Readonly<SceneProps<{ hello: any; }>>'.
  Overload 2 of 2, '(props: SceneProps<{ hello: any; }>, context: any): Scene<{ hello: any; }>', gave the following error.
    Type '{ children: Element; stateKey: "hello"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Scene<{ hello: any; }>> & Readonly<SceneProps<{ hello: any; }>>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Scene<{ hello: any; }>> & Readonly<SceneProps<{ hello: any; }>>'.ts(2769)

---

Here’s the code for completeness:

import React from 'react'
import { Text, SafeAreaView } from 'react-native'
import { StateNavigator } from 'navigation'
import { NavigationHandler } from 'navigation-react'
import { NavigationStack, Scene } from 'navigation-react-native'

const stateNavigator = new StateNavigator([
  { key: 'hello' },
  { key: 'world', trackCrumbTrail: true },
])

const Hello = () => {
  return (
    <SafeAreaView>
      <Text>Hello</Text>
    </SafeAreaView>
  )
}

const World = () => {
  return (
    <SafeAreaView>
      <Text>World</Text>
    </SafeAreaView>
  )
}

export const App = () => (
  <NavigationHandler stateNavigator={stateNavigator}>
    <NavigationStack>
      <Scene stateKey="hello">
        <Hello />
      </Scene>
      <Scene stateKey="world">
        <World />
      </Scene>
    </NavigationStack>
  </NavigationHandler>
)

[grahammendick]

Hey there, I’m glad you like the Navigation router! Thanks for letting me know how you came across it.

I think that’s happening because the React 18 types dropped the implicit children prop. Now, components that accept children have to explicitly say so in their props type. Looks like there is a codemod that fixes it in the short term.

Would you be interested in making a PR that fixes it properly?

[grahammendick]

Just fixed this in ‘navigation-react v4.5.1’ and ‘navigation-react-native v8.9.1’. Thanks for raising it