@amabeth/repeating-wheel-picker 1.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 amabeth
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# Readme
+
+A React Native wheel picker that allows endless scrolling through repeating content
+
+## Installation
+
+```sh
+npm install repeating-wheel-picker
+```
+
+## Usage
+
+
+```tsx
+import RepeatingWheelPicker, {
+  type RepeatingWheelPickerProps,
+} from "repeating-wheel-picker";
+
+// ...
+const [, setSelected] = useState<string>();
+
+return (
+  <RepeatingWheelPicker<string>
+    setSelected={setSelected}
+    initialIndex={0}
+    data={["first", "second", "third"]}
+  />
+);
+```
+
+
+## Contributing
+
+Contributions are currently not intended.
+
+## License
+
+[MIT](LICENSE)
+
+## [Changelog](CHANGELOG.md)
+
+## [Impressum / Imprint](https://amabeth.github.io/#imprint)
+
+---

package/lib/module/index.js

@@ -0,0 +1,235 @@
+"use strict";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Text, View, VirtualizedList } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+
+/**
+ * Provides a wheel picker with repeating data that can be infinitely scrolled.
+ *
+ * @param properties configuration of the wheel picker
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function RepeatingWheelPicker(properties) {
+  // set defaults for all unprovided optional properties
+  const props = useMemo(() => withDefaults(properties), [properties]);
+  // to always have enough data to scroll through, define how often the input data should be multiplied
+  const dataMultiplier = useMemo(() => Math.max(Math.round(90 / props.data.length), 3), [props.data.length]);
+  // difference between centered index and top most visible index
+  const indexDiffTopToCentered = useMemo(() => Math.floor(props.itemDisplayCount / 2), [props.itemDisplayCount]);
+  // offsets for all list elements
+  const offsets = useMemo(() => getOffsets(props.data.length, props.itemDisplayCount, props.itemHeight, dataMultiplier), [props.data.length, props.itemDisplayCount, props.itemHeight, dataMultiplier, props.containerVerticalPadding]);
+
+  // current selected item (centered one)
+  const [current, setCurrent] = useState(() => props.initialIndex + props.data.length * Math.floor(dataMultiplier / 2));
+  const listRef = useRef(null);
+
+  // call "setSelected" when the current top item or the data changed
+  useEffect(() => {
+    const selectedElement = props.data[current % props.data.length]; // centered element
+
+    if (selectedElement !== undefined) {
+      props.setSelected(selectedElement);
+    }
+  }, [current, props.data]);
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: props.containerOnLayout,
+    style: {
+      ...props.containerStyle,
+      height: props.itemHeight * props.itemDisplayCount + props.containerVerticalPadding * 2
+    },
+    children: [/*#__PURE__*/_jsx(VirtualizedList, {
+      ref: listRef,
+      scrollEnabled: props.enabled,
+      getItemCount: () => props.data.length * dataMultiplier,
+      initialScrollIndex: current - indexDiffTopToCentered,
+      initialNumToRender: props.data.length * dataMultiplier,
+      windowSize: props.data.length * dataMultiplier,
+      renderItem: ({
+        item,
+        index
+      }) => /*#__PURE__*/_jsx(Item, {
+        item: item,
+        props: props
+      }, index),
+      getItem: (_, index) => props.data[index % props.data.length],
+      getItemLayout: (_, index) => ({
+        length: props.itemHeight,
+        offset: offsets[index],
+        index: index
+      }),
+      keyExtractor: (_, index) => `${index}`
+
+      // disableIntervalMomentum={true}
+      ,
+      decelerationRate: "fast",
+      snapToOffsets: offsets,
+      onMomentumScrollEnd: event => onMomentumScrollEnd(event.nativeEvent.contentOffset.y, setCurrent, props.data.length, props.itemHeight, dataMultiplier, indexDiffTopToCentered, props.containerVerticalPadding, listRef),
+      showsVerticalScrollIndicator: false,
+      style: {
+        flex: 1,
+        width: "100%",
+        borderRadius: props.containerStyle.borderRadius,
+        paddingVertical: props.containerVerticalPadding,
+        paddingHorizontal: props.containerHorizontalPadding
+      }
+    }), props.enableGradient && /*#__PURE__*/_jsx(View, {
+      style: {
+        backgroundColor: "transparent",
+        position: "absolute",
+        height: "100%",
+        width: "100%"
+      },
+      children: /*#__PURE__*/_jsx(FrontGradient, {
+        gradientFadeColor: props.gradientFadeColor,
+        borderRadius: props.containerStyle.borderRadius
+      })
+    })]
+  });
+}
+function Item({
+  item,
+  props
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      justifyContent: "center",
+      alignContent: "center",
+      backgroundColor: "transparent",
+      ...props.itemContainerStyle,
+      paddingVertical: 0,
+      height: props.itemHeight
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        textAlign: "center",
+        ...props.itemTextStyle
+      },
+      children: props.getLabel(item)
+    })
+  });
+}
+function FrontGradient({
+  gradientFadeColor,
+  borderRadius
+}) {
+  return /*#__PURE__*/_jsx(LinearGradient, {
+    colors: [gradientFadeColor, "transparent", gradientFadeColor],
+    style: {
+      height: "100%",
+      width: "100%",
+      backgroundColor: "transparent",
+      borderRadius: borderRadius
+    }
+  });
+}
+function getOffsets(dataLength, itemDisplayCount, itemHeight, dataMultiplier) {
+  let offsets = [];
+
+  // calculate offset for all items
+  for (let i = 0; i < dataLength * dataMultiplier; i++) {
+    offsets[i] = itemOffset(i, itemDisplayCount, itemHeight);
+  }
+  return offsets;
+}
+function itemOffset(index, itemDisplayCount, itemHeight) {
+  return (index + (itemDisplayCount % 2 === 0 ? 0.5 : 0)) * itemHeight;
+}
+function onMomentumScrollEnd(offset, setCurrent, dataLength, itemHeight, dataMultiplier, indexDiffTopToCentered, verticalPadding, ref) {
+  // offset excluding padding
+  const innerOffset = offset - verticalPadding;
+  // get index of top most completely visible item
+  const currentTopIndex = Math.round(innerOffset / itemHeight);
+
+  // get current section within whole extended data (data * dataMultiplier)
+  // section 0 = [0, data.length)
+  // section 1 = [data.length, data.length * 2)
+  // ...
+  const currentSection = Math.floor(innerOffset / (dataLength * itemHeight));
+  // target section is always the middle one, so user can scroll seemingly infinitely
+  const targetSection = Math.floor(dataMultiplier / 2);
+
+  // get corresponding index of current top index in target section
+  const targetTopIndex = currentTopIndex + (targetSection - currentSection) * dataLength;
+  // set current index to centered one, if `targetTopIndex`was at the top
+  setCurrent(targetTopIndex + indexDiffTopToCentered);
+  if (currentSection === targetSection) {
+    // if target section is current section, stay in this section
+    return;
+  }
+
+  // if target section is different from current section, scroll to target
+  const targetOffset = offset + (targetTopIndex - currentTopIndex) * itemHeight;
+  ref.current?.scrollToOffset({
+    animated: false,
+    offset: targetOffset
+  });
+}
+
+// props
+
+function withDefaults(props) {
+  const defaultBackgroundColor = "black";
+  const defaultTextColor = "white";
+  const defaultTextSize = 18;
+  validateProps(props);
+  return {
+    ...props,
+    // optional
+    containerOnLayout: props.containerOnLayout ?? (() => {}),
+    enabled: props.enabled ?? true,
+    getLabel: props.getLabel ?? (t => `${t}`),
+    itemHeight: props.itemHeight ?? (props.itemTextStyle?.fontSize ?? defaultTextSize) + 15,
+    itemDisplayCount: props.itemDisplayCount ?? 3,
+    containerVerticalPadding: props.containerVerticalPadding ?? 0,
+    containerHorizontalPadding: props.containerHorizontalPadding ?? 10,
+    containerStyle: {
+      ...props.containerStyle,
+      backgroundColor: props.containerStyle?.backgroundColor ?? defaultBackgroundColor,
+      padding: 0,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+    itemContainerStyle: {
+      ...props.itemContainerStyle,
+      backgroundColor: props.itemContainerStyle?.backgroundColor ?? "transparent",
+      justifyContent: props.itemContainerStyle?.justifyContent ?? "center"
+    },
+    itemTextStyle: {
+      ...props.itemTextStyle,
+      fontSize: props.itemTextStyle?.fontSize ?? defaultTextSize,
+      color: props.itemTextStyle?.color ?? defaultTextColor
+    },
+    enableGradient: props.enableGradient ?? true,
+    gradientFadeColor: props.gradientFadeColor ?? props.containerStyle?.backgroundColor ?? defaultBackgroundColor
+  };
+}
+function validateProps(props) {
+  if (props.initialIndex < 0 || props.initialIndex >= props.data.length) {
+    throw InvalidPropertiesError("initialIndex", String(props.initialIndex), "has to be in range [0, data.length)");
+  }
+  if (props.data.length < 2) {
+    throw InvalidPropertiesError("data.length", String(props.data.length), "has to be larger than 1");
+  }
+  if (props.itemDisplayCount !== undefined && props.itemDisplayCount < 1) {
+    throw InvalidPropertiesError("itemDisplayCount", String(props.itemDisplayCount), "has to be larger than 0");
+  }
+  if (props.itemDisplayCount !== undefined && !Number.isInteger(props.itemDisplayCount)) {
+    throw InvalidPropertiesError("itemDisplayCount", String(props.itemDisplayCount), "has to be an integer");
+  }
+  if (props.itemHeight !== undefined && props.itemHeight < 1) {
+    throw InvalidPropertiesError("itemHeight", String(props.itemHeight), "has to be larger than 0");
+  }
+}
+function InvalidPropertiesError(propertyName, propertyValue, violatedConstraint) {
+  return Error(`Value "${propertyValue}" is invalid for property "${propertyName}": ${violatedConstraint}`);
+}
+
+/**
+ *
+ */
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useRef","useState","Text","View","VirtualizedList","LinearGradient","jsx","_jsx","jsxs","_jsxs","RepeatingWheelPicker","properties","props","withDefaults","dataMultiplier","Math","max","round","data","length","indexDiffTopToCentered","floor","itemDisplayCount","offsets","getOffsets","itemHeight","containerVerticalPadding","current","setCurrent","initialIndex","listRef","selectedElement","undefined","setSelected","onLayout","containerOnLayout","style","containerStyle","height","children","ref","scrollEnabled","enabled","getItemCount","initialScrollIndex","initialNumToRender","windowSize","renderItem","item","index","Item","getItem","_","getItemLayout","offset","keyExtractor","decelerationRate","snapToOffsets","onMomentumScrollEnd","event","nativeEvent","contentOffset","y","showsVerticalScrollIndicator","flex","width","borderRadius","paddingVertical","paddingHorizontal","containerHorizontalPadding","enableGradient","backgroundColor","position","FrontGradient","gradientFadeColor","justifyContent","alignContent","itemContainerStyle","textAlign","itemTextStyle","getLabel","colors","dataLength","i","itemOffset","verticalPadding","innerOffset","currentTopIndex","currentSection","targetSection","targetTopIndex","targetOffset","scrollToOffset","animated","defaultBackgroundColor","defaultTextColor","defaultTextSize","validateProps","t","fontSize","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","color","InvalidPropertiesError","String","Number","isInteger","propertyName","propertyValue","violatedConstraint","Error"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,157 @@
+import { type ColorValue, type LayoutChangeEvent, type TextStyle, type ViewStyle } from "react-native";
+/**
+ * Provides a wheel picker with repeating data that can be infinitely scrolled.
+ *
+ * @param properties configuration of the wheel picker
+ */
+export declare function RepeatingWheelPicker<T>(properties: RepeatingWheelPickerProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ *
+ */
+export type RepeatingWheelPickerProps<T> = {
+    /**
+     * Function to set currently selected element and use it in your application.
+     *
+     * @example
+     * ```ts
+     * const [selected, setSelected] = useState(0);
+     *
+     * return (
+     *   <RepeatingWheelPicker
+     *     setSelected={setSelected}
+     *     //...
+     *   />
+     * );
+     * ```
+     *
+     * @param t currently selected element
+     */
+    setSelected: (t: T) => void;
+    /**
+     * Index to initially center.
+     */
+    initialIndex: number;
+    /**
+     * Data to display.
+     */
+    data: T[];
+    /**
+     * Function to retrieve the text to display for an element as a label.
+     *
+     * @defaultValue
+     * ```ts
+     * (t: T) => `${t}`
+     * ```
+     *
+     * @param t element to retrieve label for
+     */
+    getLabel?: (t: T) => string;
+    /**
+     * Function called when the layout of the container changes.
+     *
+     * _Example usage for monitoring the container's height:_
+     * ```ts
+     * const [pickerHeight, setPickerHeight] = useState<number>(0);
+     *
+     * const onLayout = useCallback((event: LayoutChangeEvent) => {
+     *   const { height } = event.nativeEvent.layout;
+     *   setPickerHeight(height);
+     * }, []);
+     *
+     * return (
+     *   <View style={{flexDirection: "row"}}>
+     *     <View style={{height: height}}>
+     *       <Text>Picker label</Text>
+     *     </View>
+     *     <RepeatingWheelPicker
+     *       //...
+     *       containerOnLayout={onLayout}
+     *     />
+     *   </View>
+     * );
+     * ```
+     *
+     * @defaultValue () => {}
+     *
+     * @param event layout change event that triggered `onLayout`
+     */
+    containerOnLayout?: (event: LayoutChangeEvent) => void;
+    /**
+     * Enables / disables scrolling of the wheel picker.
+     *
+     * @defaultValue true
+     */
+    enabled?: boolean;
+    /**
+     * Height per displayed item.
+     *
+     * @defaultValue itemTextStyle.fontSize + 15
+     */
+    itemHeight?: number;
+    /**
+     * Number of items to display.
+     *
+     * @defaultValue 3
+     */
+    itemDisplayCount?: number;
+    /**
+     * Vertical padding for the container of the wheel picker.
+     *
+     * @defaultValue 0
+     */
+    containerVerticalPadding?: number;
+    /**
+     * Horizontal padding for the container of the wheel picker.
+     *
+     * @defaultValue 10
+     */
+    containerHorizontalPadding?: number;
+    /**
+     * Styling for the container of the wheel picker.
+     *
+     * @defaultValue
+     * ```ts
+     *   {
+     *     backgroundColor: "black"
+     *   }
+     * ```
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Styling for the container of each element.
+     *
+     * @defaultValue
+     * ```ts
+     *   {
+     *     backgroundColor: "transparent",
+     *     justifyContent: "center"
+     *   }
+     * ```
+     */
+    itemContainerStyle?: ViewStyle;
+    /**
+     * Styling for the text of the elements.
+     *
+     * @defaultValue
+     * ```ts
+     *   {
+     *     fontSize: "18",
+     *     color: "white"
+     *   }
+     * ```
+     */
+    itemTextStyle?: TextStyle;
+    /**
+     * If enabled, will show a gradient fade towards the top and bottom of the wheel picker.
+     *
+     * @defaultValue true
+     */
+    enableGradient?: boolean;
+    /**
+     * Color the gradient should fade to at the top and bottom.
+     *
+     * @defaultValue containerStyle.backgroundColor
+     */
+    gradientFadeColor?: ColorValue;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAEd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAGtB;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,UAAU,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CAgHzC;AA+ND;;GAEG;AACH,MAAM,MAAM,yBAAyB,CAAC,CAAC,IAAI;IACzC;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IAEV;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;;;;;;;OAUG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAChC,CAAC"}

package/package.json

@@ -0,0 +1,177 @@
+{
+  "name": "@amabeth/repeating-wheel-picker",
+  "version": "1.0.0",
+  "description": "A React Native wheel picker that allows endless scrolling through repeating content",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace repeating-wheel-picker-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build & husky",
+    "docs": "typedoc",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amabeth/repeating-wheel-picker.git"
+  },
+  "author": "amabeth <amabeth.dev@gmail.com> (https://github.com/amabeth)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/amabeth/repeating-wheel-picker/issues"
+  },
+  "homepage": "https://github.com/amabeth/repeating-wheel-picker#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.3.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.30.1",
+    "@evilmartians/lefthook": "^1.11.16",
+    "@react-native/babel-preset": "^0.80.1",
+    "@react-native/eslint-config": "^0.80.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.14",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "husky": "^9.1.7",
+    "jest": "^30.0.4",
+    "prettier": "^3.6.2",
+    "react-native-builder-bob": "^0.40.12",
+    "release-it": "^19.0.3",
+    "typedoc-github-theme": "^0.3.0",
+    "typedoc-plugin-coverage": "^4.0.1",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "expo-linear-gradient": "^14.1.5",
+    "react": "19.0.0",
+    "react-native": "0.79.5"
+  },
+  "overrides": {
+    "@react-native/eslint-config": {
+      "eslint": "$eslint"
+    }
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.51.1"
+  },
+  "typedocOptions": {
+    "entryPoints": [
+      "src/index.tsx"
+    ],
+    "projectDocuments": [
+      "*.md"
+    ],
+    "sort": [
+      "source-order"
+    ],
+    "plugin": [
+      "typedoc-plugin-coverage",
+      "typedoc-github-theme"
+    ]
+  }
+}

package/src/index.tsx

@@ -0,0 +1,507 @@
+import { type RefObject, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type AnimatableNumericValue,
+  type ColorValue,
+  type LayoutChangeEvent,
+  Text,
+  type TextStyle,
+  View,
+  type ViewStyle,
+  VirtualizedList,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+
+/**
+ * Provides a wheel picker with repeating data that can be infinitely scrolled.
+ *
+ * @param properties configuration of the wheel picker
+ */
+export function RepeatingWheelPicker<T>(
+  properties: RepeatingWheelPickerProps<T>
+) {
+  // set defaults for all unprovided optional properties
+  const props = useMemo(() => withDefaults(properties), [properties]);
+  // to always have enough data to scroll through, define how often the input data should be multiplied
+  const dataMultiplier = useMemo(
+    () => Math.max(Math.round(90 / props.data.length), 3),
+    [props.data.length]
+  );
+  // difference between centered index and top most visible index
+  const indexDiffTopToCentered = useMemo(
+    () => Math.floor(props.itemDisplayCount / 2),
+    [props.itemDisplayCount]
+  );
+  // offsets for all list elements
+  const offsets = useMemo((): number[] =>
+    getOffsets(
+      props.data.length,
+      props.itemDisplayCount,
+      props.itemHeight,
+      dataMultiplier),
+    [props.data.length, props.itemDisplayCount, props.itemHeight, dataMultiplier, props.containerVerticalPadding]
+  )
+
+  // current selected item (centered one)
+  const [current, setCurrent] = useState(() =>
+    props.initialIndex + props.data.length * Math.floor(dataMultiplier / 2)
+  );
+  const listRef = useRef<VirtualizedList<T>>(null);
+
+  // call "setSelected" when the current top item or the data changed
+  useEffect(() => {
+    const selectedElement =
+      props.data[current % props.data.length]; // centered element
+
+    if (selectedElement !== undefined) {
+      props.setSelected(selectedElement);
+    }
+  }, [current, props.data]);
+
+  return (
+    <View
+      onLayout={props.containerOnLayout}
+      style={{
+        ...props.containerStyle,
+        height:
+          props.itemHeight * props.itemDisplayCount + props.containerVerticalPadding * 2
+      }}
+    >
+      <VirtualizedList<T>
+        ref={listRef}
+        scrollEnabled={props.enabled}
+        getItemCount={() => props.data.length * dataMultiplier}
+
+        initialScrollIndex={current - indexDiffTopToCentered}
+        initialNumToRender={props.data.length * dataMultiplier}
+        windowSize={props.data.length * dataMultiplier}
+
+        renderItem={({ item, index }) => (
+          <Item item={item} props={props} key={index} />
+        )}
+        getItem={(_, index) =>
+          props.data[index % props.data.length]!
+        }
+        getItemLayout={(_, index) => ({
+          length: props.itemHeight,
+          offset: offsets[index]!,
+          index: index,
+        })}
+        keyExtractor={(_, index) => `${index}`}
+
+        // disableIntervalMomentum={true}
+        decelerationRate="fast"
+        snapToOffsets={offsets}
+
+        onMomentumScrollEnd={(event) =>
+          onMomentumScrollEnd(
+            event.nativeEvent.contentOffset.y,
+            setCurrent,
+            props.data.length,
+            props.itemHeight,
+            dataMultiplier,
+            indexDiffTopToCentered,
+            props.containerVerticalPadding,
+            listRef
+          )
+        }
+
+        showsVerticalScrollIndicator={false}
+        style={{
+          flex: 1,
+          width: "100%",
+          borderRadius: props.containerStyle.borderRadius,
+          paddingVertical: props.containerVerticalPadding,
+          paddingHorizontal: props.containerHorizontalPadding
+        }}
+      />
+
+      { props.enableGradient &&
+        <View
+          style={{
+            backgroundColor: "transparent",
+            position: "absolute",
+            height: "100%",
+            width: "100%"
+          }}
+        >
+          <FrontGradient gradientFadeColor={props.gradientFadeColor} borderRadius={props.containerStyle.borderRadius} />
+        </View>
+      }
+    </View>
+  );
+}
+
+function Item<T>({
+  item,
+  props,
+}: {
+  item: T;
+  props: RepeatingWheelPickerPropsWithDefaults<T>;
+}) {
+
+  return (
+    <View
+      style={{
+        justifyContent: "center",
+        alignContent: "center",
+        backgroundColor: "transparent",
+        ...props.itemContainerStyle,
+        paddingVertical: 0,
+        height: props.itemHeight,
+      }}
+    >
+      <Text style={{ textAlign: "center", ...props.itemTextStyle }}>
+        {props.getLabel(item)}
+      </Text>
+    </View>
+  );
+}
+
+function FrontGradient({ gradientFadeColor, borderRadius }: { gradientFadeColor: ColorValue, borderRadius: string | AnimatableNumericValue | undefined }) {
+
+  return (
+    <LinearGradient
+      colors={[gradientFadeColor, "transparent", gradientFadeColor]}
+      style={{
+        height: "100%",
+        width: "100%",
+        backgroundColor: "transparent",
+        borderRadius: borderRadius
+      }}
+    />
+  );
+}
+
+function getOffsets(
+  dataLength: number,
+  itemDisplayCount: number,
+  itemHeight: number,
+  dataMultiplier: number
+) {
+  let offsets = [];
+
+  // calculate offset for all items
+  for (let i = 0; i < dataLength * dataMultiplier; i++) {
+    offsets[i] = itemOffset(
+      i,
+      itemDisplayCount,
+      itemHeight
+    );
+  }
+
+  return offsets;
+}
+
+function itemOffset(
+  index: number,
+  itemDisplayCount: number,
+  itemHeight: number
+) {
+
+  return (index + (itemDisplayCount % 2 === 0 ? 0.5 : 0)) * itemHeight;
+}
+
+function onMomentumScrollEnd<T>(
+  offset: number,
+  setCurrent: (n: number) => void,
+  dataLength: number,
+  itemHeight: number,
+  dataMultiplier: number,
+  indexDiffTopToCentered: number,
+  verticalPadding: number,
+  ref: RefObject<VirtualizedList<T> | null>
+) {
+  // offset excluding padding
+  const innerOffset = offset - verticalPadding;
+  // get index of top most completely visible item
+  const currentTopIndex = Math.round(innerOffset / itemHeight);
+
+  // get current section within whole extended data (data * dataMultiplier)
+  // section 0 = [0, data.length)
+  // section 1 = [data.length, data.length * 2)
+  // ...
+  const currentSection = Math.floor(innerOffset / (dataLength * itemHeight));
+  // target section is always the middle one, so user can scroll seemingly infinitely
+  const targetSection = Math.floor(dataMultiplier / 2);
+
+  // get corresponding index of current top index in target section
+  const targetTopIndex =
+    currentTopIndex + (targetSection - currentSection) * dataLength;
+  // set current index to centered one, if `targetTopIndex`was at the top
+  setCurrent(targetTopIndex + indexDiffTopToCentered);
+
+  if (currentSection === targetSection) {
+    // if target section is current section, stay in this section
+    return;
+  }
+
+  // if target section is different from current section, scroll to target
+  const targetOffset = offset + (targetTopIndex - currentTopIndex) * itemHeight;
+  ref.current?.scrollToOffset({ animated: false, offset: targetOffset });
+}
+
+// props
+
+function withDefaults<T>(
+  props: RepeatingWheelPickerProps<T>
+): RepeatingWheelPickerPropsWithDefaults<T> {
+  const defaultBackgroundColor = "black";
+  const defaultTextColor = "white";
+  const defaultTextSize = 18;
+
+  validateProps(props);
+
+  return {
+    ...props,
+
+    // optional
+    containerOnLayout: props.containerOnLayout ?? (() => {}),
+    enabled: props.enabled ?? true,
+
+    getLabel: props.getLabel ?? ((t: T) => `${t}`),
+
+    itemHeight: props.itemHeight ?? (props.itemTextStyle?.fontSize ?? defaultTextSize) + 15,
+    itemDisplayCount: props.itemDisplayCount ?? 3,
+
+    containerVerticalPadding: props.containerVerticalPadding ?? 0,
+    containerHorizontalPadding: props.containerHorizontalPadding ?? 10,
+    containerStyle: {
+      ...props.containerStyle,
+      backgroundColor:
+        props.containerStyle?.backgroundColor ?? defaultBackgroundColor,
+      padding: 0,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+    itemContainerStyle: {
+      ...props.itemContainerStyle,
+      backgroundColor:
+        props.itemContainerStyle?.backgroundColor ?? "transparent",
+      justifyContent: props.itemContainerStyle?.justifyContent ?? "center"
+    },
+    itemTextStyle: {
+      ...props.itemTextStyle,
+      fontSize: props.itemTextStyle?.fontSize ?? defaultTextSize,
+      color: props.itemTextStyle?.color ?? defaultTextColor,
+    },
+
+    enableGradient: props.enableGradient ?? true,
+    gradientFadeColor: props.gradientFadeColor ?? (props.containerStyle?.backgroundColor ?? defaultBackgroundColor)
+  };
+}
+
+function validateProps<T>(props: RepeatingWheelPickerProps<T>) {
+  if (props.initialIndex < 0 || props.initialIndex >= props.data.length) {
+    throw InvalidPropertiesError(
+      "initialIndex",
+      String(props.initialIndex),
+      "has to be in range [0, data.length)"
+    );
+  }
+
+  if (props.data.length < 2) {
+    throw InvalidPropertiesError(
+      "data.length",
+      String(props.data.length),
+      "has to be larger than 1"
+    );
+  }
+
+  if (props.itemDisplayCount !== undefined && props.itemDisplayCount < 1) {
+    throw InvalidPropertiesError(
+      "itemDisplayCount",
+      String(props.itemDisplayCount),
+      "has to be larger than 0"
+    );
+  }
+  if (props.itemDisplayCount !== undefined && !Number.isInteger(props.itemDisplayCount)) {
+    throw InvalidPropertiesError(
+      "itemDisplayCount",
+      String(props.itemDisplayCount),
+      "has to be an integer"
+    );
+  }
+
+  if (props.itemHeight !== undefined && props.itemHeight < 1) {
+    throw InvalidPropertiesError(
+      "itemHeight",
+      String(props.itemHeight),
+      "has to be larger than 0"
+    );
+  }
+}
+
+function InvalidPropertiesError(
+  propertyName: string,
+  propertyValue: string,
+  violatedConstraint: string
+) {
+  return Error(
+    `Value "${propertyValue}" is invalid for property "${propertyName}": ${violatedConstraint}`
+  ) as InvalidPropertiesError;
+}
+
+interface InvalidPropertiesError extends Error {
+  name: "InvalidPropertiesError";
+}
+
+type RepeatingWheelPickerPropsWithDefaults<T> = RepeatingWheelPickerProps<T> &
+  Required<Omit<RepeatingWheelPickerProps<T>, "containerRef">>;
+
+/**
+ *
+ */
+export type RepeatingWheelPickerProps<T> = {
+  /**
+   * Function to set currently selected element and use it in your application.
+   *
+   * @example
+   * ```ts
+   * const [selected, setSelected] = useState(0);
+   *
+   * return (
+   *   <RepeatingWheelPicker
+   *     setSelected={setSelected}
+   *     //...
+   *   />
+   * );
+   * ```
+   *
+   * @param t currently selected element
+   */
+  setSelected: (t: T) => void;
+  /**
+   * Index to initially center.
+   */
+  initialIndex: number;
+  /**
+   * Data to display.
+   */
+  data: T[];
+
+  /**
+   * Function to retrieve the text to display for an element as a label.
+   *
+   * @defaultValue
+   * ```ts
+   * (t: T) => `${t}`
+   * ```
+   *
+   * @param t element to retrieve label for
+   */
+  getLabel?: (t: T) => string;
+  /**
+   * Function called when the layout of the container changes.
+   *
+   * _Example usage for monitoring the container's height:_
+   * ```ts
+   * const [pickerHeight, setPickerHeight] = useState<number>(0);
+   *
+   * const onLayout = useCallback((event: LayoutChangeEvent) => {
+   *   const { height } = event.nativeEvent.layout;
+   *   setPickerHeight(height);
+   * }, []);
+   *
+   * return (
+   *   <View style={{flexDirection: "row"}}>
+   *     <View style={{height: height}}>
+   *       <Text>Picker label</Text>
+   *     </View>
+   *     <RepeatingWheelPicker
+   *       //...
+   *       containerOnLayout={onLayout}
+   *     />
+   *   </View>
+   * );
+   * ```
+   *
+   * @defaultValue () => {}
+   *
+   * @param event layout change event that triggered `onLayout`
+   */
+  containerOnLayout?: (event: LayoutChangeEvent) => void;
+  /**
+   * Enables / disables scrolling of the wheel picker.
+   *
+   * @defaultValue true
+   */
+  enabled?: boolean;
+
+  /**
+   * Height per displayed item.
+   *
+   * @defaultValue itemTextStyle.fontSize + 15
+   */
+  itemHeight?: number;
+  /**
+   * Number of items to display.
+   *
+   * @defaultValue 3
+   */
+  itemDisplayCount?: number;
+
+  /**
+   * Vertical padding for the container of the wheel picker.
+   *
+   * @defaultValue 0
+   */
+  containerVerticalPadding?: number;
+  /**
+   * Horizontal padding for the container of the wheel picker.
+   *
+   * @defaultValue 10
+   */
+  containerHorizontalPadding?: number;
+  /**
+   * Styling for the container of the wheel picker.
+   *
+   * @defaultValue
+   * ```ts
+   *   {
+   *     backgroundColor: "black"
+   *   }
+   * ```
+   */
+  containerStyle?: ViewStyle;
+  /**
+   * Styling for the container of each element.
+   *
+   * @defaultValue
+   * ```ts
+   *   {
+   *     backgroundColor: "transparent",
+   *     justifyContent: "center"
+   *   }
+   * ```
+   */
+  itemContainerStyle?: ViewStyle;
+  /**
+   * Styling for the text of the elements.
+   *
+   * @defaultValue
+   * ```ts
+   *   {
+   *     fontSize: "18",
+   *     color: "white"
+   *   }
+   * ```
+   */
+  itemTextStyle?: TextStyle;
+
+  /**
+   * If enabled, will show a gradient fade towards the top and bottom of the wheel picker.
+   *
+   * @defaultValue true
+   */
+  enableGradient?: boolean;
+  /**
+   * Color the gradient should fade to at the top and bottom.
+   *
+   * @defaultValue containerStyle.backgroundColor
+   */
+  gradientFadeColor?: ColorValue;
+};