chore: remaining TS strict fixes

boilerplate/app/components/Card.tsx

@@ -5,6 +5,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
   View,
+  ViewProps,
   ViewStyle,
 } from "react-native"
 import { colors, spacing } from "../theme"
@@ -154,7 +155,9 @@ export function Card(props: CardProps) {
   const isContentPresent = !!(ContentComponent || content || contentTx)
   const isFooterPresent = !!(FooterComponent || footer || footerTx)
 
-  const Wrapper: ComponentType<TouchableOpacityProps> = isPressable ? TouchableOpacity : View
+  const Wrapper = (isPressable ? TouchableOpacity : View) as ComponentType<
+    TouchableOpacityProps | ViewProps
+  >
   const HeaderContentWrapper = verticalAlignment === "force-footer-bottom" ? View : Fragment
 
   const $containerStyle = [$containerPresets[preset], $containerStyleOverride]

boilerplate/app/components/Icon.tsx

@@ -7,6 +7,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
   View,
+  ViewProps,
   ViewStyle,
 } from "react-native"
 
@@ -61,9 +62,9 @@ export function Icon(props: IconProps) {
   } = props
 
   const isPressable = !!WrapperProps.onPress
-  const Wrapper: ComponentType<TouchableOpacityProps> = WrapperProps?.onPress
-    ? TouchableOpacity
-    : View
+  const Wrapper = (WrapperProps?.onPress ? TouchableOpacity : View) as ComponentType<
+    TouchableOpacityProps | ViewProps
+  >
 
   const $imageStyle: StyleProp<ImageStyle> = [
     $imageStyleBase,

boilerplate/app/components/Screen.tsx

@@ -91,8 +91,8 @@ function useAutoPreset(props: AutoScreenProps) {
   const { preset, scrollEnabledToggleThreshold } = props
   const { percent = 0.92, point = 0 } = scrollEnabledToggleThreshold || {}
 
-  const scrollViewHeight = useRef(null)
-  const scrollViewContentHeight = useRef(null)
+  const scrollViewHeight = useRef<null | number>(null)
+  const scrollViewContentHeight = useRef<null | number>(null)
   const [scrollEnabled, setScrollEnabled] = useState(true)
 
   function updateScrollState() {

boilerplate/app/components/Toggle.tsx

@@ -10,6 +10,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
   View,
+  ViewProps,
   ViewStyle,
 } from "react-native"
 import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated"
@@ -180,8 +181,8 @@ export function Toggle(props: ToggleProps) {
 
   const disabled = editable === false || status === "disabled" || props.disabled
 
-  const Wrapper = useMemo<ComponentType<TouchableOpacityProps>>(
-    () => (disabled ? View : TouchableOpacity),
+  const Wrapper = useMemo(
+    () => (disabled ? View : TouchableOpacity) as ComponentType<TouchableOpacityProps | ViewProps>,
     [disabled],
   )
   const ToggleInput = useMemo(() => ToggleInputs[variant] || (() => null), [variant])
@@ -213,12 +214,12 @@ export function Toggle(props: ToggleProps) {
         {labelPosition === "left" && <FieldLabel {...props} labelPosition={labelPosition} />}
 
         <ToggleInput
-          on={value}
-          disabled={disabled}
+          on={!!value}
+          disabled={!!disabled}
           status={status}
-          outerStyle={props.inputOuterStyle}
-          innerStyle={props.inputInnerStyle}
-          detailStyle={props.inputDetailStyle}
+          outerStyle={props.inputOuterStyle ?? {}}
+          innerStyle={props.inputInnerStyle ?? {}}
+          detailStyle={props.inputDetailStyle ?? {}}
           switchAccessibilityMode={switchAccessibilityMode}
           checkboxIcon={checkboxIcon}
         />
@@ -261,26 +262,26 @@ function Checkbox(props: ToggleInputProps) {
     disabled && colors.palette.neutral400,
     status === "error" && colors.errorBackground,
     colors.palette.neutral200,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const outerBorderColor = [
     disabled && colors.palette.neutral400,
     status === "error" && colors.error,
     !on && colors.palette.neutral800,
     colors.palette.secondary500,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const onBackgroundColor = [
     disabled && colors.transparent,
     status === "error" && colors.errorBackground,
     colors.palette.secondary500,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const iconTintColor = [
     disabled && colors.palette.neutral600,
     status === "error" && colors.error,
     colors.palette.accent100,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   return (
     <View
@@ -299,8 +300,12 @@ function Checkbox(props: ToggleInputProps) {
         ]}
       >
         <Image
-          source={iconRegistry[checkboxIcon] || iconRegistry.check}
-          style={[$checkboxDetail, { tintColor: iconTintColor }, $detailStyleOverride]}
+          source={checkboxIcon ? iconRegistry[checkboxIcon] : iconRegistry.check}
+          style={[
+            $checkboxDetail,
+            !!iconTintColor && { tintColor: iconTintColor },
+            $detailStyleOverride,
+          ]}
         />
       </Animated.View>
     </View>
@@ -321,26 +326,26 @@ function Radio(props: ToggleInputProps) {
     disabled && colors.palette.neutral400,
     status === "error" && colors.errorBackground,
     colors.palette.neutral200,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const outerBorderColor = [
     disabled && colors.palette.neutral400,
     status === "error" && colors.error,
     !on && colors.palette.neutral800,
     colors.palette.secondary500,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const onBackgroundColor = [
     disabled && colors.transparent,
     status === "error" && colors.errorBackground,
     colors.palette.neutral100,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const dotBackgroundColor = [
     disabled && colors.palette.neutral600,
     status === "error" && colors.error,
     colors.palette.secondary500,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   return (
     <View
@@ -390,13 +395,13 @@ function Switch(props: ToggleInputProps) {
     disabled && colors.palette.neutral400,
     status === "error" && colors.errorBackground,
     colors.palette.neutral300,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const onBackgroundColor = [
     disabled && colors.transparent,
     status === "error" && colors.errorBackground,
     colors.palette.secondary500,
-  ].filter(Boolean)[0]
+  ].filter((item): item is string => Boolean(item))[0]
 
   const knobBackgroundColor = (function () {
     if (on) {
@@ -405,14 +410,14 @@ function Switch(props: ToggleInputProps) {
         status === "error" && colors.error,
         disabled && colors.palette.neutral600,
         colors.palette.neutral100,
-      ].filter(Boolean)[0]
+      ].filter((item): item is string => Boolean(item))[0]
     } else {
       return [
         $innerStyleOverride?.backgroundColor,
         disabled && colors.palette.neutral600,
         status === "error" && colors.error,
         colors.palette.neutral200,
-      ].filter(Boolean)[0]
+      ].filter((item): item is string => Boolean(item))[0]
     }
   })()
 

boilerplate/app/devtools/ReactotronConfig.ts

@@ -24,14 +24,15 @@ Reactotron.configure({
 })
 
 Reactotron.use(
+  // @ts-expect-error
   mst({
     /** ignore some chatty `mobx-state-tree` actions  */
     filter: (event) => /postProcessSnapshot|@APPLY_SNAPSHOT/.test(event.name) === false,
   }),
 )
 
 if (Platform.OS !== "web") {
-  Reactotron.setAsyncStorageHandler(AsyncStorage)
+  Reactotron.setAsyncStorageHandler?.(AsyncStorage)
   Reactotron.useReactNative()
 }
 
@@ -69,10 +70,9 @@ Reactotron.onCustomCommand({
 Reactotron.onCustomCommand({
   command: "navigateTo",
   handler: (args) => {
-    const { route } = args
+    const { route } = args ?? {}
     if (route) {
       Reactotron.log(`Navigating to: ${route}`)
-      // @ts-expect-error
       navigate(route)
     } else {
       Reactotron.log("Could not navigate. No route provided.")

boilerplate/app/models/helpers/setupRootStore.ts

@@ -31,7 +31,7 @@ export async function setupRootStore(rootStore: RootStore) {
     applySnapshot(rootStore, restoredState)
   } catch (e) {
     // if there's any problems loading, then inform the dev what happened
-    if (__DEV__) {
+    if (__DEV__ && e instanceof Error) {
       console.tron.error?.(e.message, null)
     }
   }

boilerplate/app/models/helpers/useStores.ts

@@ -61,7 +61,7 @@ export const useInitialRootStore = (callback: () => void | Promise<void>) => {
 
       // reactotron integration with the MST root store (DEV only)
       if (__DEV__) {
-        console.tron.trackMstNode(rootStore)
+        console.tron.trackMstNode?.(rootStore)
       }
 
       // let the app know we've finished rehydrating

boilerplate/app/navigators/navigationUtilities.ts

@@ -128,7 +128,7 @@ export function useNavigationPersistence(storage: Storage, persistenceKey: strin
       }
 
       // Save the current route name for later comparison
-      routeNameRef.current = currentRouteName
+      routeNameRef.current = currentRouteName as keyof AppStackParamList
 
       // Persist state to storage
       storage.save(persistenceKey, state)
@@ -156,9 +156,10 @@ export function useNavigationPersistence(storage: Storage, persistenceKey: strin
  * prop. If you have access to the navigation prop, do not use this.
  * @see https://reactnavigation.org/docs/navigating-without-navigation-prop/
  */
-export function navigate(...args: Parameters<typeof navigationRef.navigate>) {
+export function navigate(name: unknown, params?: unknown) {
   if (navigationRef.isReady()) {
-    navigationRef.navigate(...args)
+    // @ts-expect-error
+    navigationRef.navigate(name as never, params as never)
   }
 }
 

boilerplate/app/screens/WelcomeScreen.tsx

@@ -27,7 +27,7 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeSc
   } = useStores()
 
   function goNext() {
-    navigation.navigate("Demo", { screen: "DemoShowroom" })
+    navigation.navigate("Demo", { screen: "DemoShowroom", params: {} })
   }
 
   useHeader(

boilerplate/app/services/api/api.ts

@@ -76,7 +76,7 @@ export class Api {
 
       return { kind: "ok", episodes }
     } catch (e) {
-      if (__DEV__) {
+      if (__DEV__ && e instanceof Error) {
         console.tron.error?.(`Bad data: ${e.message}\n${response.data}`, e.stack)
       }
       return { kind: "bad-data" }

boilerplate/app/theme/colors.ts

@@ -1,6 +1,6 @@
 // TODO: write documentation for colors and palette in own markdown file and add links from here
 
-const palette = {
+const palette: Record<string, string> = {
   neutral100: "#FFFFFF",
   neutral200: "#F4F2F1",
   neutral300: "#D7CEC9",

boilerplate/app/utils/useSafeAreaInsetsStyle.ts

@@ -12,7 +12,7 @@ const propertySuffixMap = {
   end: "End",
 }
 
-const edgeInsetMap = {
+const edgeInsetMap: Record<string, Edge> = {
   start: "left",
   end: "right",
 }
@@ -40,6 +40,6 @@ export function useSafeAreaInsetsStyle(
 
   return safeAreaEdges.reduce((acc, e) => {
     const value = edgeInsetMap[e] ?? e
-    return { ...acc, [`${property}${propertySuffixMap[e]}`]: insets[edgeInsetMap[e] ?? e] }
+    return { ...acc, [`${property}${propertySuffixMap[e]}`]: insets[value] }
   }, {})
 }

boilerplate/jest.config.js

@@ -11,4 +11,9 @@ module.exports = {
   testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.maestro/", "@react-native"],
   testEnvironment: "jsdom",
   setupFiles: ["<rootDir>/test/setup.ts"],
+  transform:{
+    '^.+\\.test.tsx?$': ['ts-jest', {
+      tsconfig: '<rootDir>/test/test-tsconfig.json'
+    }]
+  }
 }

boilerplate/test/i18n.test.ts

@@ -3,14 +3,14 @@ import { exec } from "child_process"
 
 // Use this array for keys that for whatever reason aren't greppable so they
 // don't hold your test suite hostage by always failing.
-const EXCEPTIONS = [
+const EXCEPTIONS: string[] = [
   // "welcomeScreen.readyForLaunch",
 ]
 
 function iterate(obj, stack, array) {
   for (const property in obj) {
     if (Object.prototype.hasOwnProperty.call(obj, property)) {
-      if (typeof obj[property] === "object") {
+      if (typeof (obj as object)[property] === "object") {
         iterate(obj[property], `${stack}.${property}`, array)
       } else {
         array.push(`${stack.slice(1)}.${property}`)

boilerplate/test/setup.ts

@@ -38,5 +38,5 @@ declare const tron // eslint-disable-line @typescript-eslint/no-unused-vars
 
 jest.useFakeTimers()
 declare global {
-  let __TEST__
+  let __TEST__: boolean
 }

boilerplate/test/test-tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "jsx": "react-native",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": false,
+    "sourceMap": true,
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "include": ["**/*.test.ts", "**/*.test.tsx"]
+}

boilerplate/tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "baseUrl": "./"
   },
-  "exclude": ["node_modules", "test"],
+  "extends": "expo/tsconfig.base",
   "include": ["index.js", "App.tsx", "app"],
-  "extends": "expo/tsconfig.base"
+  "exclude": ["node_modules", "test/**/*"]
 }