[next] pageMargin prop does not work

[tmitchel2]

Bug report

Summary

pageMargin prop does not work correctly in v4.1.6, it does in v3.3.1. In v3 it works as expected by showing a gap during page transition, however in v4 the margin is added to the whole component and is visible while not transitioning. I have only tested this on android. I presume this has something to do with the upgrade to viewpager2.

Environment info

react-native info output:

System:
OS: macOS 10.15.6
CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 839.80 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK:
API Levels: 26, 28, 29
Build Tools: 28.0.3, 29.0.3, 30.0.0
System Images: android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 12.0/12A7209 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_252 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Library version: 4.1.6

Steps to reproduce

1. Set pageMargin to non zero number

Describe what you expected to happen:

1. Expected gaps between pages during transition.

Reproducible sample code

<ViewPager pageMargin={8} style={{flex: 1}}>
<View style={{flex: 1}}/>
<View style={{flex: 1}}/>

[CyberMew]

Please try to see if the workaround inside can help you #233

[tmitchel2]

Upgraded to 4.2.0 and i couldnt even compile for ios...

Undefined symbols for architecture x86_64:
"OBJC_CLASS$_RCTOnPageScrollStateChanged", referenced from:
objc-class-ref in libreact-native-viewpager.a(ReactNativePageView.o)
"OBJC_CLASS$_RCTOnPageScrollEvent", referenced from:
objc-class-ref in libreact-native-viewpager.a(ReactNativePageView.o)
"OBJC_CLASS$_RCTOnPageSelected", referenced from:
objc-class-ref in libreact-native-viewpager.a(ReactNativePageView.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I cleaned the xcode project and build, but didn't clean out pods, not sure if that would have caused it.

[MateWW]

@tmitchel2 I have tested it on IOS and Android with version 4.2.1 and seems to work correctly. Could you check if it works for you now otherwise please provide some better reproduction.

Android/IOS:

Code:

      <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
        <ViewPager pageMargin={24} style={{flex: 1}}>
          <View style={{flex: 1, backgroundColor: 'red'}} />
          <View style={{flex: 1, backgroundColor: 'blue'}} />
        </ViewPager>
        <View style={{flex: 1, backgroundColor: 'yellow'}} />
        <View style={{flex: 1, backgroundColor: 'green'}} />
      </SafeAreaView>

[tmitchel2]

@MateWW yea i presume that is because it was rolled back in 4.2.* because of issues like this. I don't think that means the issue is closed / forgotten about though.

[troZee]

@tmitchel2 to avoid any confusion, I labeled this issue and changed a title

[MateWW]

@troZee @tmitchel2 I have opened PR with fix for this issue.
Take a look on that #256

[troZee]

you can find this fix in 5.0.4 version