chore: add @typescript-eslint/stylistic config and grammar fix in README.md

.eslintrc.yaml

@@ -10,6 +10,7 @@ extends:
   - airbnb/hooks
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
+  - plugin:@typescript-eslint/stylistic
   - plugin:eslint-comments/recommended
   - plugin:import/errors
   - plugin:import/recommended
@@ -42,6 +43,10 @@ plugins:
   - react-hooks
   - react-native
 rules:
+  '@typescript-eslint/array-type':
+    - error
+    - default: 'generic'
+      readonly: 'generic'
   '@typescript-eslint/explicit-function-return-type': error
   '@typescript-eslint/explicit-module-boundary-types': error
   '@typescript-eslint/no-explicit-any':

README.md

@@ -9,12 +9,12 @@
 
 ## Screenshots
 
 <p float="left">
     <img src="https://user-images.githubusercontent.com/56504893/116790110-e0b36880-aac7-11eb-9ebd-196acee64f7a.png"
       width="270" alt="Screenshot showing basic dropdown" />
     <img src="https://user-images.githubusercontent.com/56504893/116789802-faec4700-aac5-11eb-837b-86f18cbfcf3d.png"
       width="270" alt="Screenshot showing badges" />
     <img src="https://user-images.githubusercontent.com/56504893/116789839-2c651280-aac6-11eb-99e0-b43b608ed8c7.png"
       width="270" alt="Screenshot showing dark theme and parent items" />
 </p>
 
@@ -77,7 +77,7 @@
 
 You can find more examples in the `examples` subdirectory. This subdirectory is
 a working [Expo](https://github.com/expo/expo) project demonstrating this
-library. It shows how to use the library with class components as well as
+library. It shows how to use the library with class components as well as with
 function components, and in TypeScript as well as in JavaScript. Navigate into
 the `examples` subdirectory, run `npm install`, and then run `npx expo start` to
 see the examples working.

examples/App.tsx

@@ -1,12 +1,12 @@
 import React, { JSX } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
 import JavascriptClassExample from './example-src-files/javascript-class-example';
 import JavascriptFunctionExample from './example-src-files/javascript-function-example';
 import TypescriptClassExample from './example-src-files/typescript-class-example';
 import TypescriptFunctionExample from './example-src-files/typescript-function-example';
 
 enum ExampleComponent {
   JavaScriptClassSingleValue,
   JavaScriptClassMultiValue,
   JavaScriptFunctionSingleValue,
@@ -66,11 +66,11 @@
 ];
 
 type Props = Record<string, never>;
-type State = {
+interface State {
   currentExample: ExampleComponent;
   examplePickerOpen: boolean;
   exampleComponents: Array<ItemType<ExampleComponent>>;
-};
+}
 
 export default class App extends React.Component<Props, State> {
   constructor(props: Readonly<Props>) {
@@ -85,7 +85,7 @@
     this.setCurrentExample = this.setCurrentExample.bind(this);
   }
 
   private static getExample(egComponent: ExampleComponent): JSX.Element {
     switch (egComponent) {
       case ExampleComponent.JavaScriptClassSingleValue:
         return <JavascriptClassExample multiple={false} />;
@@ -125,17 +125,17 @@
 
   // todo: fix picker items being under text
 
   render(): JSX.Element {
     const { currentExample, examplePickerOpen, exampleComponents } = this.state;
 
     return (
       <View style={styles.container}>
         <View style={{ flex: 1 }}>
           <View style={{ flex: 1 }}>
             <Text>Choose example:</Text>
           </View>
 
           <View style={{ flex: 1 }}>
             <DropDownPicker
               setValue={this.setCurrentExample}
               value={currentExample}
@@ -146,8 +146,8 @@
           </View>
         </View>
 
         <View style={{ flex: 3 }}>
           <View style={{ flex: 1 }}>
             <Text>Example:</Text>
           </View>
 

examples/example-src-files/typescript-class-example.tsx

@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
 import { Button, Text, View } from 'react-native';
 import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
 
-type Props = {
+interface Props {
   multiple: boolean;
-};
-type State = {
+}
+interface State {
   open: boolean;
   singleValue: string | null;
-  multiValue: string[] | null;
+  multiValue: Array<string> | null;
   items: Array<ItemType<string>>;
-};
+}
 
 export default class TypescriptClassExample extends Component<Props, State> {
   constructor(props: Readonly<Props>) {
@@ -67,15 +67,15 @@
     const { open, singleValue, multiValue, items } = this.state;
 
     return (
       <View style={{ flex: 3 }}>
         <View style={{ flex: 1 }}>
           <Text>
             Choose a name (typescript class,{' '}
             {multiple ? 'multiple-item' : 'single-item'}):
           </Text>
         </View>
 
         <View style={{ flex: 1 }}>
           {multiple ? (
             <DropDownPicker
               open={open}
@@ -102,7 +102,7 @@
           )}
         </View>
 
         <View style={{ flex: 1 }}>
           <View style={{ flex: 1 }}>
             <Text>
               {multiple ? 'Names currently are: ' : 'Name currently is: '}

examples/example-src-files/typescript-function-example.tsx

@@ -12,7 +12,7 @@ export default function TypescriptFunctionExample(props: {
 }): JSX.Element {
   const [open, setOpen] = useState<boolean>(false);
   const [singleValue, setSingleValue] = useState<string | null>(null);
-  const [multiValue, setMultiValue] = useState<string[] | null>(null);
+  const [multiValue, setMultiValue] = useState<Array<string> | null>(null);
   const [items, setItems] = useState<Array<ItemType<string>>>([
     { label: 'Apple', value: 'apple' },
     { label: 'Banana', value: 'banana' },

examples/package.json

@@ -1,24 +1,24 @@
 {
   "name": "examples",
   "version": "1.0.0",
+  "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
+    "start": "expo start",
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~49.0.9",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^49.0.13",
+    "expo-status-bar": "~1.7.1",
     "react": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "0.72.5",
     "react-native-dropdown-picker": "^5.4.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.15",
-    "@types/react": "~18.2.21",
+    "@babel/core": "^7.23.0",
+    "@types/react": "~18.2.24",
     "typescript": "^5.2.2"
-  },
-  "private": true
+  }
 }

index.d.ts

@@ -22,7 +22,7 @@ declare module 'react-native-dropdown-picker' {
 
   export type ValueType = string | number | boolean;
 
-  export type ItemType<T extends ValueType> = {
+  export interface ItemType<T extends ValueType> {
     containerStyle?: StyleProp<ViewStyle>;
     disabled?: boolean;
     icon?: () => JSX.Element;
@@ -32,7 +32,7 @@ declare module 'react-native-dropdown-picker' {
     selectable?: boolean;
     testID?: string;
     value?: T;
-  };
+  }
 
   export type ModeType = 'DEFAULT' | 'SIMPLE' | 'BADGE';