leecade / leecade/react-native-swiper
Problem with Flow Types: Swiper element is not a React component
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
- Use a
Swiperfromreact-native-swiperv1.5.14 - Use Flow for type checking
- Run into Flow errors where
Swiperis 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up β it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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