react-native-input-autosuggest 0.1.0-rc1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 VLS
+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,37 @@
+# react-native-input-autosuggest
+
+input autosuggest react native
+
+## Installation
+
+
+```sh
+npm install react-native-input-autosuggest
+```
+
+
+## Usage
+
+
+```js
+import { multiply } from 'react-native-input-autosuggest';
+
+// ...
+
+const result = await multiply(3, 7);
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+import React, { useEffect, useState } from 'react';
+import { View, TextInput, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const suggestions = [{
+  id: '1',
+  name: 'Suggestion 1'
+}, {
+  id: '2',
+  name: 'Suggestion 2'
+}, {
+  id: '3',
+  name: 'Suggestion 3'
+}, {
+  id: '4',
+  name: 'Suggestion 4'
+}, {
+  id: '5',
+  name: 'Suggestion 5'
+}];
+export const InputAutoSugest = () => {
+  const [inputText, setInputText] = useState('');
+  const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+  const handleSelect = item => {
+    setInputText(item.name);
+  };
+  const renderItem = ({
+    item
+  }) => /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: styles.suggestionItem,
+    onPress: () => handleSelect(item),
+    children: /*#__PURE__*/_jsx(Text, {
+      children: item.name
+    })
+  });
+  useEffect(() => {
+    var filtered = [];
+    if (inputText.length > 0) {
+      filtered = suggestions.filter(item => item.name.toLowerCase().includes(inputText.toLowerCase()));
+    }
+    setFilteredSuggestions(filtered);
+  }, [inputText, suggestions]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      style: styles.input,
+      value: inputText,
+      onChangeText: setInputText
+    }), filteredSuggestions.length > 0 && /*#__PURE__*/_jsx(FlatList, {
+      data: filteredSuggestions,
+      keyExtractor: item => item.id,
+      renderItem: renderItem,
+      style: styles.suggestionsList
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1 // Ensure suggestions appear above other content
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    padding: 10,
+    borderRadius: 5
+  },
+  suggestionsList: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderTopWidth: 0,
+    maxHeight: 200 // Limit height of the suggestion list
+  },
+  suggestionItem: {
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee'
+  }
+});
+export default InputAutoSugest;
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","View","TextInput","FlatList","Text","TouchableOpacity","StyleSheet","jsx","_jsx","jsxs","_jsxs","suggestions","id","name","InputAutoSugest","inputText","setInputText","filteredSuggestions","setFilteredSuggestions","handleSelect","item","renderItem","style","styles","suggestionItem","onPress","children","filtered","length","filter","toLowerCase","includes","container","input","value","onChangeText","data","keyExtractor","suggestionsList","create","zIndex","borderWidth","borderColor","padding","borderRadius","borderTopWidth","maxHeight","borderBottomWidth","borderBottomColor"],"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,4 @@
+import React from 'react';
+export declare const InputAutoSugest: React.FC;
+export default InputAutoSugest;
+//# 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":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAgBjD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA0CrC,CAAC;AAyBF,eAAe,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "react-native-input-autosuggest",
+  "version": "0.1.0-rc1",
+  "description": "input autosuggest react native",
+  "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": {
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vinils/react-native-input-autosuggest.git"
+  },
+  "author": "VLS <vini_ls@hotmail.com> (https://github.com/vinils)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vinils/react-native-input-autosuggest/issues"
+  },
+  "homepage": "https://github.com/vinils/react-native-input-autosuggest#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "@types/react-native": "^0.73.0",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^2.8.8",
+    "react-native": "^0.82.1",
+    "react-native-builder-bob": "^0.40.13",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "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",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "create-react-native-library": {
+    "typescript": true,
+    "languages": "js",
+    "type": "library",
+    "tools": [
+      "eslint",
+      "jest"
+    ],
+    "version": "0.55.1"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { View, TextInput, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+interface Suggestion {
+  id: string;
+  name: string;
+}
+
+const suggestions: Suggestion[] = [
+  { id: '1', name: 'Suggestion 1' },
+  { id: '2', name: 'Suggestion 2' },
+  { id: '3', name: 'Suggestion 3' },
+  { id: '4', name: 'Suggestion 4' },
+  { id: '5', name: 'Suggestion 5' },
+];
+
+  export const InputAutoSugest: React.FC = () => {
+  const [inputText, setInputText] = useState<string>('');
+  const [filteredSuggestions, setFilteredSuggestions] = useState<Suggestion[]>([]);
+
+  const handleSelect = (item: Suggestion) => {
+    setInputText(item.name);
+  };
+
+  const renderItem = ({ item }: { item: Suggestion }) => (
+    <TouchableOpacity style={styles.suggestionItem} onPress={() => handleSelect(item)}>
+      <Text>{item.name}</Text>
+    </TouchableOpacity>
+  );
+
+  useEffect(() => {
+    var filtered: Suggestion[] = [];
+
+    if (inputText.length > 0) {
+      filtered = suggestions.filter(item =>
+        item.name.toLowerCase().includes(inputText.toLowerCase())
+      );
+    }
+    setFilteredSuggestions(filtered);
+  }, [inputText, suggestions]);
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={styles.input}
+        value={inputText}
+        onChangeText={setInputText}
+      />
+      {filteredSuggestions.length > 0 && (
+        <FlatList
+          data={filteredSuggestions}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+          style={styles.suggestionsList}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1, // Ensure suggestions appear above other content
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    padding: 10,
+    borderRadius: 5,
+  },
+  suggestionsList: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderTopWidth: 0,
+    maxHeight: 200, // Limit height of the suggestion list
+  },
+  suggestionItem: {
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+});
+
+export default InputAutoSugest;