linter config

Author: Alexandr Kozhevnikov

.eslintrc.js

@@ -1,7 +1,14 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: ['@react-native-community', 'plugin:prettier/recommended', 'prettier'],
+  plugins: ['react', 'unused-imports', 'prettier'],
   rules: {
+    'no-unused-vars': 'off', // or "@typescript-eslint/no-unused-vars": "off",
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'warn',
+      { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' }
+    ],
     'prettier/prettier': [
       'error',
       {
@@ -10,14 +17,15 @@ module.exports = {
         bracketSameLine: true,
         bracketSpacing: true,
         singleQuote: true,
-        trailingComma: 'all',
+        trailingComma: 'none',
         tabWidth: 2,
         useTabs: false,
-        semi: false,
-      },
+        semi: false
+      }
     ],
     semi: 'off',
+    'comma-dangle': ['warn', 'never'],
     'react-native/no-inline-styles': 'off',
-    'react-hooks/exhaustive-deps': 'off',
-  },
+    'react-hooks/exhaustive-deps': 'off'
+  }
 }

example/App.js

@@ -8,7 +8,7 @@ import {
   useColorScheme,
   View,
   Platform,
-  KeyboardAvoidingView,
+  KeyboardAvoidingView
 } from 'react-native'
 
 import { Colors } from 'react-native/Libraries/NewAppScreen'
@@ -22,7 +22,7 @@ const App = () => {
   const isDarkMode = useColorScheme() === 'dark'
 
   const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter
   }
 
   return (
@@ -70,23 +70,23 @@ const App = () => {
 
 const styles = StyleSheet.create({
   scrollContainer: {
-    flex: 1,
+    flex: 1
   },
   container: {
-    padding: 20,
+    padding: 20
   },
   title: {
     textAlign: 'center',
     fontSize: 25,
-    marginBottom: 50,
+    marginBottom: 50
   },
   section: {
-    marginBottom: 40,
+    marginBottom: 40
   },
   sectionTitle: {
     fontWeight: 'bold',
-    marginBottom: 3,
-  },
+    marginBottom: 3
+  }
 })
 
 export default App

example/components/LocalDataSetExample.js

@@ -15,7 +15,7 @@ export const LocalDataSetExample = memo(() => {
         dataSet={[
           { id: '1', title: 'Alpha' },
           { id: '2', title: 'Beta' },
-          { id: '3', title: 'Gamma' },
+          { id: '3', title: 'Gamma' }
         ]}
       />
       <Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>

example/components/LocalDataSetExample2.js

@@ -14,7 +14,7 @@ export const LocalDataSetExample2 = memo(() => {
         dataSet={[
           { id: '1', title: '🐑' },
           { id: '2', title: '✨' },
-          { id: '3', title: '👌' },
+          { id: '3', title: '👌' }
         ]}
         suggestionsListMaxHeight={500}
         renderItem={(item, text) => (

example/components/RemoteDataSetExample.js

@@ -15,16 +15,19 @@ export const RemoteDataSetExample = memo(() => {
       return
     }
     setLoading(true)
-    const response = await fetch('https://jsonplaceholder.typicode.com/posts').then((data) => new Promise(res => {
-      setTimeout(() => res(data), 2000) // imitate of a long response
-    }))
+    const response = await fetch('https://jsonplaceholder.typicode.com/posts').then(
+      data =>
+        new Promise(res => {
+          setTimeout(() => res(data), 2000) // imitate of a long response
+        })
+    )
     const items = await response.json()
 
     const suggestions = items
       .filter(item => item.title.toLowerCase().includes(filterToken))
       .map(item => ({
         id: item.id,
-        title: item.title,
+        title: item.title
       }))
 
     setRemoteDataSet(suggestions)
@@ -39,13 +42,13 @@ export const RemoteDataSetExample = memo(() => {
         useFilter={false}
         clearOnFocus={false}
         textInputProps={{
-          placeholder: 'Start typing est...',
+          placeholder: 'Start typing est...'
         }}
         onSelectItem={setSelectedItem}
         loading={loading}
         onChangeText={getSuggestions}
         suggestionsListTextStyle={{
-          color: '#8f3c96',
+          color: '#8f3c96'
         }}
         EmptyResultComponent={<Text style={{ padding: 10, fontSize: 15 }}>Oops ¯\_(ツ)_/¯</Text>}
       />

example/components/RemoteDataSetExample2.js

@@ -27,7 +27,7 @@ export const RemoteDataSetExample2 = memo(() => {
       .filter(item => item.title.toLowerCase().includes(filterToken))
       .map(item => ({
         id: item.id,
-        title: item.title,
+        title: item.title
       }))
     setSuggestionsList(suggestions)
     setLoading(false)
@@ -44,7 +44,7 @@ export const RemoteDataSetExample2 = memo(() => {
       <View
         style={[
           { flex: 1, flexDirection: 'row', alignItems: 'center' },
-          Platform.select({ ios: { zIndex: 1 } }),
+          Platform.select({ ios: { zIndex: 1 } })
         ]}>
         <AutocompleteDropdown
           ref={searchRef}
@@ -73,21 +73,21 @@ export const RemoteDataSetExample2 = memo(() => {
               borderRadius: 25,
               backgroundColor: '#383b42',
               color: '#fff',
-              paddingLeft: 18,
-            },
+              paddingLeft: 18
+            }
           }}
           rightButtonsContainerStyle={{
             right: 8,
             height: 30,
 
-            alignSelf: 'center',
+            alignSelf: 'center'
           }}
           inputContainerStyle={{
             backgroundColor: '#383b42',
-            borderRadius: 25,
+            borderRadius: 25
           }}
           suggestionsListContainerStyle={{
-            backgroundColor: '#383b42',
+            backgroundColor: '#383b42'
           }}
           containerStyle={{ flexGrow: 1, flexShrink: 1 }}
           renderItem={(item, text) => <Text style={{ color: '#fff', padding: 15 }}>{item.title}</Text>}

example/components/RemoteDataSetExample3.js

@@ -27,7 +27,7 @@ export const RemoteDataSetExample3 = memo(() => {
       .filter(item => item.title.toLowerCase().includes(filterToken))
       .map(item => ({
         id: item.id,
-        title: item.title,
+        title: item.title
       }))
     setSuggestionsList(suggestions)
     setLoading(false)
@@ -44,7 +44,7 @@ export const RemoteDataSetExample3 = memo(() => {
       <View
         style={[
           { flex: 1, flexDirection: 'row', alignItems: 'center' },
-          Platform.select({ ios: { zIndex: 1 } }),
+          Platform.select({ ios: { zIndex: 1 } })
         ]}>
         <Button style={{ flexGrow: 0 }} title="Clear" onPress={() => dropdownController.current.clear()} />
         <View style={{ width: 10 }} />
@@ -74,12 +74,12 @@ export const RemoteDataSetExample3 = memo(() => {
             style: {
               borderRadius: 25,
               color: '#383b42',
-              paddingLeft: 18,
-            },
+              paddingLeft: 18
+            }
           }}
           rightButtonsContainerStyle={{
             height: 30,
-            alignSelf: 'center',
+            alignSelf: 'center'
           }}
           inputContainerStyle={{
             borderRadius: 25,
@@ -89,15 +89,15 @@ export const RemoteDataSetExample3 = memo(() => {
             shadowColor: '#00000099',
             shadowOffset: {
               width: 0,
-              height: 5,
+              height: 5
             },
             shadowOpacity: 0.3,
             shadowRadius: 8.46,
 
-            elevation: 13,
+            elevation: 13
           }}
           suggestionsListContainerStyle={{
-            backgroundColor: '#fff',
+            backgroundColor: '#fff'
           }}
           containerStyle={{ flexGrow: 1, flexShrink: 1 }}
           renderItem={(item, text) => {

src/HOC/withFadeAnimation.js

@@ -10,7 +10,7 @@ export const withFadeAnimation = (WrappedComponent, containerStyle) => {
         duration: 800,
         toValue: 1,
         useNativeDriver: true,
-        easing: Easing.bezier(0.3, 0.58, 0.25, 0.99),
+        easing: Easing.bezier(0.3, 0.58, 0.25, 0.99)
       }).start()
     }, [])
 

src/NothingFound.js

@@ -9,14 +9,14 @@ export const NothingFound = memo(({ ...props }) => {
         <Text style={styles.text}>{props.emptyResultText || 'Nothing found'}</Text>
       </View>
     ),
-    {},
+    {}
   )
   return <EL />
 })
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
+    padding: 10
   },
-  text: { textAlign: 'center' },
+  text: { textAlign: 'center' }
 })

src/RightButton.js

@@ -15,7 +15,7 @@ export const RightButton = memo(
     loading,
     buttonsContainerStyle,
     ChevronIconComponent,
-    ClearIconComponent,
+    ClearIconComponent
   }) => {
     const isOpenedAnimationValue = useRef(new Animated.Value(0)).current
 
@@ -24,21 +24,21 @@ export const RightButton = memo(
         duration: 350,
         toValue: isOpened ? 1 : 0,
         useNativeDriver: true,
-        easing: Easing.bezier(0.3, 0.58, 0.25, 0.99),
+        easing: Easing.bezier(0.3, 0.58, 0.25, 0.99)
       }).start()
     }, [isOpened])
 
     const chevronSpin = isOpenedAnimationValue.interpolate({
       inputRange: [0, 1],
-      outputRange: ['0deg', '180deg'],
+      outputRange: ['0deg', '180deg']
     })
 
     return (
       <View
         style={{
           ...styles.container,
           height: inputHeight,
-          ...buttonsContainerStyle,
+          ...buttonsContainerStyle
         }}>
         {!loading && showClear && (
           <TouchableOpacity onPress={onClearPress} style={styles.clearButton}>
@@ -55,7 +55,7 @@ export const RightButton = memo(
         )}
       </View>
     )
-  },
+  }
 )
 
 const styles = StyleSheet.create({
@@ -67,16 +67,16 @@ const styles = StyleSheet.create({
     zIndex: 10,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'transparent',
+    backgroundColor: 'transparent'
   },
   clearButton: {
     width: 26,
-    alignItems: 'center',
+    alignItems: 'center'
   },
   chevronButton: {
     width: 26,
     alignItems: 'center',
     height: '100%',
-    justifyContent: 'center',
-  },
+    justifyContent: 'center'
+  }
 })