added scale function

JenineMalett · Nov 11, 2022 · ea52e7d · ea52e7d
1 parent 85c4fb2
commit ea52e7d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/WheelPicker.tsx b/src/WheelPicker.tsx
@@ -24,6 +24,7 @@ interface Props {
   itemHeight?: number;
   containerStyle?: ViewStyle;
   containerProps?: Omit<ViewProps, 'style'>;
+  scaleFunction?: (x: number) => number;
   rotationFunction?: (x: number) => number;
   opacityFunction?: (x: number) => number;
   visibleRest?: number;
@@ -40,6 +41,7 @@ const WheelPicker: React.FC<Props> = ({
   itemStyle = {},
   itemTextStyle = {},
   itemHeight = 40,
+  scaleFunction = (x: number) => 0.7 ** x,
   rotationFunction = (x: number) => 1 - Math.pow(1 / 2, x),
   opacityFunction = (x: number) => Math.pow(1 / 3, x),
   visibleRest = 2,
@@ -138,6 +140,7 @@ const WheelPicker: React.FC<Props> = ({
             textStyle={itemTextStyle}
             height={itemHeight}
             currentScrollIndex={currentScrollIndex}
+            scaleFunction={scaleFunction}
             rotationFunction={rotationFunction}
             opacityFunction={opacityFunction}
             visibleRest={visibleRest}

diff --git a/src/WheelPickerItem.tsx b/src/WheelPickerItem.tsx
@@ -12,6 +12,7 @@ interface ItemProps {
   visibleRest: number;
   rotationFunction: (x: number) => number;
   opacityFunction: (x: number) => number;
+  scaleFunction: (x: number) => number;
 }
 
 const WheelPickerItem: React.FC<ItemProps> = ({
@@ -24,6 +25,7 @@ const WheelPickerItem: React.FC<ItemProps> = ({
   currentScrollIndex,
   opacityFunction,
   rotationFunction,
+  scaleFunction
 }) => {
   const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
 
@@ -71,6 +73,26 @@ const WheelPickerItem: React.FC<ItemProps> = ({
     })(),
   });
 
+  const scale = relativeScrollIndex.interpolate({
+    inputRange: (() => {
+      const range = [0];
+      for (let i = 1; i <= visibleRest + 1; i++) {
+        range.unshift(-i);
+        range.push(i);
+      }
+      return range;
+    })(),
+    outputRange: (() => {
+      const range = [1.0];
+      for (let x = 1; x <= visibleRest + 1; x++) {
+        const y = scaleFunction(x);
+        range.unshift(y);
+        range.push(y);
+      }
+      return range;
+    })(),
+  });
+
   const rotateX = relativeScrollIndex.interpolate({
     inputRange: (() => {
       const range = [0];
@@ -96,7 +118,7 @@ const WheelPickerItem: React.FC<ItemProps> = ({
       style={[
         styles.option,
         style,
-        { height, opacity, transform: [{ translateY }, { rotateX }] },
+        {  height, opacity, transform: [{ translateY }, { rotateX }, { scale }]},
       ]}
     >
       <Text style={textStyle}>{option}</Text>