Enable React Native strict TypeScript API (#11459)

src/alf/util/dimensions.ts

@@ -1,5 +1,5 @@
 import {useEffect, useState} from 'react'
-import {Dimensions} from 'react-native'
+import {Dimensions, type DimensionsPayload} from 'react-native'
 
 /**
  * Same as `useWindowDimensions().fontScale`, but avoids rerendering
@@ -9,9 +9,12 @@ export function useNativeFontScale() {
   const [fontScale, setFontScale] = useState(Dimensions.get('window').fontScale)
 
   useEffect(() => {
-    const sub = Dimensions.addEventListener('change', evt => {
-      setFontScale(evt.window.fontScale)
-    })
+    const sub = Dimensions.addEventListener(
+      'change',
+      (evt: DimensionsPayload) => {
+        if (evt.window) setFontScale(evt.window.fontScale)
+      },
+    )
     return () => sub.remove()
   }, [])
 

src/alf/util/flatten.ts

@@ -1,6 +1,19 @@
-import {type DimensionValue, StyleSheet} from 'react-native'
+import {type DimensionValue, type StyleProp, StyleSheet} from 'react-native'
 
-export const flatten = StyleSheet.flatten
+export function flatten<T>(
+  style?: StyleProp<T>,
+): T extends (infer U)[] ? U : T {
+  return (StyleSheet.flatten(
+    style as unknown as Parameters<typeof StyleSheet.flatten>[0],
+  ) ?? {}) as T extends (infer U)[] ? U : T
+}
+
+/** Flatten React Native styles passed directly to a web-only DOM component. */
+export function flattenToCSS(style: unknown): React.CSSProperties {
+  return (StyleSheet.flatten(
+    style as Parameters<typeof StyleSheet.flatten>[0],
+  ) ?? {}) as React.CSSProperties
+}
 
 /**
  * Coerce a style value to a number. Padding values are typed as
@@ -28,7 +41,7 @@ interface PaddingStyle {
  * non-numeric `DimensionValue` (e.g. percentages) is treated as 0.
  */
 export function extractPadding(style: PaddingStyle | PaddingStyle[]) {
-  const s = flatten(style as any) ?? {}
+  const s = flatten(style)
   const base = num(s.padding)
   return {
     paddingTop: num(s.paddingTop) || num(s.paddingVertical) || base,

src/alf/util/useColorModeTheme.ts

@@ -24,7 +24,7 @@ export function useThemeName(): ThemeName {
 }
 
 function getThemeName(
-  colorScheme: ColorSchemeName,
+  colorScheme: ColorSchemeName | null | undefined,
   colorMode: 'system' | 'light' | 'dark',
   darkTheme?: ThemeName,
 ) {
@@ -39,11 +39,8 @@ function getThemeName(
 }
 
 function updateDocument(theme: ThemeName) {
-  // @ts-ignore web only
   if (IS_WEB && typeof window !== 'undefined') {
-    // @ts-ignore web only
     const html = window.document.documentElement
-    // @ts-ignore web only
     const meta = window.document.querySelector('meta[name="theme-color"]')
 
     // remove any other color mode classes