question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Seems to be returning Typescript type for generic component, not imported component

See original GitHub issue

Describe the bug I just upgraded from v1 to v2.2.1, and I’m now getting Typescript errors. I guess the types might have broken, or this bug was concealed before (with any perhaps).

when I use register to load a component, it seems to just set the component type to React.ComponentClass<{}, any>, rather than the type of the component: Screenshot 2022-10-27 at 15 10 36

This means I then get Typescript errors when I try and use the component, e.g.

Type '{ bottomBorder: true; leftIconOverride: Element; actionIcons: Element[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, any, any>> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Property 'bottomBorder' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, any, any>> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

253                         bottomBorder

Code snippet

const NavigationHeader = register({
    loader: () => require('Components/Header/Navigation/NavigationHeader'),
    group: HOME_SECONDARY_SCREENS,
})

//...

    <RootCardStack.Screen
        name="MyScreen"
        key="MyScreen"
        component={MyScreen}
        options={{
            header: (props: StackHeaderProps) => {
                return (
                    <NavigationHeader
                        bottomBorder
                        leftIconOverride={<BackButton />}
                    />
                )
            },
        }}
    />,

Expected behavior I would expect the types of the actual component to be returned

Screenshots If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

  • React Native 0.66
  • Typescript 4.8.4

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
matt-daltoncommented, Oct 27, 2022

I went to check if I’d done something wrong here, so could maybe just add a Typescript section at the bottom?

But yeah…all makes sense! Thanks.

0reactions
kirillzyuskocommented, Oct 27, 2022

@matt-dalton I will try to add it. I want to migrate documentation to Docusaurus v2 and use github workflow for docs publishing, because right now I do everything manually. So yeah, good point! I will try to add it and re-work documentation in the future! 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

React/TypeScript - Extending component with generic type ...
If the function arguments and return are typed then it's not necessary. React.FunctionComponent doesn't work with generic components, so just ...
Read more >
[TypeScript] styled wrapper doesn't preserve generic props
Using the styled(Component) method while wrapping a component with generic props doesn't preserve the generic argument, it simply defaults it to ...
Read more >
Functional React components with generic props in TypeScript
In this article, we explore writing functional React components with TypeScript using generic props. By doing so, we can create reusable and ...
Read more >
Typescript generics for React developers
Looking into why we need generics in Typescript, and how to use them to develop re-usable React components. And as a bonus: the...
Read more >
Documentation - TypeScript 3.8
import type only imports declarations to be used for type annotations and declarations. It always gets fully erased, so there's no remnant of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found