leecade / leecade/react-native-swiper

Swiper doesn't work on desktop platform

Open
#896 0 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 ?

Mac OS 10.14

Version

Which versions are you using:

  • react-native-swiper v1.5.13
  • react-native-desktop based on react-native v0.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
  1. Open created react-native-desktop app
  2. Use swiper

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.