react-native-community · Simek · Sep 14, 2025 · Sep 14, 2025
diff --git a/assets/data.json b/assets/data.json
diff --git a/bun.lock b/bun.lock
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -12,9 +12,8 @@ type Props = PropsWithChildren & {
   style?: TextStyle | TextStyle[];
 };
 
-export function Button(props: Props) {
+export function Button({ children, href, onPress, style, openInNewTab, ...rest }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
-  const { children, href, onPress, style, openInNewTab } = props;
 
   const isLink = !!href;
   const linkStyle = [
@@ -33,13 +32,14 @@ export function Button(props: Props) {
         <A
           href={href}
           style={{ borderRadius: 4, fontFamily: 'inherit' }}
-          {...(openInNewTab ? { target: '_blank' } : {})}>
+          {...(openInNewTab ? { target: '_blank' } : {})}
+          {...rest}>
           <Pressable focusable={false} style={linkStyle} accessible={false}>
             {content}
           </Pressable>
         </A>
       ) : (
-        <Pressable onPress={onPress} style={linkStyle}>
+        <Pressable onPress={onPress} style={linkStyle} {...rest}>
           {content}
         </Pressable>
       )}

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -29,7 +29,7 @@ function Platform({ name, pkgName, url, Icon, style }: PlatformProps) {
   const { isDark } = useContext(CustomAppearanceContext);
 
   const packageHoverStyle = {
-    backgroundColor: isDark ? darkColors.powder : colors.gray2,
+    backgroundColor: isDark ? darkColors.background : colors.gray2,
     borderRadius: 8,
   };
 

diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
@@ -162,12 +162,12 @@ export function Issue({ width, height, fill = colors.black }: IconProps) {
   );
 }
 
-export function Eye({ width = 22, height = 22, fill = colors.black }: IconProps) {
+export function Eye({ width = 22, height = 19, fill = colors.black }: IconProps) {
   return (
-    <Svg width={width} height={height} viewBox="0 0 22 22" fill="none">
+    <Svg width={width} height={height} viewBox="0 0 22 13" fill="none">
       <Path
         fill={fill}
-        d="M10.9083 6.50831C15.125 6.50831 18.0583 9.16665 19.3417 10.6333C18.0583 12.2833 15.125 15.4 10.9083 15.4C6.96667 15.4 3.85 12.2833 2.475 10.5416C3.75833 9.16665 6.69167 6.50831 10.9083 6.50831ZM11 4.58331C4.03333 4.58331 0 10.6333 0 10.6333C0 10.6333 4.4 17.4166 11 17.4166C18.0583 17.4166 22 10.6333 22 10.6333C22 10.6333 18.0583 4.58331 11 4.58331ZM10.9083 7.79165C9.16667 7.79165 7.7 9.25831 7.7 11C7.7 12.7416 9.16667 14.2083 10.9083 14.2083C12.65 14.2083 14.1167 12.7416 14.1167 11C14.1167 9.25831 12.65 7.79165 10.9083 7.79165ZM10.9083 11C10.45 11.4583 9.71667 11.4583 9.25833 11C8.8 10.5416 8.8 9.80831 9.25833 9.34998C9.71667 8.89165 10.45 8.89165 10.9083 9.34998C11.3667 9.80831 11.3667 10.5416 10.9083 11Z"
+        d="M10.9083 1.925C15.125 1.925 18.0583 4.58333 19.3417 6.05C18.0583 7.7 15.125 10.8167 10.9083 10.8167C6.96667 10.8167 3.85 7.7 2.475 5.95833C3.75833 4.58333 6.69167 1.925 10.9083 1.925ZM11 0C4.03333 0 0 6.05 0 6.05C0 6.05 4.4 12.8333 11 12.8333C18.0583 12.8333 22 6.05 22 6.05C22 6.05 18.0583 0 11 0ZM10.9083 3.20833C9.16667 3.20833 7.7 4.675 7.7 6.41667C7.7 8.15833 9.16667 9.625 10.9083 9.625C12.65 9.625 14.1167 8.15833 14.1167 6.41667C14.1167 4.675 12.65 3.20833 10.9083 3.20833ZM10.9083 6.41667C10.45 6.875 9.71667 6.875 9.25833 6.41667C8.8 5.95833 8.8 5.225 9.25833 4.76667C9.71667 4.30833 10.45 4.30833 10.9083 4.76667C11.3667 5.225 11.3667 5.95833 10.9083 6.41667Z"
       />
     </Svg>
   );

diff --git a/components/Library/LoadingContent.tsx b/components/Library/LoadingContent.tsx
@@ -24,18 +24,17 @@ const LoadingContent = ({ width = '100%', height = 202, wrapperStyle = {} }: Pro
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: isDark ? darkColors.border : colors.gray2,
-        borderRadius: 4,
+        borderRadius: 6,
         marginBottom: 16,
         ...wrapperStyle,
       }}>
-      <rect x="20" y="20" rx="3" ry="3" width="251" height="25" />
-      <rect x="20" y="56" rx="3" ry="3" width="62" height="16" />
-      <rect x="20" y="88" rx="3" ry="3" width="410" height="10" />
-      <rect x="20" y="106" rx="3" ry="3" width="380" height="10" />
-      <rect x="20" y="124" rx="3" ry="3" width="194" height="10" />
-      <rect x="94" y="56" rx="3" ry="3" width="62" height="16" />
-      <rect x="168" y="56" rx="3" ry="3" width="62" height="16" />
-      <rect x="20" y="170" rx="3" ry="3" width="306" height="14" />
+      <rect x="20" y="20" rx="3" ry="3" width="288" height="25" />
+      <rect x="20" y="56" rx="3" ry="3" width="88" height="20" />
+      <rect x="20" y="88" rx="3" ry="3" width={isSmallScreen ? '320' : '410'} height="14" />
+      <rect x="20" y="110" rx="3" ry="3" width={isSmallScreen ? '250' : '380'} height="14" />
+      <rect x="118" y="56" rx="3" ry="3" width="60" height="20" />
+      <rect x="192" y="56" rx="3" ry="3" width="72" height="20" />
+      <rect x="20" y="170" rx="3" ry="3" width={isSmallScreen ? '220' : '306'} height="14" />
     </ContentLoader>
   );
 };

diff --git a/components/Library/MetaData.tsx b/components/Library/MetaData.tsx
@@ -1,12 +1,13 @@
 import { useContext } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View, Text } from 'react-native';
 
 import { colors, A, P, Caption, darkColors } from '~/common/styleguide';
 import Tooltip from '~/components/Tooltip';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type LibraryType, MetadataEntryType } from '~/types';
 import { partition } from '~/util/arrays';
 import { formatBytes } from '~/util/formatBytes';
+import { pluralize } from '~/util/strings';
 
 import { DirectoryScore } from './DirectoryScore';
 import {
@@ -74,7 +75,7 @@ function generateData(
         <A
           href={`https://www.npmjs.com/package/${npmPkg}?activeTab=dependencies`}
           style={styles.link}>
-          {`${github.stats.dependencies} ${github.stats.dependencies === 1 ? 'dependency' : 'dependencies'}`}
+          {`${github.stats.dependencies} ${pluralize('dependency', github.stats.dependencies)}`}
         </A>
       ),
     },
@@ -94,7 +95,7 @@ function generateData(
           id: 'forks',
           icon: <Fork fill={iconColor} width={16} height={17} />,
           content: (
-            <A href={`${github.urls.repo}/network/members`} style={styles.link}>
+            <A href={`${github.urls.repo}/network/members`} style={styles.link} aria-label="Forks">
               {`${github.stats.forks.toLocaleString()}`}
             </A>
           ),
@@ -106,7 +107,7 @@ function generateData(
           id: 'subscribers',
           icon: <Eye fill={iconColor} />,
           content: (
-            <A href={`${github.urls.repo}/watchers`} style={styles.link}>
+            <A href={`${github.urls.repo}/watchers`} style={styles.link} aria-label="Watchers">
               {`${github.stats.subscribers.toLocaleString()}`}
             </A>
           ),
@@ -118,7 +119,7 @@ function generateData(
           id: 'issues',
           icon: <Issue fill={iconColor} />,
           content: (
-            <A href={`${github.urls.repo}/issues`} style={styles.link}>
+            <A href={`${github.urls.repo}/issues`} style={styles.link} aria-label="Issues">
               {`${github.stats.issues.toLocaleString()}`}
             </A>
           ),
@@ -135,10 +136,10 @@ function generateSecondaryData({ github, examples }: LibraryType, isDark: boolea
   const iconColor = isDark ? darkColors.pewter : colors.secondary;
   const paragraphStyles = [styles.secondaryText, secondaryTextColor];
   const linkStyles = [...paragraphStyles, styles.mutedLink];
-  const hoverStyle = [
-    { textDecorationColor: isDark ? colors.gray6 : colors.gray4 },
-    isDark && { color: colors.primaryDark },
-  ];
+  const hoverStyle = {
+    textDecorationColor: colors.gray4,
+    color: isDark ? colors.gray3 : colors.gray5,
+  };
 
   return [
     github.urls.homepage
@@ -246,7 +247,11 @@ export function MetaData({ library, secondary }: Props) {
                 key={id}
                 sideOffset={2}
                 delayDuration={100}
-                trigger={<View style={styles.iconContainer}>{icon}</View>}>
+                trigger={
+                  <View style={styles.iconContainer}>
+                    {icon}
+                  </View>
+                }>
                 {tooltip}
               </Tooltip>
               {content}

diff --git a/components/Library/UpdateAtView.tsx b/components/Library/UpdateAtView.tsx
@@ -25,51 +25,53 @@ export default function UpdatedAtView({ library }: Props) {
 
   const { branchName, packagePath } = parseGitHubUrl(library.githubUrl);
 
+  const tooltipContent = `
+    Last update (based on Git activity)
+    ${
+      library.npm.latestReleaseDate
+        ? ` Last npm release: ${getTimeSinceToday(library.npm.latestReleaseDate)}`
+        : ''
+    }`;
+
   return (
-    <View style={styles.updatedAtContainer}>
-      <Tooltip
-        sideOffset={2}
-        trigger={
-          <View style={{ cursor: 'pointer' }} aria-label="Last update (based on git activity)">
+    <Tooltip
+      sideOffset={2}
+      trigger={
+        <View style={styles.updatedAtContainer} aria-label={tooltipContent} role="tooltip">
+          <View>
             <Calendar
               fill={library.unmaintained ? unmaintainedIconColor : iconColor}
               width={14}
               height={16}
             />
           </View>
-        }>
-        Last update (based on git activity)
-      </Tooltip>
-      <A
-        href={
-          packagePath === '.'
-            ? `${library.github.urls.repo}/commits`
-            : `${library.github.urls.repo}/commits/${branchName}/${packagePath}`
-        }
-        style={[
-          styles.link,
-          {
-            color: library.unmaintained ? unmaintainedTextColor : textColor,
-            textDecorationColor: decorationColor,
-          },
-        ]}
-        hoverStyle={[
-          {
-            color: library.unmaintained
-              ? unmaintainedTextColor
-              : isDark
-                ? colors.primaryDark
-                : textColor,
-            textDecorationColor: library.unmaintained
-              ? unmaintainedTextColor
-              : isDark
-                ? colors.gray6
-                : colors.gray4,
-          },
-        ]}>
-        {getTimeSinceToday(library.github.stats.pushedAt)}
-      </A>
-    </View>
+          <A
+            href={
+              packagePath === '.'
+                ? `${library.github.urls.repo}/commits`
+                : `${library.github.urls.repo}/commits/${branchName}/${packagePath}`
+            }
+            style={[
+              styles.link,
+              {
+                color: library.unmaintained ? unmaintainedTextColor : textColor,
+                textDecorationColor: decorationColor,
+              },
+            ]}
+            hoverStyle={{
+              color: library.unmaintained
+                ? unmaintainedTextColor
+                : isDark
+                  ? colors.gray3
+                  : colors.gray5,
+              textDecorationColor: library.unmaintained ? unmaintainedTextColor : colors.gray4,
+            }}>
+            {getTimeSinceToday(library.github.stats.pushedAt)}
+          </A>
+        </View>
+      }>
+      {tooltipContent}
+    </Tooltip>
   );
 }
 

diff --git a/components/Library/index.tsx b/components/Library/index.tsx
@@ -146,7 +146,7 @@ const styles = StyleSheet.create({
   container: {
     marginBottom: 16,
     borderWidth: 1,
-    borderRadius: 4,
+    borderRadius: 6,
     flexDirection: 'row',
     overflow: 'hidden',
   },

diff --git a/components/NavigationTab.tsx b/components/NavigationTab.tsx
@@ -26,7 +26,7 @@ function NavigationTab({ title, path = `/${title.toLowerCase()}` }: Props) {
         }),
       }}
       hoverStyle={{
-        backgroundColor: isActive ? activeBackground : isDark ? darkColors.dark : colors.gray6,
+        backgroundColor: isActive ? activeBackground : isDark ? darkColors.background : colors.gray6,
         color: colors.secondary,
       }}
       target="_self">

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -202,7 +202,7 @@ const styles = StyleSheet.create({
     flex: 1,
     height: 50,
     borderWidth: 2,
-    borderRadius: 4,
+    borderRadius: 6,
     padding: 16,
     paddingLeft: 44,
     fontSize: 20,

diff --git a/components/Sort.tsx b/components/Sort.tsx
@@ -87,6 +87,7 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
               onHoverOut={() => setIsSortIconHovered(false)}
               style={sortDirection === 'ascending' && styles.flippedIcon}
               aria-label="Toggle sort direction"
+              role="button"
               onPress={() => {
                 setSortDirection(previousOrder =>
                   previousOrder === 'ascending' ? 'descending' : 'ascending'
@@ -105,6 +106,7 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
       <View style={styles.pickerContainer}>
         <P style={styles.title}>
           <Picker
+            aria-label="Sort direction"
             selectedValue={sortValue}
             style={[
               styles.picker,

diff --git a/debug-github-repos.json b/debug-github-repos.json
@@ -2,7 +2,13 @@
   {
     "githubUrl": "https://github.com/react-navigation/react-navigation/tree/main/packages/core",
     "npmPkg": "@react-navigation/core",
+    "android": true,
+    "ios": true,
+    "macos": true,
+    "windows": true,
+    "web": true,
     "expoGo": true,
+    "fireos": true,
     "newArchitecture": true
   },
   {

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -21,9 +21,9 @@ const COMMON_RULES = {
       ],
     },
   ],
-  curly: 'warn',
+  curly: 'error',
   eqeqeq: ['error', 'always', { null: 'ignore' }],
-  'no-void': ['warn', { allowAsStatement: true }],
+  'no-void': ['error', { allowAsStatement: true }],
   'import/no-cycle': ['error', { maxDepth: '∞' }],
 };
 
@@ -43,14 +43,14 @@ const TS_COMMON_RULES = {
   ],
   '@typescript-eslint/no-floating-promises': 'error',
   '@typescript-eslint/return-await': ['error', 'always'],
-  '@typescript-eslint/no-confusing-non-null-assertion': 'warn',
-  '@typescript-eslint/no-extra-non-null-assertion': 'warn',
-  '@typescript-eslint/prefer-as-const': 'warn',
-  '@typescript-eslint/prefer-includes': 'warn',
-  '@typescript-eslint/prefer-readonly': 'warn',
-  '@typescript-eslint/prefer-string-starts-ends-with': 'warn',
+  '@typescript-eslint/no-confusing-non-null-assertion': 'error',
+  '@typescript-eslint/no-extra-non-null-assertion': 'error',
+  '@typescript-eslint/prefer-as-const': 'error',
+  '@typescript-eslint/prefer-includes': 'error',
+  '@typescript-eslint/prefer-readonly': 'error',
+  '@typescript-eslint/prefer-string-starts-ends-with': 'error',
   '@typescript-eslint/ban-ts-comment': [
-    'warn',
+    'error',
     {
       minimumDescriptionLength: 3,
       'ts-check': false,
@@ -59,8 +59,8 @@ const TS_COMMON_RULES = {
       'ts-nocheck': true,
     },
   ],
-  '@typescript-eslint/no-unnecessary-type-assertion': 'warn',
-  '@typescript-eslint/no-restricted-types': 'warn',
+  '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+  '@typescript-eslint/no-restricted-types': 'error',
 };
 
 export default defineConfig([
@@ -102,7 +102,7 @@ export default defineConfig([
       ...TS_COMMON_RULES,
       '@next/next/no-img-element': 'off',
       'import/no-named-as-default': 'off',
-      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-console': ['error', { allow: ['warn', 'error'] }],
       'react/jsx-key': [
         'error',
         {