leecade / leecade/react-native-swiper
Swiper doesn't work on desktop platform
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 ?
Mac OS 10.14
Version
Which versions are you using:
- react-native-swiper v1.5.13
- react-native-desktop based on
react-nativev0.56.0
Expected behaviour
Swiper works well with react-native-desktop. Swipes can be performed.
1.5.13
Actual behaviour
Swiper doesn't work. It locates images vertically instead of horizontally.
The reason is here:
https://github.com/leecade/react-native-swiper/blob/master/src/index.js#L634
In the if statement we check for ios platform and go to android implementation in all other cases.
When react-native-desktop used, Platform.os returns desktop value and execution continues with android-specific component (and it doesn't exist in react-native desktop).
To fix the issue we can change the code to check for android and use ScrollView-based implementation for non-android platforms:
renderScrollView = pages => {
if (Platform.OS === 'android') {
return (
<ViewPagerAndroid ref={this.refScrollView}
{...this.props}
initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
onPageScrollStateChanged={this.onPageScrollStateChanged}
onPageSelected={this.onScrollEnd}
key={pages.length}
style={[styles.wrapperAndroid, this.props.style]}>
{pages}
</ViewPagerAndroid>
)
}
return (
<ScrollView ref={this.refScrollView}
{...this.props}
{...this.scrollViewPropOverrides()}
contentContainerStyle={[styles.wrapperIOS, this.props.style]}
contentOffset={this.state.offset}
onScrollBeginDrag={this.onScrollBegin}
onMomentumScrollEnd={this.onScrollEnd}
onScrollEndDrag={this.onScrollEndDrag}
style={this.props.scrollViewStyle}>
{pages}
</ScrollView>
)
}
That will work for all other possible platforms.
How to reproduce it>
You can create react-native-desktop project by following this and this documents.
In new project modify index.desktop.js to look like example
Steps to reproduce
- Open created
react-native-desktopapp - Use swiper
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 in src/index.js around the renderScrollView implementation referenced near line 634, then review the react-native-desktop setup and Swiper example linked in the reproduction steps. Reproduce the issue on the desktop platform and verify that Swiper lays out images horizontally and supports swiping there without breaking the existing platform behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100