feat: initial implementation of Alphabet component

Author: amnesia

example/babel.config.js

@@ -10,6 +10,7 @@ module.exports = function (api) {
   return getConfig(
     {
       presets: ['babel-preset-expo'],
+      plugins: ['react-native-reanimated/plugin'],
     },
     { root, pkg }
   );

example/metro.config.js

@@ -1,19 +1,23 @@
 const path = require('path');
 const { getDefaultConfig } = require('@expo/metro-config');
-const { withMetroConfig } = require('react-native-monorepo-config');
-
-const root = path.resolve(__dirname, '..');
 
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = withMetroConfig(getDefaultConfig(__dirname), {
-  root,
-  dirname: __dirname,
-});
+const config = getDefaultConfig(__dirname);
+
+// Allow resolving the local library from one directory up
+config.resolver.unstable_enableSymlinks = true;
+config.watchFolders = [path.resolve(__dirname, '..')];
+
+// Map the package name to the local library path
+config.resolver.extraNodeModules = {
+  // Point directly to the source folder so you can run without building lib/
+  'react-native-alphabet': path.resolve(__dirname, '..', 'src'),
+};
 
 config.resolver.unstable_enablePackageExports = true;
 

example/package.json

@@ -14,7 +14,9 @@
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.6",
+    "react-native": "0.79.5",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
     "react-native-web": "~0.20.0"
   },
   "devDependencies": {

example/src/App.tsx

@@ -1,20 +1,16 @@
-import { Text, View, StyleSheet } from 'react-native';
-import { multiply } from 'react-native-alphabet';
-
-const result = multiply(3, 7);
+import { View, StyleSheet } from 'react-native';
+import Alphabet from 'react-native-alphabet';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <Alphabet data={['A', 'B', 'C']} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
   },
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-alphabet",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Description",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -49,7 +49,7 @@
     "type": "git",
     "url": "git+https://github.com/kokurin-michael/react-native-alphabet.git"
   },
-  "author": "amnesia <amnesia@amnesia> (https://github.com/kokurin-michael)",
+  "author": "Kokurin Michael <[email protected]> (https://github.com/kokurin-michael)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/kokurin-michael/react-native-alphabet/issues"
@@ -79,12 +79,16 @@
     "react": "19.0.0",
     "react-native": "0.79.6",
     "react-native-builder-bob": "^0.40.13",
+    "react-native-gesture-handler": "^2.16.0",
+    "react-native-reanimated": "^3.18.0",
     "release-it": "^17.10.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0"
   },
   "workspaces": [
     "example"

src/Alphabet.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+import type { AlphabetProps } from './types';
+
+const Alphabet = (props: AlphabetProps) => {
+  const ref = useRef<View | null>(null);
+  const height = useRef(1);
+  const lastIndexRef = useRef(-1);
+
+  const handle = useCallback(
+    (localY: number) => {
+      const data = props.data;
+      const length = data?.length ?? 0;
+      if (!data || length === 0) return;
+
+      const yRel = Math.max(0, Math.min(height.current, localY));
+      const itemH = height.current / length;
+      const idx = Math.max(0, Math.min(length - 1, Math.floor(yRel / itemH)));
+
+      if (idx !== lastIndexRef.current) {
+        lastIndexRef.current = idx;
+        props.onCharSelect?.(data[idx]!);
+      }
+    },
+    [props]
+  );
+
+  const tap = useMemo(
+    () =>
+      Gesture.Tap()
+        .hitSlop(props.hitSlop)
+        .onEnd((e) => {
+          runOnJS(handle)(e.y);
+        }),
+    [handle, props.hitSlop]
+  );
+
+  const pan = useMemo(
+    () =>
+      Gesture.Pan()
+        .minDistance(4)
+        .onChange((e) => {
+          runOnJS(handle)(e.y);
+        })
+        .onFinalize(() => {
+          lastIndexRef.current = -1;
+        }),
+    [handle]
+  );
+
+  const gesture = useMemo(() => Gesture.Race(tap, pan), [tap, pan]);
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <View
+        ref={ref}
+        style={props.containerStyle}
+        onLayout={(e) => {
+          height.current = e.nativeEvent.layout.height;
+        }}
+      >
+        {props.data?.map((letter) => (
+          <View key={letter} style={props.charContainerStyle}>
+            <Text style={props.charStyle}>{letter}</Text>
+          </View>
+        ))}
+      </View>
+    </GestureDetector>
+  );
+};
+
+export default Alphabet;

src/index.tsx

@@ -1,3 +1,2 @@
-export function multiply(a: number, b: number): number {
-  return a * b;
-}
+export * from './types';
+export { default } from './Alphabet';

src/types.tsx

@@ -0,0 +1,13 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HitSlop } from 'react-native-gesture-handler/lib/typescript/handlers/gestureHandlerCommon';
+
+interface AlphabetProps {
+  data?: string[];
+  containerStyle?: StyleProp<ViewStyle>;
+  charContainerStyle?: StyleProp<ViewStyle>;
+  charStyle?: StyleProp<TextStyle>;
+  onCharSelect?: (char: string) => void;
+  hitSlop?: HitSlop;
+}
+
+export type { AlphabetProps };