tarasvakulka / react-native-cards-swipe

Card Stack Swiper implemented with Reanimated 2 and React Native Gesture Handler
MIT License
57 stars 15 forks source link

Cant't get it working - Macos #21

Closed k3rne1pan1c closed 10 months ago

k3rne1pan1c commented 10 months ago

By following the steps written down in the CONTRIBUTING.md I run into the problem, that it can't build the type files. Following message came up after executing yarn bootstrap

ℹ Generating type definitions with tsc
src/components/CardsSwipe/index.tsx:195:17 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ children: ReactNode; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ children: ReactNode; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.

195         return <View>{renderNoMoreCard()}</View>;
                    ~~~~

src/components/CardsSwipe/index.tsx:265:8 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ children: (Element | null)[]; pointerEvents: "auto" | "none"; style: (false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<...>> | { ...; } | null)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ children: (Element | null)[]; pointerEvents: "auto" | "none"; style: (false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<...>> | { ...; } | null)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.

265       <View
           ~~~~

src/components/CardsSwipe/index.tsx:300:16 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

300               <Animated.View style={styles.overlay} pointerEvents={'none'}>
                   ~~~~~~~~~~~~~

src/components/CardsSwipe/index.tsx:301:18 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ children: Element[]; style: { width: string; flexDirection: "row"; justifyContent: "space-between"; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ children: Element[]; style: { width: string; flexDirection: "row"; justifyContent: "space-between"; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.

301                 <View style={styles.row}>
                     ~~~~

src/components/CardsSwipe/index.tsx:302:20 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

302                   <Animated.View style={likeOpacityStyle}>
                       ~~~~~~~~~~~~~

src/components/CardsSwipe/index.tsx:305:20 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.

305                   <Animated.View style={nopeOpacityStyle}>
                       ~~~~~~~~~~~~~

src/components/CardWrap/index.tsx:20:8 - error TS2786: 'Animated.View' cannot be used as a JSX component.
  Its instance type 'View' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/philippklemmer/Desktop/projects/react-native-cards-swipe/node_modules/@types/react-native/node_modules/@types/react/ts5.0/index").ReactNode'.

20       <Animated.View
          ~~~~~~~~~~~~~

src/components/SwipePan/index.tsx:88:6 - error TS2786: 'PanGestureHandler' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<PanGestureHandlerProps & RefAttributes<any>, any, any> | null' is not a valid JSX element.
    Type 'Component<PanGestureHandlerProps & RefAttributes<any>, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<PanGestureHandlerProps & RefAttributes<any>, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/philippklemmer/Desktop/projects/react-native-cards-swipe/node_modules/@types/react-native/node_modules/@types/react/ts5.0/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

88     <PanGestureHandler onGestureEvent={gestureHandler}>
        ~~~~~~~~~~~~~~~~~

Found 8 errors in 3 files.

Errors  Files
     6  src/components/CardsSwipe/index.tsx:195
     1  src/components/CardWrap/index.tsx:20
     1  src/components/SwipePan/index.tsx:88
✖ Failed to build definition files.
bob build

build files for publishing

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Error: Failed to build definition files.

I think it has to do with the Typescript version, but also after doing yarn upgrade in runs into the same issues.

Is there anyone with an idea?