rn-searchable-textinput 0.1.1 → 2.0.1

package/lib/typescript/src/styles/defaultStyles.d.ts

@@ -0,0 +1,63 @@
+export declare const styles: Readonly<{
+    container: {
+        position: "relative";
+        zIndex: number;
+        elevation: number;
+        width: string;
+    };
+    inputWrapper: {
+        justifyContent: "center";
+    };
+    input: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        fontSize: number;
+        backgroundColor: string;
+        color: string;
+    };
+    clearButton: {
+        position: "absolute";
+        right: number;
+        padding: number;
+    };
+    clearIcon: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+    };
+    dropdown: {
+        position: "absolute";
+        backgroundColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        overflow: "hidden";
+    };
+    item: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    itemText: {
+        fontSize: number;
+        color: string;
+    };
+    loader: {
+        padding: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+}>;
+//# sourceMappingURL=defaultStyles.d.ts.map

package/lib/typescript/src/styles/defaultStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultStyles.d.ts","sourceRoot":"","sources":["../../../../src/styles/defaultStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DjB,CAAC"}

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

@@ -0,0 +1,27 @@
+import type { TextInputProps, ViewStyle, TextStyle, StyleProp } from 'react-native';
+import React from 'react';
+export interface SearchableTextInputProps<T> extends Omit<TextInputProps, 'value'> {
+    data: T[];
+    searchKey: keyof T | ((item: T) => string);
+    value: string;
+    onSelect: (item: T) => void;
+    debounceDelay?: number;
+    maxDropdownHeight?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    dropdownStyle?: StyleProp<ViewStyle>;
+    itemStyle?: StyleProp<ViewStyle>;
+    itemTextStyle?: StyleProp<TextStyle>;
+    renderItem?: (item: T, isSelected: boolean) => React.ReactElement;
+    keyExtractor?: (item: T, index: number) => string;
+    isLoading?: boolean;
+    ListEmptyComponent?: React.ReactElement;
+    showClearButton?: boolean;
+    onClear?: () => void;
+}
+export interface DropdownLayoutMetrics {
+    position: 'bottom' | 'top';
+    width: number;
+    inputHeight: number;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,wBAAwB,CAAC,CAAC,CAAE,SAAQ,IAAI,CACvD,cAAc,EACd,OAAO,CACR;IACC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,YAAY,CAAC;IAClE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB"}

package/package.json

@@ -1,27 +1,177 @@
 {
   "name": "rn-searchable-textinput",
-  "version": "0.1.1",
-  "description": "Searchable text input component which can be fully customized.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "version": "2.0.1",
+  "description": "A lightweight, zero-dependency, highly customizable searchable text input for React Native.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "rn-searchable-textinput-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pratik8442/rn-searchable-textinput.git"
+  "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 rn-searchable-textinput-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
   },
   "keywords": [
-    "text-search",
-    "text-input-search",
-    "searchable-textinput",
     "react-native",
-    "react native",
-    "text-input"
+    "ios",
+    "android",
+    "searchable-textinput",
+    "autocomplete",
+    "searchable-dropdown",
+    "picker",
+    "searchable-picker",
+    "react-native-search",
+    "typescript"
   ],
-  "author": "Pratik Sanap",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dev-pratik-sanap.git"
+  },
+  "author": "Pratik <pratiksanap007@gmail.com> (https://www.npmjs.com/~pratik8442)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/pratik8442/rn-searchable-textinput/issues"
+    "url": "https://github.com/dev-pratik-sanap/issues"
+  },
+  "homepage": "https://github.com/dev-pratik-sanap#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@release-it/conventional-changelog": "^11.0.1",
+    "@types/react": "^19.2.0",
+    "commitlint": "^21.0.2",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.3",
+    "react": "19.2.0",
+    "react-native": "0.83.10",
+    "react-native-builder-bob": "^0.43.0",
+    "release-it": "^20.2.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "require",
+        "react-native",
+        "<%- project.sourceCondition -%>"
+      ]
+    },
+    "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"
+        }
+      }
+    }
   },
-  "homepage": "https://github.com/pratik8442/rn-searchable-textinput#readme"
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.63.0"
+  }
 }

package/src/components/Dropdown.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+} from 'react-native';
+import { styles } from '../styles/defaultStyles';
+import type { DropdownLayoutMetrics } from '../types';
+
+interface DropdownProps<T> {
+  visible: boolean;
+  data: T[];
+  metrics: DropdownLayoutMetrics | null;
+  maxHeight: number;
+  onSelect: (item: T) => void;
+  getLabel: (item: T) => string;
+  dropdownStyle?: any;
+  itemStyle?: any;
+  itemTextStyle?: any;
+  renderItem?: (item: T, isSelected: boolean) => React.ReactElement;
+  keyExtractor?: (item: T, index: number) => string;
+  isLoading?: boolean;
+  ListEmptyComponent?: React.ReactElement;
+}
+
+export function Dropdown<T>({
+  visible,
+  data,
+  metrics,
+  maxHeight,
+  onSelect,
+  getLabel,
+  dropdownStyle,
+  itemStyle,
+  itemTextStyle,
+  renderItem,
+  keyExtractor,
+  isLoading,
+  ListEmptyComponent,
+}: DropdownProps<T>) {
+  if (
+    !visible ||
+    !metrics ||
+    (!isLoading && data.length === 0 && !ListEmptyComponent)
+  )
+    return null;
+
+  const dynamicStyle =
+    metrics.position === 'bottom'
+      ? { top: metrics.inputHeight + 4 }
+      : { bottom: metrics.inputHeight + 4 };
+
+  return (
+    <View
+      style={[
+        styles.dropdown,
+        dynamicStyle,
+        dropdownStyle,
+        { maxHeight, width: metrics.width },
+      ]}
+    >
+      {isLoading ? (
+        <View style={styles.loader}>
+          <ActivityIndicator size="small" color="#6b7280" />
+        </View>
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={keyExtractor || ((_, index) => index.toString())}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+          nestedScrollEnabled={true}
+          ListEmptyComponent={ListEmptyComponent}
+          renderItem={({ item }) => {
+            if (renderItem) {
+              return (
+                <TouchableOpacity onPress={() => onSelect(item)}>
+                  {renderItem(item, false)}
+                </TouchableOpacity>
+              );
+            }
+            return (
+              <TouchableOpacity
+                style={[styles.item, itemStyle]}
+                onPress={() => onSelect(item)}
+              >
+                <Text style={[styles.itemText, itemTextStyle]}>
+                  {getLabel(item)}
+                </Text>
+              </TouchableOpacity>
+            );
+          }}
+        />
+      )}
+    </View>
+  );
+}

package/src/components/SearchableTextInput.tsx

@@ -0,0 +1,130 @@
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { View, TextInput, TouchableOpacity, Text } from 'react-native';
+import { Dropdown } from './Dropdown';
+import { useDebounce } from '../hooks/useDebounce';
+import { useDropdownLayout } from '../hooks/useDropdownLayout';
+import { styles } from '../styles/defaultStyles';
+import type { SearchableTextInputProps } from '../types';
+
+export function SearchableTextInput<T>(props: SearchableTextInputProps<T>) {
+  const {
+    data,
+    searchKey,
+    value,
+    onSelect,
+    placeholder = 'Search...',
+    debounceDelay = 200,
+    maxDropdownHeight = 250,
+    containerStyle,
+    inputStyle,
+    isLoading,
+    ListEmptyComponent,
+    showClearButton,
+    onClear,
+    ...rest
+  } = props;
+
+  const inputRef = useRef<any>(null);
+  const [searchText, setSearchText] = useState(value);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const searchKeyRef = useRef(searchKey);
+  useEffect(() => {
+    searchKeyRef.current = searchKey;
+  }, [searchKey]);
+
+  const debouncedSearchText = useDebounce(searchText, debounceDelay);
+  const { metrics, measureLayout, setMetrics } = useDropdownLayout(
+    inputRef,
+    maxDropdownHeight
+  );
+
+  useEffect(() => setSearchText(value), [value]);
+
+  const getLabel = useCallback((item: T) => {
+    if (typeof searchKeyRef.current === 'function')
+      return searchKeyRef.current(item);
+    return String(item[searchKeyRef.current] || '');
+  }, []);
+
+  const filteredData = useMemo(() => {
+    if (!debouncedSearchText) return data;
+    const lowerSearch = debouncedSearchText.toLowerCase();
+    return data.filter((item) =>
+      getLabel(item).toLowerCase().includes(lowerSearch)
+    );
+  }, [data, debouncedSearchText, getLabel]);
+
+  const handleFocus = () => {
+    measureLayout();
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    // Allows tap events on the list to register before unmounting
+    setTimeout(() => {
+      setIsFocused(false);
+      setMetrics(null);
+    }, 200);
+  };
+
+  const handleSelect = (item: T) => {
+    setSearchText(getLabel(item));
+    setIsFocused(false);
+    onSelect(item);
+  };
+
+  const handleClear = () => {
+    setSearchText('');
+    if (onClear) onClear();
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]} ref={inputRef}>
+      <View style={styles.inputWrapper}>
+        <TextInput
+          style={[
+            styles.input,
+            inputStyle,
+            showClearButton && { paddingRight: 40 },
+          ]}
+          value={searchText}
+          onChangeText={(text) => {
+            setSearchText(text);
+            if (!isFocused) setIsFocused(true);
+          }}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          placeholderTextColor="#9ca3af"
+        />
+
+        {showClearButton && searchText.length > 0 && (
+          <TouchableOpacity style={styles.clearButton} onPress={handleClear}>
+            <Text style={styles.clearIcon}>✕</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <Dropdown
+        visible={
+          isFocused &&
+          ((searchText.length > 0 && debouncedSearchText.length > 0) ||
+            isLoading === true)
+        }
+        data={filteredData}
+        metrics={metrics}
+        maxHeight={maxDropdownHeight}
+        onSelect={handleSelect}
+        getLabel={getLabel}
+        dropdownStyle={rest.dropdownStyle}
+        itemStyle={rest.itemStyle}
+        itemTextStyle={rest.itemTextStyle}
+        renderItem={rest.renderItem}
+        keyExtractor={rest.keyExtractor}
+        isLoading={isLoading}
+        ListEmptyComponent={ListEmptyComponent}
+      />
+    </View>
+  );
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/useDropdownLayout.ts

@@ -0,0 +1,27 @@
+import React, { useState, useCallback, type RefObject } from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import type { DropdownLayoutMetrics } from '../types';
+
+export const useDropdownLayout = (
+  inputRef: RefObject<React.ElementRef<typeof View>>, // 👈 Fix is here
+  maxDropdownHeight: number
+) => {
+  const [metrics, setMetrics] = useState<DropdownLayoutMetrics | null>(null);
+  const { height: screenHeight } = useWindowDimensions();
+
+  const measureLayout = useCallback(() => {
+    inputRef.current?.measure((_fx, _fy, width, height, _px, py) => {
+      const spaceBelow = screenHeight - (py + height);
+      const spaceAbove = py;
+
+      const position =
+        spaceBelow < maxDropdownHeight && spaceAbove > spaceBelow
+          ? 'top'
+          : 'bottom';
+
+      setMetrics({ position, width, inputHeight: height });
+    });
+  }, [inputRef, screenHeight, maxDropdownHeight]);
+
+  return { metrics, measureLayout, setMetrics };
+};

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { SearchableTextInput } from './components/SearchableTextInput';
+export type { SearchableTextInputProps } from './types';

package/src/styles/defaultStyles.ts

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    zIndex: 1000,
+    elevation: 1000,
+    width: '100%',
+  },
+  inputWrapper: {
+    justifyContent: 'center',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 16,
+    backgroundColor: '#ffffff',
+    color: '#1f2937',
+  },
+  clearButton: {
+    position: 'absolute',
+    right: 12,
+    padding: 6,
+  },
+  clearIcon: {
+    fontSize: 16,
+    color: '#9ca3af',
+    fontWeight: '600',
+  },
+  dropdown: {
+    position: 'absolute',
+    backgroundColor: '#ffffff',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    // iOS Shadow
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 12,
+    // Android Shadow
+    elevation: 5,
+    overflow: 'hidden',
+  },
+  item: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f3f4f6',
+  },
+  itemText: {
+    fontSize: 16,
+    color: '#374151',
+  },
+  loader: {
+    padding: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/types/index.ts

@@ -0,0 +1,36 @@
+import type {
+  TextInputProps,
+  ViewStyle,
+  TextStyle,
+  StyleProp,
+} from 'react-native';
+import React from 'react';
+
+export interface SearchableTextInputProps<T> extends Omit<
+  TextInputProps,
+  'value'
+> {
+  data: T[];
+  searchKey: keyof T | ((item: T) => string);
+  value: string;
+  onSelect: (item: T) => void;
+  debounceDelay?: number;
+  maxDropdownHeight?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  dropdownStyle?: StyleProp<ViewStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  itemTextStyle?: StyleProp<TextStyle>;
+  renderItem?: (item: T, isSelected: boolean) => React.ReactElement;
+  keyExtractor?: (item: T, index: number) => string;
+  isLoading?: boolean;
+  ListEmptyComponent?: React.ReactElement;
+  showClearButton?: boolean;
+  onClear?: () => void;
+}
+
+export interface DropdownLayoutMetrics {
+  position: 'bottom' | 'top';
+  width: number;
+  inputHeight: number;
+}