chore: migrate lint and format to biome

.husky/pre-commit

@@ -1,2 +1,2 @@
-npm run lint;
+npx lint-staged;
 npm run typecheck;

biome.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.12/schema.json",
+  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
+  "files": {
+    "includes": [
+      "**",
+      "!**/lib/**",
+      "!**/*.d.ts",
+      "!**/android/**",
+      "!**/ios/**"
+    ]
+  },
+  "formatter": { "indentStyle": "space", "expand": "auto" },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "single",
+      "arrowParentheses": "asNeeded"
+    }
+  },
+  "linter": {
+    "rules": {
+      "preset": "none",
+      "complexity": {
+        "noAdjacentSpacesInRegex": "error",
+        "noExtraBooleanCast": "error",
+        "noUselessCatch": "error",
+        "noUselessEscapeInRegex": "error",
+        "noUselessTypeConstraint": "error"
+      },
+      "correctness": {
+        "noChildrenProp": "error",
+        "noConstAssign": "error",
+        "noConstantCondition": "error",
+        "noEmptyCharacterClassInRegex": "error",
+        "noEmptyPattern": "error",
+        "noGlobalObjectCalls": "error",
+        "noInvalidBuiltinInstantiation": "error",
+        "noInvalidConstructorSuper": "error",
+        "noNonoctalDecimalEscape": "error",
+        "noPrecisionLoss": "error",
+        "noSelfAssign": "error",
+        "noSetterReturn": "error",
+        "noSwitchDeclarations": "error",
+        "noUndeclaredVariables": "off",
+        "noUnreachable": "error",
+        "noUnreachableSuper": "error",
+        "noUnsafeFinally": "error",
+        "noUnsafeOptionalChaining": "error",
+        "noUnusedLabels": "error",
+        "noUnusedPrivateClassMembers": "error",
+        "noUnusedVariables": "warn",
+        "useExhaustiveDependencies": "error",
+        "useHookAtTopLevel": "error",
+        "useIsNan": "error",
+        "useJsxKeyInIterable": "error",
+        "useValidForDirection": "error",
+        "useValidTypeof": "error",
+        "useYield": "error"
+      },
+      "security": { "noDangerouslySetInnerHtmlWithChildren": "error" },
+      "style": {
+        "noCommonJs": "off",
+        "noNamespace": "error",
+        "useArrayLiterals": "error",
+        "useAsConstAssertion": "error"
+      },
+      "suspicious": {
+        "noAsyncPromiseExecutor": "error",
+        "noCatchAssign": "error",
+        "noClassAssign": "error",
+        "noCommentText": "error",
+        "noCompareNegZero": "error",
+        "noConstantBinaryExpressions": "error",
+        "noControlCharactersInRegex": "error",
+        "noDebugger": "error",
+        "noDuplicateCase": "error",
+        "noDuplicateClassMembers": "error",
+        "noDuplicateElseIf": "error",
+        "noDuplicateEnumValues": "error",
+        "noDuplicateJsxProps": "error",
+        "noDuplicateObjectKeys": "error",
+        "noDuplicateParameters": "error",
+        "noEmptyBlockStatements": "error",
+        "noExplicitAny": "error",
+        "noExtraNonNullAssertion": "error",
+        "noFallthroughSwitchClause": "error",
+        "noFunctionAssign": "error",
+        "noGlobalAssign": "error",
+        "noImportAssign": "error",
+        "noIrregularWhitespace": "error",
+        "noMisleadingCharacterClass": "error",
+        "noMisleadingInstantiator": "error",
+        "noNonNullAssertedOptionalChain": "error",
+        "noPrototypeBuiltins": "error",
+        "noRedeclare": "error",
+        "noShadowRestrictedNames": "error",
+        "noSparseArray": "error",
+        "noUnknownAttribute": "error",
+        "noUnsafeDeclarationMerging": "error",
+        "noUnsafeNegation": "error",
+        "noUnusedExpressions": "off",
+        "noUselessRegexBackrefs": "error",
+        "noWith": "error",
+        "useGetterReturn": "error",
+        "useNamespaceKeyword": "error"
+      }
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["example/**"],
+      "linter": { "rules": { "suspicious": { "noExplicitAny": "off" } } }
+    }
+  ]
+}

example/demo-components/src/DemoApp.tsx

@@ -1,15 +1,15 @@
-import {DemoScreen} from './DemoScreen';
-import {LogBox, StatusBar, useColorScheme} from 'react-native';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
+import { LogBox, StatusBar, useColorScheme } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { DemoScreen } from './DemoScreen';
 
 LogBox.ignoreAllLogs();
 
 export function DemoApp() {
   const isDark = useColorScheme() === 'dark';
 
   return (
-    <GestureHandlerRootView style={{flex: 1}}>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider>
         <StatusBar
           translucent

example/demo-components/src/DemoScreen.tsx

@@ -1,12 +1,21 @@
 import { ComponentType, useCallback, useMemo, useState } from 'react';
-import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { ScenarioCard } from './components/scenario-card/ScenarioCard';
 import { Typography } from './components/typography/Typography';
+import { IS_FABRIC } from './constants';
 import { AnimatedFadeModal } from './modals/animated-fade/AnimatedFadeModal';
 import { BlockingModal } from './modals/blocking/BlockingModal';
 import { BlurredModal } from './modals/blurred/BlurredModal';
 import { DefaultModal } from './modals/default/DefaultModal';
+import { EdgeToEdgeModal } from './modals/edge-to-edge/EdgeToEdgeModal';
+import { EmbeddedModal } from './modals/embedded/EmbeddedModal';
+import { FlashModal } from './modals/flash-modal/FlashModal';
 import { FullScreenNoBackgroundModal } from './modals/full-screen-no-bg/FullScreenNoBackgroundModal';
 import { GesturedModal } from './modals/gestured/GesturedModal';
 import { InBottomTabsModal } from './modals/in-bottom-tabs-modal/InBottomTabsModal';
@@ -15,10 +24,6 @@ import { SimpleModal } from './modals/simple/SimpleModal';
 import { AnimatedSlideModal } from './modals/slide/AnimatedSlideModal';
 import { WithNavigationInsideModal } from './modals/with-navigation-inside/WithNavigationInsideModal';
 import { useTheme } from './theme/colors';
-import { IS_FABRIC } from './constants';
-import { EmbeddedModal } from './modals/embedded/EmbeddedModal';
-import { FlashModal } from './modals/flash-modal/FlashModal';
-import { EdgeToEdgeModal } from './modals/edge-to-edge/EdgeToEdgeModal';
 
 type DemoCase = {
   id: string;
@@ -35,6 +40,7 @@ export const DemoScreen = () => {
 
   const [activeCases, setActiveCases] = useState<DemoCase[]>([]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: openModal intentionally captures demoCases once and stays stable
   const openModal = useCallback((caseId: string) => {
     const demoCase = demoCases.find(c => c.id === caseId);
 
@@ -43,7 +49,6 @@ export const DemoScreen = () => {
     } else {
       console.error(`Demo case with id "${caseId}" not found.`);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const closeModal = useCallback((caseId: string) => {

example/demo-components/src/components/alert-content/AlertContent.tsx

@@ -1,10 +1,10 @@
-import {FC} from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
-import {BaseModalProps} from '../../modals/BaseModal';
-import {useTheme} from '../../theme/colors';
-import {Button} from '../button/Button';
-import {DocumentationLinkText} from '../documentation-link-text/DocumentationLinkText';
-import {Typography} from '../typography/Typography';
+import { FC } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { BaseModalProps } from '../../modals/BaseModal';
+import { useTheme } from '../../theme/colors';
+import { Button } from '../button/Button';
+import { DocumentationLinkText } from '../documentation-link-text/DocumentationLinkText';
+import { Typography } from '../typography/Typography';
 
 type AlertContentProps = {
   style?: StyleProp<ViewStyle>;
@@ -16,7 +16,7 @@ export const AlertContent: FC<AlertContentProps> = ({
   title,
   style,
 }) => {
-  const {colors} = useTheme();
+  const { colors } = useTheme();
 
   return (
     <View
@@ -28,8 +28,9 @@ export const AlertContent: FC<AlertContentProps> = ({
         },
         style,
       ]}
-      testID={`${testID}-modal`}>
-      <Typography variant="title" color="primary">
+      testID={`${testID}-modal`}
+    >
+      <Typography variant='title' color='primary'>
         {title}
       </Typography>
 

example/demo-components/src/components/button/Button.tsx

@@ -1,36 +1,37 @@
-import {FC, ReactNode} from 'react';
+import { FC, ReactNode } from 'react';
 import {
   Pressable,
   PressableProps,
   StyleProp,
   StyleSheet,
   ViewStyle,
 } from 'react-native';
-import {useTheme} from '../../theme/colors';
-import {Typography} from '../../components/typography/Typography';
+import { Typography } from '../../components/typography/Typography';
+import { useTheme } from '../../theme/colors';
 
 type ButtonProps = Omit<PressableProps, 'style'> & {
   style?: StyleProp<ViewStyle>;
   children: string | ReactNode;
 };
 
-export const Button: FC<ButtonProps> = ({children, ...props}) => {
-  const {colors} = useTheme();
+export const Button: FC<ButtonProps> = ({ children, ...props }) => {
+  const { colors } = useTheme();
 
   return (
     <Pressable
       {...props}
       disabled={!props.onPress}
-      style={({pressed}) => [
+      style={({ pressed }) => [
         styles.button,
         props.style,
         pressed && styles.buttonPressed,
         {
           backgroundColor: colors.textPrimary,
         },
-      ]}>
+      ]}
+    >
       {typeof children === 'string' ? (
-        <Typography style={[styles.title, {color: colors.background}]}>
+        <Typography style={[styles.title, { color: colors.background }]}>
           {children}
         </Typography>
       ) : (

example/demo-components/src/components/compat/navigation-container/NavigationContainerCompat.tsx

@@ -1,4 +1,4 @@
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 
 // Related issues:
 // https://github.com/software-mansion/react-native-screens/issues/1769
@@ -13,7 +13,7 @@ const initNavigationContainer = () => {
         <NavigationContainer {...props} />
       </IndependentTree>
     );
-  } catch (e) {
+  } catch {
     // v6
     // @ts-ignore
     return (props: any) => <NavigationContainer independent {...props} />;

example/demo-components/src/components/documentation-link-text/DocumentationLinkText.native.tsx

@@ -1,16 +1,16 @@
-import {LIBRARY_GIT_URL} from '../../constants';
-import {Typography} from '../typography/Typography';
 // @ts-ignore
 import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
+import { LIBRARY_GIT_URL } from '../../constants';
+import { Typography } from '../typography/Typography';
 
 export const DocumentationLinkText = () => {
   const handlePress = () => {
     openURLInBrowser(LIBRARY_GIT_URL);
   };
 
   return (
-    <Typography color="secondary" onPress={handlePress}>
+    <Typography color='secondary' onPress={handlePress}>
       Press the description to open the library documentation page.
     </Typography>
   );
-};
+};