feat(core): add ref support

package.json

@@ -1,10 +1,13 @@
 {
-  "name": "react-native-wheely",
-  "version": "0.6.0",
+  "name": "@vidit-me/react-native-wheely",
+  "version": "0.7.1",
   "description": "An all JavaScript, highly customizable wheel picker for react-native.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
-  "repository": "https://github.com/erksch/react-native-wheely",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erksch/react-native-wheely.git"
+  },
   "author": "erksch (Erik Ziegler)",
   "license": "MIT",
   "keywords": [
@@ -36,5 +39,12 @@
     "react": "^17.0.2",
     "react-native": "^0.67.3",
     "typescript": "^4.6.2"
+  },
+  "bugs": {
+    "url": "https://github.com/erksch/react-native-wheely/issues"
+  },
+  "homepage": "https://github.com/erksch/react-native-wheely#readme",
+  "directories": {
+    "lib": "lib"
   }
 }

src/WheelPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState, useImperativeHandle, forwardRef } from 'react';
 import {
   StyleProp,
   TextStyle,
@@ -14,6 +14,10 @@ import {
 import styles from './WheelPicker.styles';
 import WheelPickerItem from './WheelPickerItem';
 
+export interface WheelPickerRef {
+    scrollToIndex: (params: { index: number, animated?: boolean }) => void;
+}
+
 interface Props {
   selectedIndex: number;
   options: string[];
@@ -29,26 +33,30 @@ interface Props {
   opacityFunction?: (x: number) => number;
   visibleRest?: number;
   decelerationRate?: 'normal' | 'fast' | number;
-  flatListProps?: Omit<FlatListProps<string | null>, 'data' | 'renderItem'>;
+  flatListProps?: Omit<FlatListProps< string>, 'data' | 'renderItem'>;
 }
 
-const WheelPicker: React.FC<Props> = ({
-  selectedIndex,
-  options,
-  onChange,
-  selectedIndicatorStyle = {},
-  containerStyle = {},
-  itemStyle = {},
-  itemTextStyle = {},
-  itemHeight = 40,
-  scaleFunction = (x: number) => 1.0 ** x,
-  rotationFunction = (x: number) => 1 - Math.pow(1 / 2, x),
-  opacityFunction = (x: number) => Math.pow(1 / 3, x),
-  visibleRest = 2,
-  decelerationRate = 'fast',
-  containerProps = {},
-  flatListProps = {},
-}) => {
+const WheelPicker = forwardRef<WheelPickerRef, Props>(
+    (
+        {
+          selectedIndex,
+          options,
+          onChange,
+          selectedIndicatorStyle = {},
+          containerStyle = {},
+          itemStyle = {},
+          itemTextStyle = {},
+          itemHeight = 40,
+          scaleFunction = (x: number) => 1.0 ** x,
+          rotationFunction = (x: number) => 1 - Math.pow(1 / 2, x),
+          opacityFunction = (x: number) => Math.pow(1 / 3, x),
+          visibleRest = 2,
+          decelerationRate = 'fast',
+          containerProps = {},
+          flatListProps = {},
+        },
+        ref
+    ) => {
   const flatListRef = useRef<FlatList>(null);
   const [scrollY] = useState(new Animated.Value(0));
 
@@ -113,6 +121,13 @@ const WheelPicker: React.FC<Props> = ({
     });
   }, [selectedIndex]);
 
+        // Assuming you want to expose scrollToIndex method to the parent
+useImperativeHandle(ref, () => ({
+    scrollToIndex: (params) => {
+         flatListRef.current?.scrollToIndex(params);
+    },
+}));
+
   return (
     <View
       style={[styles.container, { height: containerHeight }, containerStyle]}
@@ -166,6 +181,9 @@ const WheelPicker: React.FC<Props> = ({
       />
     </View>
   );
-};
+});
+
+WheelPicker.displayName = 'WheelPicker';
+
 
 export default WheelPicker;