fix: style and layout props for pager, add containerStyle prop with d…

…efaults
ajsmth · Oct 7, 2019 · 3cefb7b · 3cefb7b
1 parent 0e7f297
commit 3cefb7b
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -70,7 +70,8 @@ threshold?: number; - percentage (0 - 1), how far should the user drag before sn
 minIndex?: number; - minimum index to swipe to (default 0)
 maxIndex?: number; - maximum index to swipe to (default children.length - 1)
 adjacentChildOffset?: number; - the number of children adjacent to the activeIndex to render
-style?: ViewStyle; - container style for the pager
+style?: ViewStyle; - style for pages
+containerStyle?: ViewStyle - style for pan handler container
 animatedValue?: Animated.Value<number>; - total translation value of the pager
 animatedIndex?: Animated.Value<number>; - activeIndex as an animated value e.g intermediate values
 type?: 'horizontal' | 'vertical'; - target horizontal swipes or vertical swipes

diff --git a/example/App.tsx b/example/App.tsx
@@ -34,7 +34,7 @@ const App = () => {
       <View
         style={{flex: 1, backgroundColor: 'white', justifyContent: 'center'}}>
         <PagerProvider activeIndex={activeIndex} onChange={onChange}>
-          <MyPager />
+          <KilterCards />
         </PagerProvider>
       </View>
     </SafeAreaView>

diff --git a/example/src/basic-example.tsx b/example/src/basic-example.tsx
@@ -9,7 +9,7 @@ function MyPager() {
   const [activeIndex, onChange] = usePager();
 
   return (
-    <View>
+    <View style={{flex: 1}}>
       <Text
         style={{
           textAlign: 'center',
@@ -18,10 +18,7 @@ function MyPager() {
         {`Number of screens: ${children.length}`}
       </Text>
 
-      <Pager
-        style={{height: 200, width: 200, alignSelf: 'center'}}
-        activeIndex={activeIndex}
-        onChange={onChange}>
+      <Pager activeIndex={activeIndex} onChange={onChange}>
         {children}
       </Pager>
 

diff --git a/example/src/panhandler-width.tsx b/example/src/panhandler-width.tsx
@@ -36,16 +36,21 @@ const pagerConfig: iPageInterpolation = {
 const ContainerStyle = () => {
   const [activeIndex, onChange] = usePager();
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <View style={{height: 100, padding: 5}}>
-        <Pager
-          pageInterpolation={pagerConfig}
-          style={{height: 80, width: 60, alignSelf: 'center', padding: 10}}>
-          {[...Array(10).keys()].map(n => (
-            <Square key={n}>{n}</Square>
-          ))}
-        </Pager>
-      </View>
+    <View>
+      <Pager
+        pageInterpolation={pagerConfig}
+        containerStyle={{height: 100, borderWidth: 1, paddingVertical: 10}}
+        style={{
+          height: 80,
+          width: 60,
+          alignSelf: 'center',
+          paddingVertical: 5,
+          borderWidth: 1,
+        }}>
+        {[...Array(10).keys()].map(n => (
+          <Square key={n}>{n}</Square>
+        ))}
+      </Pager>
 
       <NavigationButtons activeIndex={activeIndex} onChange={onChange} />
     </View>

diff --git a/example/src/stack.tsx b/example/src/stack.tsx
@@ -34,14 +34,15 @@ function Stack() {
         clamp={{prev: 0.4}}
         clampDrag={{next: 0}}
         adjacentChildOffset={4}
+        containerStyle={{height: 200}}
         style={{
           height: 200,
           width: 200,
           alignSelf: 'center',
         }}
         pageInterpolation={stackConfig}>
         {Array.from({length: activeIndex + 3}, (_, i) => (
-          <Slide key={i} i={i} />
+          <Slide key={i} />
         ))}
       </Pager>
 

diff --git a/example/src/swipe-cards.tsx b/example/src/swipe-cards.tsx
@@ -52,7 +52,12 @@ function SwipeCards() {
       <Pager
         clamp={{next: 0}}
         adjacentChildOffset={3}
-        style={{height: 200, width: 200, alignSelf: 'center', padding: 10}}
+        style={{
+          height: 200,
+          width: 200,
+          alignSelf: 'center',
+          padding: 5,
+        }}
         pageInterpolation={swipeCardsConfig}>
         {Array.from({length: activeIndex + 4}, (_, i) => (
           <Slide key={i} />

diff --git a/src/pager.tsx b/src/pager.tsx
@@ -114,6 +114,7 @@ export interface iPager {
   maxIndex?: number;
   adjacentChildOffset?: number;
   style?: ViewStyle;
+  containerStyle?: ViewStyle;
   animatedValue?: Animated.Value<number>;
   animatedIndex?: Animated.Value<number>;
   type?: 'horizontal' | 'vertical';
@@ -142,6 +143,7 @@ function Pager({
   adjacentChildOffset = 10,
   animatedValue,
   style,
+  containerStyle,
   type = 'horizontal',
   pageInterpolation,
   clamp = {
@@ -251,6 +253,7 @@ function Pager({
 
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
+
   const dimension = memoize(new Value(0));
 
   function handleLayout({ nativeEvent: { layout } }: LayoutChangeEvent) {
@@ -493,58 +496,71 @@ function Pager({
   // set the total width of the container view to the sum width of all the screens
   const totalDimension = memoize(multiply(dimension, numberOfScreens));
 
+  // grabbing the height property from the style prop if there is no container style, this reduces
+  // the chances of messing up the layout with containerStyle configurations
+  // can be overridden by the prop itself, but its likely that this is what is intended most of the time
+  // also has the benefit of covering 100% width of container, meaning better pan coverage on android
+  const defaultContainerStyle =
+    style && style.height ? { height: style.height } : undefined;
+
+  // extra Animated.Views below may seem redundant but they preserve applied styles e.g padding and margin
+  // of the page views
   return (
-    <Animated.View style={{ height, width: '100%' }}>
+    <Animated.View
+      style={containerStyle || defaultContainerStyle || { flex: 1 }}
+    >
       <PanGestureHandler
         {...panProps}
         onGestureEvent={handleGesture}
         onHandlerStateChange={handleStateChange}
       >
         <Animated.View style={{ flex: 1 }}>
-          <Animated.View style={style || { flex: 1 }} onLayout={handleLayout}>
-            <Animated.View
-              style={{
-                flex: 1,
-                [targetDimension]: totalDimension,
-                transform: [{ [translateValue]: translation }],
-              }}
-            >
-              {width === 0
-                ? null
-                : adjacentChildren.map((child: any, i) => {
-                    // use map instead of React.Children because we want to track
-                    // the keys of these children by there index
-                    // React.Children shifts these key values intelligently, but it
-                    // causes issues with the memoized values in <Page /> components
-                    let index = i;
-
-                    if (adjacentChildOffset !== undefined) {
-                      index =
-                        activeIndex <= adjacentChildOffset
-                          ? i
-                          : activeIndex - adjacentChildOffset + i;
-                    }
-
-                    return (
-                      <Page
-                        key={index}
-                        index={index}
-                        dimension={dimension}
-                        translation={translation}
-                        targetDimension={targetDimension}
-                        translateValue={translateValue}
-                        clampPrev={clampPrev}
-                        clampNext={clampNext}
-                        pageInterpolation={pageInterpolation}
-                      >
-                        <IndexProvider index={index}>
-                          <FocusProvider focused={index === activeIndex}>
-                            {child}
-                          </FocusProvider>
-                        </IndexProvider>
-                      </Page>
-                    );
-                  })}
+          <Animated.View style={style || { flex: 1 }}>
+            <Animated.View style={{ flex: 1 }} onLayout={handleLayout}>
+              <Animated.View
+                style={{
+                  flex: 1,
+                  [targetDimension]: totalDimension,
+                  transform: [{ [translateValue]: translation }],
+                }}
+              >
+                {width === 0
+                  ? null
+                  : adjacentChildren.map((child: any, i) => {
+                      // use map instead of React.Children because we want to track
+                      // the keys of these children by there index
+                      // React.Children shifts these key values intelligently, but it
+                      // causes issues with the memoized values in <Page /> components
+                      let index = i;
+
+                      if (adjacentChildOffset !== undefined) {
+                        index =
+                          activeIndex <= adjacentChildOffset
+                            ? i
+                            : activeIndex - adjacentChildOffset + i;
+                      }
+
+                      return (
+                        <Page
+                          key={index}
+                          index={index}
+                          dimension={dimension}
+                          translation={translation}
+                          targetDimension={targetDimension}
+                          translateValue={translateValue}
+                          clampPrev={clampPrev}
+                          clampNext={clampNext}
+                          pageInterpolation={pageInterpolation}
+                        >
+                          <IndexProvider index={index}>
+                            <FocusProvider focused={index === activeIndex}>
+                              {child}
+                            </FocusProvider>
+                          </IndexProvider>
+                        </Page>
+                      );
+                    })}
+              </Animated.View>
             </Animated.View>
           </Animated.View>
         </Animated.View>