fix: data type not being inferred correctly (#335)

* fix: data type not being inferred correctly

* feat: remove deprecated prop-types

Author: mrlaessig

examples/StarWarsMovieFinder/App.tsx

@@ -1,6 +1,6 @@
 import Autocomplete from 'react-native-autocomplete-input';
 import React, { useEffect, useState } from 'react';
-import { SWAPI, Movies, Movie, filterMovies } from './swapi';
+import { SWAPI, type Movies, filterMovies } from './swapi';
 import { MovieDetails } from './MovieDetails';
 import { Platform, StyleSheet, Text, TouchableOpacity, View, SafeAreaView } from 'react-native';
 
@@ -10,7 +10,7 @@ function StarWarsMovieFinder(): React.ReactElement {
   const queriedMovies = React.useMemo(() => filterMovies(allMovies, query), [allMovies, query]);
 
   const [firstMovieSuggestion] = queriedMovies;
-  const suggestions: Movies = React.useMemo(
+  const suggestions = React.useMemo(
     () =>
       firstMovieSuggestion?.compareTitle(query)
         ? [] // Close suggestion list in case movie title matches query
@@ -40,7 +40,7 @@ function StarWarsMovieFinder(): React.ReactElement {
             placeholder={placeholder}
             flatListProps={{
               keyboardShouldPersistTaps: 'always',
-              keyExtractor: (movie: Movie) => movie.episodeId.toString(),
+              keyExtractor: (movie) => movie.episodeId.toString(),
               renderItem: ({ item }) => (
                 <TouchableOpacity onPress={() => setQuery(item.title)}>
                   <Text style={styles.itemText}>{item.title}</Text>

packages/react-native-autocomplete-input/index.tsx

@@ -1,14 +1,12 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import type {
   FlatListProps,
   TextInputProps,
   StyleProp,
   ViewStyle,
   ListRenderItemInfo,
 } from 'react-native';
-import PropTypes from 'prop-types';
 import { FlatList, Platform, StyleSheet, Text, TextInput, View } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 export type AutocompleteInputProps<Item> = TextInputProps & {
   containerStyle?: StyleProp<ViewStyle>;
@@ -87,7 +85,9 @@ export const AutocompleteInput = React.forwardRef(function AutocompleteInputComp
       )}
     </View>
   );
-});
+}) as <Item, Ref>(
+  props: AutocompleteInputProps<Item> & { ref?: React.ForwardedRef<Ref> },
+) => ReactElement;
 
 const border = {
   borderColor: '#b9b9b9',
@@ -148,57 +148,3 @@ const styles = StyleSheet.create({
 });
 
 export default AutocompleteInput;
-
-AutocompleteInput.propTypes = {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  ...TextInput.propTypes,
-  /**
-   * These styles will be applied to the container which
-   * surrounds the autocomplete component.
-   */
-  containerStyle: ViewPropTypes ? ViewPropTypes.style : PropTypes.object,
-  /**
-   * Assign an array of data objects which should be
-   * rendered in respect to the entered text.
-   */
-  data: PropTypes.array,
-  /**
-   * Props which can be applied to result `FlatList`.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  flatListProps: FlatList.propTypes || PropTypes.object,
-  /**
-   * Set to `true` to hide the suggestion list.
-   */
-  hideResults: PropTypes.bool,
-  /**
-   * These styles will be applied to the container which surrounds
-   * the textInput component.
-   */
-  inputContainerStyle: ViewPropTypes ? ViewPropTypes.style : PropTypes.object,
-  /**
-   * These style will be applied to the result list.
-   */
-  listContainerStyle: ViewPropTypes ? ViewPropTypes.style : PropTypes.object,
-  /**
-   * `onShowResults` will be called when list is going to
-   * show/hide results.
-   */
-  onShowResults: PropTypes.func,
-  /**
-   * `onShowResults` will be called when list is going to
-   * show/hide results.
-   */
-  onStartShouldSetResponderCapture: PropTypes.func,
-  /**
-   * renders custom TextInput. All props passed to this function.
-   */
-  renderTextInput: PropTypes.func,
-  /**
-   * renders custom result list. Can be used to replace FlatList.
-   * All props passed to this function.
-   */
-  renderResultList: PropTypes.func,
-};

packages/react-native-autocomplete-input/package.json

@@ -40,8 +40,5 @@
     "jest": "^29.4.3",
     "react": "18.3.1",
     "react-native": "0.76.5"
-  },
-  "dependencies": {
-    "deprecated-react-native-prop-types": "^5.0.0"
   }
 }