sticky metadata container, README render tweaks

common/styleguide.tsx

@@ -39,7 +39,7 @@ export const colors = {
   sky: '#C6EEFB',
   powder: '#EEFAFE',
   pewter: '#BEC8CB',
-  gray1: '#f7f7f7',
+  gray1: '#f9f9f9',
   gray2: '#ececec',
   gray3: '#CFCFD5',
   gray4: '#828898',
@@ -63,6 +63,7 @@ export const darkColors = {
   border: '#2a2e36',
   veryDark: '#111114',
   dark: '#14141a',
+  darkBright: '#1c1c21',
   powder: '#262a36',
   pewter: '#767C8E',
   secondary: '#a2a7ab',

components/CheckBox.tsx

@@ -12,7 +12,7 @@ type Props = {
   color?: string;
 };
 
-export function CheckBox({ style, value, color }: Props) {
+export default function CheckBox({ style, value, color }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
 
   return (

components/CompatibilityTags.tsx

@@ -14,7 +14,7 @@ type Props = {
   library: LibraryType;
 };
 
-export function CompatibilityTags({ library }: Props) {
+export default function CompatibilityTags({ library }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
 
   const platforms = [

components/Filters/ToggleLink.tsx

@@ -7,7 +7,7 @@ import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type Query } from '~/types';
 import urlWithQuery from '~/util/urlWithQuery';
 
-import { CheckBox } from '../CheckBox';
+import CheckBox from '../CheckBox';
 
 type Props = {
   query: Query;

components/Footer.tsx

@@ -1,12 +1,11 @@
-import { type ComponentType, createElement, useContext } from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import { A, P, colors, darkColors, useLayout } from '~/common/styleguide';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 
 import ContentContainer from './ContentContainer';
 import {
-  type IconProps,
   Logo,
   PlatformAndroid,
   PlatformIOS,
@@ -16,39 +15,9 @@ import {
   PlatformWeb,
   PlatformWindows,
 } from './Icons';
+import Platform from './PlatformTile';
 import VercelBanner from './VercelBanner';
 
-type PlatformProps = {
-  name: string;
-  pkgName: string;
-  url: string;
-  Icon: ComponentType<IconProps>;
-  style?: ViewStyle;
-};
-
-function Platform({ name, pkgName, url, Icon, style }: PlatformProps) {
-  const { isDark } = useContext(CustomAppearanceContext);
-
-  const packageHoverStyle = {
-    backgroundColor: isDark ? darkColors.background : colors.gray2,
-    borderRadius: 8,
-  };
-
-  return (
-    <A href={url} style={styles.itemLink} hoverStyle={packageHoverStyle}>
-      <View style={[styles.platformItem, style]}>
-        {createElement(Icon, {
-          fill: isDark ? darkColors.pewter : colors.gray5,
-          width: 32,
-          height: 32,
-        })}
-        <P style={styles.platformName}>{name}</P>
-        <P style={styles.platformPackageName}>{pkgName}</P>
-      </View>
-    </A>
-  );
-}
-
 export default function Footer() {
   const { isDark } = useContext(CustomAppearanceContext);
   const { isSmallScreen } = useLayout();
@@ -170,24 +139,6 @@ const styles = StyleSheet.create({
     maxWidth: 960,
     marginHorizontal: 'auto',
   },
-  platformItem: {
-    minWidth: 160,
-    paddingHorizontal: 8,
-    paddingVertical: 16,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  platformName: {
-    marginTop: 12,
-  },
-  platformPackageName: {
-    fontSize: 12,
-    fontFamily: 'monospace',
-    borderRadius: 4,
-    paddingHorizontal: 8,
-    lineHeight: 22,
-    marginTop: 2,
-  },
   bannerContainer: {
     alignSelf: 'center',
   },
@@ -204,5 +155,4 @@ const styles = StyleSheet.create({
     paddingTop: 48,
     paddingBottom: 32,
   },
-  itemLink: { backgroundColor: 'none', borderWidth: 1, borderColor: 'transparent' },
 });

components/Library/MetaData.tsx

@@ -250,7 +250,7 @@ function generateSecondaryData(
   ];
 }
 
-export function MetaData({ library, secondary, skipExamples = false }: Props) {
+export default function MetaData({ library, secondary, skipExamples = false }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
 
   if (secondary) {

components/Library/TrendingMark.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, View, type ViewStyle } from 'react-native';
 import { colors, darkColors, P, A } from '~/common/styleguide';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type LibraryType } from '~/types';
+import { getPopularityGrade } from '~/util/scoring';
 
 type Props = {
   library: LibraryType | { popularity: number };
@@ -86,20 +87,6 @@ function getPopularityStyles(popularity: number, markOnly: boolean) {
   }
 }
 
-function getPopularityGrade(popularity: number) {
-  if (popularity > 0.5) {
-    return 'HOT!';
-  } else if (popularity > 0.25) {
-    return 'Popular';
-  } else if (popularity > 0.1) {
-    return 'Quite popular';
-  } else if (popularity > 0) {
-    return 'Trending';
-  } else {
-    return 'Declining';
-  }
-}
-
 const styles = StyleSheet.create({
   container: {
     marginBottom: 4,

components/Library/UnmaintainedLabel.tsx

@@ -12,7 +12,7 @@ type Props = {
   block?: boolean;
 };
 
-function UnmaintainedLabel({ alternatives, block }: Props) {
+export default function UnmaintainedLabel({ alternatives, block }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
   const { isSmallScreen } = useLayout();
 
@@ -99,5 +99,3 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: 8,
   },
 });
-
-export default UnmaintainedLabel;

components/Library/index.tsx

@@ -8,11 +8,11 @@ import UpdatedAtView from '~/components/Library/UpdateAtView';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type LibraryType } from '~/types';
 
-import { MetaData } from './MetaData';
-import Thumbnail from './Thumbnail.web';
+import MetaData from './MetaData';
+import Thumbnail from './Thumbnail';
 import TrendingMark from './TrendingMark';
 import UnmaintainedLabel from './UnmaintainedLabel';
-import { CompatibilityTags } from '../CompatibilityTags';
+import CompatibilityTags from '../CompatibilityTags';
 import Tooltip from '../Tooltip';
 
 type Props = {

components/Package/PackageHeader.tsx

@@ -2,7 +2,7 @@ import { useContext, type ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { A, colors, darkColors, HoverEffect, P, useLayout } from '~/common/styleguide';
-import { CompatibilityTags } from '~/components/CompatibilityTags';
+import CompatibilityTags from '~/components/CompatibilityTags';
 import { GitHub } from '~/components/Icons';
 import LibraryDescription from '~/components/Library/LibraryDescription';
 import UnmaintainedLabel from '~/components/Library/UnmaintainedLabel';

components/Package/ReadmeBox.tsx

@@ -121,6 +121,14 @@ export default function ReadmeBox({
                 }
                 return <span>{props.children}</span>;
               },
+              table: ({ children }) => {
+                return (
+                  // @ts-expect-error dataSet is a valid RNW prop
+                  <View dataSet={{ tableWrapper: true }}>
+                    <table>{children}</table>
+                  </View>
+                );
+              },
               img: ({ src, alt, width, height }: any) => (
                 <img
                   src={getReadmeAssetURL(src, githubUrl)}

components/PlatformTile.tsx

@@ -0,0 +1,64 @@
+import { createElement, useContext, type ComponentType } from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { A, colors, darkColors, P } from '~/common/styleguide';
+import CustomAppearanceContext from '~/context/CustomAppearanceContext';
+
+import { type IconProps } from './Icons';
+
+type PlatformProps = {
+  name: string;
+  pkgName: string;
+  url: string;
+  Icon: ComponentType<IconProps>;
+  style?: ViewStyle;
+};
+
+export default function Platform({ name, pkgName, url, Icon, style }: PlatformProps) {
+  const { isDark } = useContext(CustomAppearanceContext);
+
+  const packageHoverStyle = {
+    backgroundColor: isDark ? darkColors.background : colors.gray2,
+    borderRadius: 8,
+  };
+
+  return (
+    <A href={url} style={styles.itemLink} hoverStyle={packageHoverStyle}>
+      <View style={[styles.platformItem, style]}>
+        {createElement(Icon, {
+          fill: isDark ? darkColors.pewter : colors.gray5,
+          width: 32,
+          height: 32,
+        })}
+        <P style={styles.platformName}>{name}</P>
+        <P style={styles.platformPackageName}>{pkgName}</P>
+      </View>
+    </A>
+  );
+}
+
+const styles = StyleSheet.create({
+  platformItem: {
+    minWidth: 160,
+    paddingHorizontal: 8,
+    paddingVertical: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  platformName: {
+    marginTop: 12,
+  },
+  platformPackageName: {
+    fontSize: 12,
+    fontFamily: 'monospace',
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    lineHeight: 22,
+    marginTop: 2,
+  },
+  itemLink: {
+    backgroundColor: 'none',
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+});

context/CustomAppearanceProvider.tsx

@@ -11,7 +11,7 @@ const shouldRehydrate = true;
 
 const defaultState = { isDark: false };
 
-function CustomAppearanceProvider({ children }: PropsWithChildren) {
+export default function CustomAppearanceProvider({ children }: PropsWithChildren) {
   const colorScheme = Appearance.getColorScheme();
   const [isDark, setIsDark] = useState(colorScheme === 'dark');
   const [isLoaded, setLoaded] = useState(false);
@@ -62,5 +62,3 @@ async function rehydrateAppearanceState() {
     return defaultState;
   }
 }
-
-export default CustomAppearanceProvider;

package.json

@@ -18,18 +18,18 @@
     "precommit": "simple-git-hooks && lint-staged"
   },
   "dependencies": {
-    "@expo/html-elements": "^0.13.7",
+    "@expo/html-elements": "^0.13.8",
     "@expo/match-media": "^0.4.0",
     "@m2d/react-markdown": "^1.0.0",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-picker/picker": "^2.11.4",
-    "@sentry/react": "^10.28.0",
+    "@sentry/react": "^10.29.0",
     "crypto-js": "^4.2.0",
     "es-toolkit": "^1.42.0",
-    "expo": "54.0.25",
-    "expo-font": "^14.0.9",
+    "expo": "54.0.27",
+    "expo-font": "^14.0.10",
     "next": "^16.0.7",
     "node-emoji": "^2.2.0",
     "react": "19.2.1",

pages/_app.tsx

@@ -47,6 +47,7 @@ function App({ pageProps, Component }: AppProps) {
                     --select-border: ${colors.gray6};
                     --tooltip-border: ${colors.gray7};
                     --table-border: ${colors.gray6};
+                    --table-alt-row: ${darkColors.darkBright};
                     --table-header-background: ${darkColors.dark};
                     --code-block-background: ${darkColors.veryDark};
                     --inline-code-background: ${colors.gray6};
@@ -61,6 +62,7 @@ function App({ pageProps, Component }: AppProps) {
                     --select-border: ${colors.gray5};
                     --tooltip-border: ${colors.gray6};
                     --table-border: ${colors.gray3};
+                    --table-alt-row: ${colors.gray1};
                     --table-header-background: ${colors.gray2};
                     --code-block-background: ${colors.gray2};
                     --inline-code-background: ${colors.gray2};

react-native-libraries.json

@@ -13430,8 +13430,10 @@
     "android": true
   },
   {
-    "githubUrl": "https://github.com/skiniks/react-native-shiki-engine",
-    "examples": ["https://github.com/skiniks/react-native-shiki-engine/tree/main/example"],
+    "githubUrl": "https://github.com/skiniks/react-native-shiki-engine/tree/main/packages/react-native-shiki-engine",
+    "examples": [
+      "https://github.com/skiniks/react-native-shiki-engine/tree/main/examples/react-native"
+    ],
     "ios": true,
     "android": true,
     "newArchitecture": true

scenes/PackageOverviewScene.tsx

@@ -5,7 +5,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 
 import { A, colors, darkColors, H6, Label, P, useLayout } from '~/common/styleguide';
 import ContentContainer from '~/components/ContentContainer';
-import { MetaData } from '~/components/Library/MetaData';
+import MetaData from '~/components/Library/MetaData';
 import TrendingMark from '~/components/Library/TrendingMark';
 import UpdatedAtView from '~/components/Library/UpdateAtView';
 import DependencyRow from '~/components/Package/DependencyRow';
@@ -108,7 +108,7 @@ export default function PackageOverviewScene({
               </>
             )}
           </View>
-          <View style={styles.depsContainer}>
+          <View style={styles.metadataContainer} id="metadataContainer">
             <View>
               <MetaData library={library} />
             </View>
@@ -270,7 +270,7 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  depsContainer: {
+  metadataContainer: {
     gap: 16,
     ...Platform.select({
       web: {