chore: upgrade plugins decl a bit and fix all broken eslint issues

Author: isekovanic

examples/SampleApp/App.tsx

@@ -139,6 +139,7 @@ const App = () => {
               ...(colorScheme === 'dark' ? DarkTheme : DefaultTheme).colors,
               background: streamChatTheme.colors?.white_snow || '#FCFCFC',
             },
+            fonts: (colorScheme === 'dark' ? DarkTheme : DefaultTheme).fonts,
             dark: colorScheme === 'dark',
           }}
         >
@@ -182,7 +183,7 @@ const DrawerNavigatorWrapper: React.FC<{
         <Chat<StreamChatGenerics>
           client={chatClient}
           enableOfflineSupport
-          // @ts-expect-error
+          // @ts-expect-error - the `ImageComponent` prop is generic, meaning we can expect an error
           ImageComponent={FastImage}
           isMessageAIGenerated={(message: MessageType) => !!message.ai_generated}
         >

examples/SampleApp/eslint.config.mjs

@@ -1,5 +1,6 @@
 import eslintPluginReact from 'eslint-plugin-react';
 import eslintPluginReactNative from 'eslint-plugin-react-native';
+import eslintPluginReactNativeOfficial from '@react-native/eslint-plugin';
 import eslintPluginComments from 'eslint-plugin-eslint-comments';
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
 import eslintPluginJest from 'eslint-plugin-jest';
@@ -8,6 +9,11 @@ import eslintReactNativeConfig from '@react-native/eslint-config';
 
 import tsEslint from 'typescript-eslint';
 
+/**
+ * @react-native/eslint-config is for some reason still using the old notation
+ * for globals. We parse them manually here to make sure they're compatible with
+ * the new config. All globals which were previously set to true are now readonly.
+ */
 const globals = Object.keys(eslintReactNativeConfig.globals).reduce((acc, key) => {
   if (eslintReactNativeConfig.globals[key]) {
     acc[key] = 'readonly';
@@ -36,7 +42,13 @@ export default tsEslint.config(
         console: 'readonly',
       },
     },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
     plugins: {
+      '@react-native': eslintPluginReactNativeOfficial,
       react: eslintPluginReact,
       'react-native': eslintPluginReactNative,
       'eslint-comments': eslintPluginComments,

examples/SampleApp/package.json

@@ -59,6 +59,7 @@
     "@react-native-community/cli-platform-ios": "15.1.3",
     "@react-native/babel-preset": "0.77.1",
     "@react-native/eslint-config": "^0.77.1",
+    "@react-native/eslint-plugin": "^0.77.1",
     "@react-native/metro-config": "0.77.1",
     "@react-native/typescript-config": "0.77.1",
     "@rnx-kit/metro-config": "^2.0.1",

examples/SampleApp/src/components/AddMemberBottomSheet.tsx

@@ -102,6 +102,7 @@ export const AddMemberBottomSheet: React.FC = () => {
       reset();
       setOverlay('none');
     } catch (err) {
+      console.warn('An error has occurred while adding members: ', err);
       setError(true);
     }
     setAddMemberQueryInProgress(false);

examples/SampleApp/src/hooks/usePaginatedAttachments.ts

@@ -61,6 +61,7 @@ export const usePaginatedAttachments = (
         hasMoreResults.current = false;
       }
     } catch (e) {
+      console.warn('An error has occurred while fetching attachments: ', e);
       // do nothing;
     }
     queryInProgress.current = false;

examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx

@@ -86,7 +86,7 @@ export const LabeledTextInput: React.FC<LabeledTextInputProps> = ({
           backgroundColor: white_smoke,
           borderColor,
           borderWidth: 1,
-          paddingVertical: !!value || !!error ? 16 : 8,
+          paddingVertical: !!value || error ? 16 : 8,
         },
       ]}
     >
@@ -102,7 +102,7 @@ export const LabeledTextInput: React.FC<LabeledTextInputProps> = ({
           {label}
         </Text>
       )}
-      {!!error && (
+      {error && (
         <Text
           style={[
             styles.labelText,
@@ -236,6 +236,7 @@ export const AdvancedUserSelectorScreen: React.FC = () => {
                   Alert.alert(
                     'Login resulted in error. Please make sure you have entered valid credentials',
                   );
+                  console.warn(e);
                 }
               }}
               style={[

examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx

@@ -282,8 +282,6 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
             >
               <View style={styles.memberRow}>
                 <Avatar
-                  channelId={channel.id}
-                  id={member.user?.id}
                   image={member.user?.image}
                   name={member.user?.name}
                   online={member.user?.online}
@@ -355,7 +353,9 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
               <TouchableOpacity
                 onPress={() => {
                   setGroupName(channel.data?.name);
-                  textInputRef.current && textInputRef.current.blur();
+                  if (textInputRef.current) {
+                    textInputRef.current.blur();
+                  }
                 }}
                 style={{
                   paddingRight: 8,

examples/SampleApp/yarn.lock

@@ -2286,7 +2286,7 @@
     eslint-plugin-react-hooks "^4.6.0"
     eslint-plugin-react-native "^4.0.0"
 
-"@react-native/[email protected]":
+"@react-native/[email protected]", "@react-native/eslint-plugin@^0.77.1":
   version "0.77.1"
   resolved "https://registry.yarnpkg.com/@react-native/eslint-plugin/-/eslint-plugin-0.77.1.tgz#34e13d7bab2af1a0d68fc609547ba205df51331d"
   integrity sha512-K1nuM/aLWYpUq8y/KJ34UCazYE4gdY1mxkwXhRSadDVpogK4Z/0xbSGYZQDHfvmOyQMZkM6mplQLztGrxD/CvA==