leecade / leecade/react-native-swiper

Problem with Flow Types: Swiper element is not a React component

Open
#950 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

Which OS ?

N/A

Version

Which versions are you using:

  • react-native-swiper v1.5.14
  • react-native v0.55.4
Expected behaviour

Flow understands that Swiper is a React component

Actual behaviour

Two Flow type errors are raised.

Flow Error Output
πŸ‘‰  yarn flow
yarn run v1.13.0
$ node_modules/.bin/flow
Error β”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆ node_modules/react-native-swiper/index.js.flow:108:47

Cannot reference type Component [1] from a value position.

 [1]   4β”‚ import type { Component, Node } from 'react';
        :
     105β”‚   |}>;
     106β”‚
     107β”‚   // eslint-disable-next-line no-undef
     108β”‚   declare export default class Swiper extends Component<SwiperProps> {
     109β”‚     scrollBy(index: number, animated?: boolean): void;
     110β”‚   }
     111β”‚ }


Error β”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆβ”ˆ src/foo.component.js:48:8

Cannot create Swiper element because exports [1] is not a React component.

     src/foo.component.js
     45β”‚ }: FooProps) {
     46β”‚   return (
     47β”‚     <View>
     48β”‚       <Swiper
     49β”‚         bounces={false}
     50β”‚         showsButtons={false}
     51β”‚         index={currentIndex}
     52β”‚         loop={false}
     53β”‚         horizontal
     54β”‚         showsPagination
     55β”‚         onIndexChanged={index => { setCurrentIndex(index); }}
     56β”‚         activeDotStyle={styles.slideActiveDot}
     57β”‚       >
     58β”‚         {slides.map(slide => renderSlide(currentIndex, slide, styles))}
     59β”‚       </Swiper>

     node_modules/react-native-swiper/index.js.flow



Found 2 errors
Steps to reproduce
  1. Use a Swiper from react-native-swiper v1.5.14
  2. Use Flow for type checking
  3. Run into Flow errors where Swiper is not a React component
Notes

This does not happen using version 1.5.13

I'm not sure what has changed between the two versions, but it seems like this is unexpected behaviour?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up β€” it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with node_modules/react-native-swiper/index.js.flow and compare the declaration between react-native-swiper v1.5.13 and v1.5.14. Run yarn flow using the reproduction in src/foo.component.js; done means the declaration is accepted and Swiper is recognized as a React component without the two reported errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.