react-native ViewPagerAndroid peek property

Question

How to properly use the "peekEnabled" property on ViewPagerAndroid ?

<ViewPagerAndroid peekEnabled={true} >{this.props.children}</ViewPagerAndroid>

I want something like this

Answer 1

Seems that peekEnabled to work as expected needs ViewPagerAndroid to have padding.
Looking at the RN source code, child views style is set to position: absolute and right,left,top,bottom: 0 so the parent's container padding has no effect.

As a workaround you can set pageMargin to a negative value and use paddingLeft,paddindRight in the child views to achieve the same effect.

e.g:

<ViewPagerAndroid pageMargin={-70} style={{ flex: 1 }}>
  <View style={{ padding: 35 }}>
    <View style={{ backgroundColor: 'pink', flex: 1 }} />
  </View>
  <View style={{ padding: 35 }}>
    <View style={{ backgroundColor: 'cyan', flex: 1 }} />
  </View>
  <View style={{ padding: 35 }}>
    <View style={{ backgroundColor: 'magenta', flex: 1 }} />
  </View>
</ViewPagerAndroid>

demo