update React, move React Native + Expo to nightly stack (#2794)

Author: Simek

bun.lock

@@ -1,5 +1,5 @@
 import * as HtmlElements from '@expo/html-elements';
-import { type TextProps } from '@expo/html-elements/build/primitives/Text';
+import { type TextProps } from '@expo/html-elements/primitives/Text';
 import Link from 'next/link';
 import { type ComponentType, type PropsWithChildren, type Ref, useState } from 'react';
 import {

common/styleguide.tsx

@@ -280,7 +280,6 @@ function MetaData({ library, secondary, skipExamples = false }: Props) {
           const component = (
             <View
               key={id}
-              // @ts-expect-error RNW complains about 'fit-content'
               style={{
                 ...(i + 1 !== data.length ? tw`mb-2 overflow-hidden` : {}),
                 ...tw`mb-0 max-h-5 min-h-5 flex-row items-center pr-[3px]`,

components/Library/MetaData.tsx

@@ -38,7 +38,7 @@ export default function TrendingMark({ library, style, markOnly = false }: Props
   );
 
   return markOnly ? (
-    <View style={[tw`mb-1`, style as ViewStyle]}>{content}</View>
+    <View style={[tw`mb-1`, style]}>{content}</View>
   ) : (
     <HoverEffect>
       <A href="/scoring" style={[tw`relative flex items-start no-underline`, style as Style]}>

components/Library/TrendingMark.tsx

@@ -1,6 +1,6 @@
 import * as Popover from '@radix-ui/react-popover';
 import { useRef, useState } from 'react';
-import { type ColorValue, ScrollView, TextInput, View } from 'react-native';
+import { type ColorValue, ScrollView, TextInput, type TextInputInstance, View } from 'react-native';
 import useSWR from 'swr';
 import { useDebounce } from 'use-debounce';
 
@@ -27,7 +27,7 @@ export default function PackageVersionSelector({
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState('');
   const [debouncedSearch] = useDebounce(search, 150);
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
 
   const { data, isLoading } = useSWR<PackageVersionsOnlyData>(
     `/api/proxy/npm-registry-versions?name=${packageName}&versionsOnly=true`,

components/Package/CodeBrowser/PackageVersionSelector.tsx

@@ -7,6 +7,7 @@ import {
   Pressable,
   ScrollView,
   TextInput,
+  type TextInputInstance,
   View,
 } from 'react-native';
 import useSWR from 'swr';
@@ -60,7 +61,7 @@ export default function CodeBrowser({
   toggleMaximized,
 }: Props) {
   const { isSmallScreen } = useLayout();
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
   const fileTreeResizeStartRef = useRef<{ startX: number; startWidth: number } | null>(null);
 
   const [search, setSearch] = useState('');

components/Package/CodeBrowser/index.tsx

@@ -15,7 +15,6 @@ type Props = {
 export default function FundingRow({ fund }: Props) {
   const { isSmallScreen } = useLayout();
   return (
-    // @ts-expect-error calculated width
     <LI style={!isSmallScreen && { width: 'calc(50% - 4px)' }}>
       <A
         href={correctFundLink(fund)}

components/Package/CommunitySection/FoundingRow.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import { useRef, useState } from 'react';
-import { type ColorValue, TextInput, View } from 'react-native';
+import { type ColorValue, TextInput, type TextInputInstance, View } from 'react-native';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { Caption, H6Section, Label, useLayout } from '~/common/styleguide';
@@ -31,7 +31,7 @@ export default function VersionsSection({ registryData, npmDownloads }: Props) {
   const { isSmallScreen } = useLayout();
 
   const [shouldShowAll, setShowAll] = useState(false);
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
   const isApple = useSearchShortcut(inputRef);
   const { isInputFocused, handleInputFocus, handleInputBlur } = useSearchInputFocus();
 

components/Package/VersionsSection.tsx

@@ -1,6 +1,13 @@
 import { useRouter } from 'next/router';
 import { useRef, useState } from 'react';
-import { type ColorValue, type StyleProp, TextInput, View, type ViewStyle } from 'react-native';
+import {
+  type ColorValue,
+  type StyleProp,
+  TextInput,
+  type TextInputInstance,
+  View,
+  type ViewStyle,
+} from 'react-native';
 import useSWR from 'swr';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -28,7 +35,7 @@ export default function QuickSearch({ style }: Props) {
   const [activeResultIndex, setActiveResultIndex] = useState<number | null>(null);
   const [search, setSearch] = useState('');
 
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
   const searchRef = useRef<string>('');
   const isApple = useSearchShortcut(inputRef);
   const { isInputFocused, handleInputFocus, handleInputBlur } = useSearchInputFocus();

components/QuickSearch.tsx

@@ -1,6 +1,13 @@
 import { useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';
-import { type ColorValue, type StyleProp, TextInput, View, type ViewStyle } from 'react-native';
+import {
+  type ColorValue,
+  type StyleProp,
+  TextInput,
+  type TextInputInstance,
+  View,
+  type ViewStyle,
+} from 'react-native';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { P, useLayout } from '~/common/styleguide';
@@ -29,7 +36,7 @@ export default function Search({ query, total, style }: Props) {
   const { search, order, direction, offset, owner, ...filterParams } = query;
   const [isFilterVisible, setFilterVisible] = useState(Object.keys(filterParams).length > 0);
 
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
   const isApple = useSearchShortcut(inputRef);
   const { isInputFocused, handleInputFocus, handleInputBlur } = useSearchInputFocus();