feat: page margin

Author: okwasniewski

src/PagerView.tsx

@@ -151,13 +151,23 @@ export class PagerView extends React.Component<NativeProps> {
         ref={(ref) => {
           this.pagerView = ref;
         }}
-        style={this.props.style}
+        style={[
+          this.props.style,
+          Platform.OS === 'ios' && this.props.pageMargin
+            ? {
+                marginHorizontal: -this.props.pageMargin / 2,
+              }
+            : null,
+        ]}
         layoutDirection={this.deducedLayoutDirection}
         onPageScroll={this._onPageScroll}
         onPageScrollStateChanged={this._onPageScrollStateChanged}
         onPageSelected={this._onPageSelected}
         onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}
-        children={childrenWithOverriddenStyle(this.props.children)}
+        children={childrenWithOverriddenStyle(
+          this.props.children,
+          this.props.pageMargin
+        )}
       />
     );
   }

src/utils.ios.tsx

@@ -0,0 +1,25 @@
+import React, { Children, ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export const childrenWithOverriddenStyle = (
+  children?: ReactNode,
+  pageMargin = 0
+) => {
+  return Children.map(children, (child) => {
+    const element = child as React.ReactElement<any>;
+    return (
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          { marginRight: pageMargin / 2, marginLeft: pageMargin / 2 },
+        ]}
+        collapsable={false}
+      >
+        {React.cloneElement(element, {
+          ...element.props,
+          style: [element.props.style, StyleSheet.absoluteFill],
+        })}
+      </View>
+    );
+  });
+};

src/utils.tsx

@@ -1,15 +1,16 @@
 import React, { Children, ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-export const childrenWithOverriddenStyle = (children?: ReactNode) => {
+export const childrenWithOverriddenStyle = (
+  children?: ReactNode,
+  _pageMargin = 0
+) => {
   return Children.map(children, (child) => {
     const element = child as React.ReactElement<any>;
     return (
-      // Add a wrapper to ensure layout is calculated correctly
       <View style={StyleSheet.absoluteFill} collapsable={false}>
         {React.cloneElement(element, {
           ...element.props,
-          // Override styles so that each page will fill the parent.
           style: [element.props.style, StyleSheet.absoluteFill],
         })}
       </View>