Skip to content

Fix gestureHandlerRootHOC types#1347

Merged
jgonet merged 4 commits intosoftware-mansion:masterfrom
alpha0010:patch-1
Feb 12, 2021
Merged

Fix gestureHandlerRootHOC types#1347
jgonet merged 4 commits intosoftware-mansion:masterfrom
alpha0010:patch-1

Conversation

@alpha0010
Copy link
Copy Markdown
Contributor

Description

With the most recent update, gestureHandlerRootHOC() gives errors like:

Argument of type 'typeof HomeScreen' is not assignable to parameter of type 'ComponentType<Record<string, unknown>>'.
  Type 'typeof HomeScreen' is not assignable to type 'FunctionComponent<Record<string, unknown>>'.
    Types of parameters 'props' and 'props' are incompatible.

Test plan

yarn ts-check

The only change is typings which now allow my project to run clean.

Copy link
Copy Markdown
Member

@jgonet jgonet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, could you restrict P a little bit by writing P extends object?

@jgonet
Copy link
Copy Markdown
Member

jgonet commented Feb 10, 2021

Also, could you provide some small piece of code that can be used to test this change?

@alpha0010
Copy link
Copy Markdown
Contributor Author

Sample code:

import React from 'react';
import {Text, View} from 'react-native';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {Navigation} from 'react-native-navigation';

function MyScreen(props: {componentId: string}) {
  return (
    <View>
      <Text>{props.componentId}</Text>
    </View>
  );
}
Navigation.registerComponent('my-screen', () =>
  gestureHandlerRootHOC(MyScreen),
);

@jgonet
Copy link
Copy Markdown
Member

jgonet commented Feb 11, 2021

Looks good, could you restrict P a little bit by writing P extends object?

Looks like the TS compiler doesn't like this, I changed object to Record<string, unknown>. It works on the example you provided, could you test it in your code?

@jgonet jgonet merged commit 9e84b7b into software-mansion:master Feb 12, 2021
@alpha0010
Copy link
Copy Markdown
Contributor Author

It sort of works. If I factor out the props definition as a type, it works fine.

type MyProps = {
  componentId: string;
};

function MyScreen(props: MyProps) {
  return (
    <View>
      <Text>{props.componentId}</Text>
    </View>
  );
}

But fails if I use an interface. (Important if, for example, using NavigationFunctionComponent from RNN.)

interface MyProps {
  componentId: string;
}

function MyScreen(props: MyProps) {
  return (
    <View>
      <Text>{props.componentId}</Text>
    </View>
  );
}
Argument of type '(props: MyProps) => Element' is not assignable to parameter of type 'ComponentType<Record<string, unknown>>'.
  Type '(props: MyProps) => Element' is not assignable to type 'FunctionComponent<Record<string, unknown>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Property 'componentId' is missing in type 'PropsWithChildren<Record<string, unknown>>' but required in type 'MyProps'.

@jgonet
Copy link
Copy Markdown
Member

jgonet commented Feb 12, 2021

All right, I will change it to P in the followup. Thanks for checking this.

braincore pushed a commit to braincore/react-native-gesture-handler that referenced this pull request Mar 4, 2021
Co-authored-by: Jakub <jakub.gonet@swmansion.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants