Some fixes and props improvings

GeorgeHop · May 8, 2021 · 202855e · 202855e
1 parent cb37254
commit 202855e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/components/Container.js b/components/Container.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import {ScrollView} from 'react-native';
 
-export default function Container({stickyHeaderEnabled, children, scrollableContainer, ...rest}) {
+export default function Container({stickyHeaderEnabled, children, scrollableContainer, containerRef, stickyHeaderIndex, ...rest}) {
     return(
         scrollableContainer ? (
             <ScrollView
+                ref={containerRef}
                 stickyHeaderIndices={stickyHeaderEnabled ? [1] : null}
                 {...rest}
             >

diff --git a/components/StaticPills.js b/components/StaticPills.js
@@ -2,13 +2,20 @@ import React from 'react';
 import {useWindowDimensions, Text, TouchableOpacity, View} from "react-native";
 import {getOpacity} from "../helpers/getOpacity";
 
-export default function StaticPills({data, style, x, currentIndex, onPillPress}) {
+export default function StaticPills({data, style, x, currentIndex, onPillPress, containerRef, scrollableContainer}) {
     const width = useWindowDimensions().width;
     return (
         <View style={styles.container}>
             {!!data?.length && data.map((item, index) => (
                 <View key={index}>
-                    <TouchableOpacity onPress={onPillPress(index)} style={[
+                    <TouchableOpacity
+                        onPress={() => {
+                            onPillPress(index)
+
+                            if (index === currentIndex && scrollableContainer)
+                                containerRef?.current?.scrollTo({ x: 0, y: 0, animated: true })
+                        }}
+                         style={[
                         {
                             paddingHorizontal: 5,
                             width: width / data.length,

diff --git a/components/Swiper.js b/components/Swiper.js
@@ -7,9 +7,10 @@ import {usePrevious} from "../helpers/usePrevious";
 const isJSX = element => typeof element !== 'function' && typeof element?.type === 'object';
 const isMemo = element => typeof element !== 'function' && typeof element?.type === 'function';
 
-export default function Swiper({style, data, isStaticPills, initialScrollIndex, stickyHeaderEnabled, children, scrollableContainer, ...rest}) {
+export default function Swiper({style, data, isStaticPills, initialScrollIndex, stickyHeaderEnabled, children, stickyHeaderIndex, scrollableContainer, ...rest}) {
     const width = useWindowDimensions().width;
     const flatList = useRef(null);
+    const containerRef = useRef(null);
     const scrollViewRef = useRef(null);
     const [currentIndex, setCurrentIndex] = useState(initialScrollIndex || 0);
     const prevIndex = usePrevious(currentIndex);
@@ -58,8 +59,10 @@ export default function Swiper({style, data, isStaticPills, initialScrollIndex,
 
     return (
         <Container
+            containerRef={containerRef}
             stickyHeaderEnabled={stickyHeaderEnabled}
             scrollableContainer={scrollableContainer}
+            stickyHeaderIndex={stickyHeaderIndex}
         >
             {children}
             <View style={[style?.pillsOverflow]}>
@@ -71,6 +74,8 @@ export default function Swiper({style, data, isStaticPills, initialScrollIndex,
                     ]}>
                     {!!isStaticPills && (
                         <StaticPills
+                            containerRef={containerRef}
+                            scrollableContainer={scrollableContainer}
                             data={data}
                             currentIndex={currentIndex}
                             x={x}