Android vertical swiper #643

tudorilisoi · 2017-11-03T15:11:21Z

Is it a bugfix ?

Yes
Partially fixes Inner nested swiper doesn't show any content #595, Vertical Scroll is not working on Android #174, How to swipe up and swipe down (Vertical). Horizontal: false is not working #199

Is it a new feature ?

No
It's a bug fix for nested vertical swiper not being displayed on Android (with horizontal={false} ).

Describe what you've done:

I included a vertical view pager for Android

How to test it ?

import React from 'react'
import {
  Text,
  View
} from 'react-native'
import Swiper from 'react-native-swiper'

const Dimensions = require('Dimensions');
const window = Dimensions.get('window');

const justification = {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
}
const justification2 = {
  flex: 1,
  alignItems: 'center',
}
const styles = {
  wrapper: {
    backgroundColor: 'transparent'
  },
  innerSwiper: {
    width: window.width,
    height: window.height / 3,
    marginTop: 60,
    backgroundColor: '#92BBD9'
  },
  slide1: {
    ...justification,
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    ...justification,
    backgroundColor: '#97CAE5'
  },
  slide3: {
    ...justification,
    backgroundColor: '#92BBD9'
  },
  slide4: {
    ...justification2,
    backgroundColor: '#D6EB9D'
  },
  slide5: {
    ...justification,
    backgroundColor: '#CAE597'
  },
  slide6: {
    ...justification,
    backgroundColor: '#BBD992'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
}

export default () =>
  <Swiper style={styles.wrapper} showsButtons={true} horizontal={false}>

    <View style={styles.slide4}>
      <View style={styles.innerSwiper}>
        <Swiper style={styles.wrapper} showsButtons={true} >

          <View style={styles.slide1}>
            <Text style={styles.text}>Horiz Panel 1</Text>
          </View>

          <View style={styles.slide2}>
            <Text style={styles.text}>Horiz Panel 2</Text>
          </View>

          <View style={styles.slide3}>
            <Text style={styles.text}>Horiz Panel 3</Text>
          </View>

        </Swiper>
      </View>
      <Text style={styles.text}>Vertical Panel 1</Text>
    </View>
    <View style={styles.slide5}>
      <Text style={styles.text}>Vertical Panel 2</Text>
    </View>
    <View style={styles.slide6}>
      <Text style={styles.text}>Vertical Panel 3</Text>
    </View>
  </Swiper>

…wiper

robblovell · 2017-11-03T17:18:33Z

Using the code at the bottom as a test, there seems to be a number of problems (some not introduced here, but revealed as a result of the fix):

On android, there is a problem with the pager buttons, touching a vertical scroller pager button gives there error:

_this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'] is not a function. 
(In '_this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)', 
'_this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation']' is undefined)
scrollBy
    index.js:467:91
onPress
    index.js:600:72
...

The vertical page buttons are in the wrong location. This is a problem on both ios and android and not introduced by this fix. Again, this is not a problem with this merge request, but it might be nice to fix it in a follow up request (perhaps there is one that I haven't seen).
There seems to be a font problem in line 94 of index.js for Android:

  buttonText: {
    fontSize: 50,
    color: '#007aff',
    fontFamily: 'Arial'
  }

gives the error _on load_ in Android:

console.error: "fontFamily 'Arial' is not a system font and has not been loaded through Expo.Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Expo.Font.loadAsync."
newConsoleFunc
    AppEntry.bundle?platform=android&dev=true&minify=false:1760:21
error

This may be an error in my setup, but I am using a unmodified android pixel phone simulator for the test.

Removing the _fontFamily: 'Arial'_ removes this error. Perhaps there is a better fix out there:

var buttonText = {
  fontSize: 50,
  color: '#007aff',
  fontFamily: 'Roboto'
}
if (Platform.OS === 'ios') {
  buttonText = {
    fontSize: 50,
    color: '#007aff',
    fontFamily: 'Arial'
  }
}

Note:

An alternative to this code, ultimately, is to use ScrollView for both Android and ios. I realize that ScrollView is not complete for android yet (snap doesn't work for vertical sliding). This fix can work in the interim until the ScrollView for Android fix is complete (I see that there is activity toward getting this fixed within the next month).

Opinion:

I would move forward with this pull request once the first problem above is addressed and fixe problems 2 and 3 in separate pull requests.

The code used for testing:

import React from 'react'
import {
  Text,
  View
} from 'react-native'
import Swiper from 'react-native-swiper'

const Dimensions = require('Dimensions');
const window = Dimensions.get('window');

const justification = {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
}
const justification2 = {
  flex: 1,
  alignItems: 'center',
}
const styles = {
  wrapper: {
    backgroundColor: 'transparent'
  },
  innerSwiper: {
    width: window.width,
    height: window.height / 3,
    marginTop: 60,
    backgroundColor: '#92BBD9'
  },
  slide1: {
    ...justification,
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    ...justification,
    backgroundColor: '#97CAE5'
  },
  slide3: {
    ...justification,
    backgroundColor: '#92BBD9'
  },
  slide4: {
    ...justification2,
    backgroundColor: '#D6EB9D'
  },
  slide5: {
    ...justification,
    backgroundColor: '#CAE597'
  },
  slide6: {
    ...justification,
    backgroundColor: '#BBD992'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
}

export default () =>
  <Swiper style={styles.wrapper} showsButtons={true} horizontal={false}>

    <View style={styles.slide4}>
      <View style={styles.innerSwiper}>
        <Swiper style={styles.wrapper} showsButtons={true} >

          <View style={styles.slide1}>
            <Text style={styles.text}>Horiz Panel 1</Text>
          </View>

          <View style={styles.slide2}>
            <Text style={styles.text}>Horiz Panel 2</Text>
          </View>

          <View style={styles.slide3}>
            <Text style={styles.text}>Horiz Panel 3</Text>
          </View>

        </Swiper>
      </View>
      <Text style={styles.text}>Vertical Panel 1</Text>
    </View>
    <View style={styles.slide5}>
      <Text style={styles.text}>Vertical Panel 2</Text>
    </View>
    <View style={styles.slide6}>
      <Text style={styles.text}>Vertical Panel 3</Text>
    </View>
  </Swiper>

robblovell · 2017-11-03T17:27:35Z

Related to #477 too.

tudorilisoi · 2017-11-03T17:29:16Z

I (shamefully) pasted the example, should have come up with a minimalist one.
Thank you so much for taking the time to test it.
Bottom line, this does work better, but indeed has issues with the buttons and the bullets. I thought some people would like to use it this month :) i edited the req. to include your fixed test code

robblovell · 2017-11-03T18:01:08Z

Other issues:

It appears that sometimes the render method for the vertical panels either don't get called correctly or sub views don't get rendered.
The vertical position dots don't get updated for vertical panels.

robblovell · 2017-11-03T18:07:32Z

I agree with you that this is a vast improvement over not having anything at all!

robblovell · 2017-11-03T18:15:24Z

I have found that commenting out the ios specific statements in the code does produce a working application, but with one problem: On Android, the vertical scroll doesn't snap to page breaks. Everything else seems to work.

I noticed that the fix for ScrollView snap on Android is almost merged into the main branch of react-native. Perhaps there is a workaround for the snap problem on Android in the interim?

alonle · 2017-11-05T12:04:48Z

Hi, I have tested it on my project and got an issue with loadMinimal and loadMinimalSize API
Some pages which contain video element are not loaded.
When I remove the loadMinimal loadMinimalSize it worked
Any Idea why?

vedran · 2018-01-16T16:54:25Z

@alonle I believe I have a solution for the loadMinimal issue: #358 (comment)

Versus2017 · 2018-01-18T11:25:23Z

@tudorilisoi I tried your PR with my own project, and I found it will crash in below code:
Here should be fixed:

if (Platform.OS !== 'ios') {
      this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
    } else {
      this.scrollView && this.scrollView.scrollTo({ x, y, animated })
}

with

 if (Platform.OS !== 'ios' && this.props.horizontal === true) {
      this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
    } else {
      this.scrollView && this.scrollView.scrollTo({ x, y, animated })
}

because it is the same with ios when you use VertViewPager, they all have scrollTo method.

CodeLuca · 2018-03-10T13:42:52Z

Any progress on this?

smitthakkar1 · 2018-04-02T02:30:51Z

It's working now.

Use this.

https://www.npmjs.com/package/@nart/react-native-swiper

Don't forget to add prop horizontal= {false} to Swiper

EladZucker · 2018-04-10T20:39:05Z

@smitthakkar1 using https://www.npmjs.com/package/@nart/react-native-swiper I found myself having the problem

smitthakkar1 · 2018-04-10T20:40:32Z

@EladZucker it seems the problem with styles of scrollview. try to disable the styles and try again

EladZucker · 2018-04-10T20:47:22Z

@smitthakkar1 got it ! its working now ! thanks ! when do you think it will get pushed to this repo ?

smitthakkar1 · 2018-04-11T04:58:33Z

@EladZucker can you please paste your code here ?

zagoa · 2018-04-16T09:54:53Z

I try to do something similar to this on android. If I copy the code all is ok but if I want the inverse (scroll verticaly and after to scroll horizontaly) that cause a problem. My code look like this :

<Swiper horizontal={false} loop={false} ref={(swiper) => {this._swiperVertical = swiper;}}>
     <View><Text>home</Text></View>
    <Swiper loop={false}  ref={(swiper) => {this._swiperHorizontal = swiper;}}>
        <View><Text>one</Text></View>
	<View><Text>two</Text></View>
   </Swiper>
</Swiper>

The problem is when I scroll verticaly there is no content in my swiper horizontal, and I don't understand why.

Using https://www.npmjs.com/package/@nart/react-native-swiper.

Andrfas · 2018-05-03T09:16:52Z

Installed https://www.npmjs.com/package/@nart/react-native-swiper, set horizontal={false} - still doesn't work (just scrolls horizontally).
ReactNative v0.49.5
React v16

acollazomayer · 2018-05-17T14:55:53Z

Im having the same problem with "react": "16.3.1",
"react-native": "0.55.4", on android. Any updates on this

syntax-e · 2018-05-29T22:34:28Z

Same issue. The swiper shows up horizontally on Android invariable to the horizontal={false} property.

VC444 · 2018-06-07T01:13:52Z

Is there any alternative that works for both android and ios?

muhammadsr · 2018-06-27T13:05:09Z

For those who are still struggling, please check the Files Changed up in the pull request. You can also go to https://www.npmjs.com/package/react-native-vertical-view-pager

kevupton · 2018-09-18T05:51:53Z

@smitthakkar1 I tried your package, however the index property doesnt seem to do anything when horizontal={false}

DavidCai75905171 · 2018-09-25T06:53:23Z

+1

mrwillowyang · 2019-02-08T07:19:31Z

+1

BobFarias · 2019-02-21T08:22:24Z

@smitthakkar1 I tried your package, however the index property doesnt seem to do anything when horizontal={false}

+1

tudorilisoi added 4 commits November 3, 2017 16:49

Update index.js

b426cc6

Update package.json

612718b

Merge remote-tracking branch 'origin/patch-2' into android-vertical-s…

49c3789

…wiper

bump

9888050

tudorilisoi mentioned this pull request Nov 3, 2017

Horizontal={false} not working in Android. #439

Open

This was referenced Nov 3, 2017

[Question] Should we keep ViewPagerAndroid or use only ScrollView for both Android and iOS #608

Open

react-native-swiper android Can't vertical scrolling #477

Open

Alvin365 approved these changes Dec 5, 2017

View reviewed changes

vedran mentioned this pull request Jan 16, 2018

loadMinimal doesn't work on Android #358

Open

ArrayZoneYour added this to the Backlog milestone Jun 24, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Android vertical swiper #643

Android vertical swiper #643

tudorilisoi commented Nov 3, 2017 •

edited

Loading

robblovell commented Nov 3, 2017 •

edited

Loading

robblovell commented Nov 3, 2017

tudorilisoi commented Nov 3, 2017

robblovell commented Nov 3, 2017 •

edited

Loading

robblovell commented Nov 3, 2017

robblovell commented Nov 3, 2017 •

edited

Loading

alonle commented Nov 5, 2017

vedran commented Jan 16, 2018

Versus2017 commented Jan 18, 2018

CodeLuca commented Mar 10, 2018 •

edited

Loading

smitthakkar1 commented Apr 2, 2018

EladZucker commented Apr 10, 2018

smitthakkar1 commented Apr 10, 2018

EladZucker commented Apr 10, 2018 •

edited

Loading

smitthakkar1 commented Apr 11, 2018

zagoa commented Apr 16, 2018 •

edited

Loading

Andrfas commented May 3, 2018 •

edited

Loading

acollazomayer commented May 17, 2018

syntax-e commented May 29, 2018

VC444 commented Jun 7, 2018

muhammadsr commented Jun 27, 2018

kevupton commented Sep 18, 2018

DavidCai75905171 commented Sep 25, 2018

mrwillowyang commented Feb 8, 2019

BobFarias commented Feb 21, 2019

Android vertical swiper #643

Are you sure you want to change the base?

Android vertical swiper #643

Conversation

tudorilisoi commented Nov 3, 2017 • edited Loading

Is it a bugfix ?

Is it a new feature ?

Describe what you've done:

How to test it ?

robblovell commented Nov 3, 2017 • edited Loading

Note:

Opinion:

robblovell commented Nov 3, 2017

tudorilisoi commented Nov 3, 2017

robblovell commented Nov 3, 2017 • edited Loading

robblovell commented Nov 3, 2017

robblovell commented Nov 3, 2017 • edited Loading

alonle commented Nov 5, 2017

vedran commented Jan 16, 2018

Versus2017 commented Jan 18, 2018

CodeLuca commented Mar 10, 2018 • edited Loading

smitthakkar1 commented Apr 2, 2018

EladZucker commented Apr 10, 2018

smitthakkar1 commented Apr 10, 2018

EladZucker commented Apr 10, 2018 • edited Loading

smitthakkar1 commented Apr 11, 2018

zagoa commented Apr 16, 2018 • edited Loading

Andrfas commented May 3, 2018 • edited Loading

acollazomayer commented May 17, 2018

syntax-e commented May 29, 2018

VC444 commented Jun 7, 2018

muhammadsr commented Jun 27, 2018

kevupton commented Sep 18, 2018

DavidCai75905171 commented Sep 25, 2018

mrwillowyang commented Feb 8, 2019

BobFarias commented Feb 21, 2019

tudorilisoi commented Nov 3, 2017 •

edited

Loading

robblovell commented Nov 3, 2017 •

edited

Loading

robblovell commented Nov 3, 2017 •

edited

Loading

robblovell commented Nov 3, 2017 •

edited

Loading

CodeLuca commented Mar 10, 2018 •

edited

Loading

EladZucker commented Apr 10, 2018 •

edited

Loading

zagoa commented Apr 16, 2018 •

edited

Loading

Andrfas commented May 3, 2018 •

edited

Loading