software-mansion · tjzel · Oct 23, 2025 · Oct 13, 2025 · Oct 13, 2025 · Oct 13, 2025
diff --git a/.github/actions/reanimated-typescript-compatibility-check/action.yml b/.github/actions/reanimated-typescript-compatibility-check/action.yml
@@ -19,10 +19,15 @@ runs:
       shell: bash
       run: yarn up react-native@${{ inputs.react-native-version }}
 
-    - name: Check source types
+    - name: Check native source types
       shell: bash
       working-directory: packages/react-native-reanimated
-      run: yarn type:check:src
+      run: yarn type:check:src:native
+
+    - name: Check web source types
+      shell: bash
+      working-directory: packages/react-native-reanimated
+      run: yarn type:check:src:web
 
     - name: Check plugin types
       shell: bash

diff --git a/.lintstagedrc-common.js b/.lintstagedrc-common.js
@@ -1,4 +1,4 @@
-/** @type {import('lint-staged').Config} */
+/** @type {import('lint-staged').Configuration} */
 module.exports = {
   '*.(js|jsx|ts|tsx)': [
     'yarn eslint --flag v10_config_lookup_from_file',

diff --git a/apps/common-app/.lintstagedrc.js b/apps/common-app/.lintstagedrc.js
@@ -1,7 +1,8 @@
-/** @type {import('lint-staged').Config} */
+/* eslint-disable @typescript-eslint/no-require-imports */
+/** @type {import('lint-staged').Configuration} */
 const commonConfig = require('../../.lintstagedrc-common.js');
 
-/** @type {import('lint-staged').Config} */
+/** @type {import('lint-staged').Configuration} */
 module.exports = {
   ...commonConfig,
 };
diff --git a/apps/common-app/eslint.config.mjs b/apps/common-app/eslint.config.mjs
@@ -1,17 +1,18 @@
+import { fixupPluginRules } from '@eslint/compat';
 import jsEslint from '@eslint/js';
-import tsEslint from 'typescript-eslint';
-import perfectionist from 'eslint-plugin-perfectionist';
-import reactNative from 'eslint-plugin-react-native';
-import react from 'eslint-plugin-react';
-import globals from 'globals';
 import importPlugin from 'eslint-plugin-import';
+import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
+import perfectionist from 'eslint-plugin-perfectionist';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import react from 'eslint-plugin-react';
+// eslint-disable-next-line import/default
 import reactHooks from 'eslint-plugin-react-hooks';
-import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
+// @ts-expect-error eslint-plugin-react-native has no types.
+import reactNative from 'eslint-plugin-react-native';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import unusedImports from 'eslint-plugin-unused-imports';
-import { fixupPluginRules } from '@eslint/compat';
-import { globalIgnores } from 'eslint/config';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
 
 /** @type {import('typescript-eslint').ConfigWithExtends[]} */
 export default tsEslint.config(
@@ -21,14 +22,30 @@ export default tsEslint.config(
   eslintPluginPrettierRecommended,
   {
     languageOptions: {
+      parserOptions: {
+        parser: tsEslint.parser,
+        project: [
+          './tsconfig.json',
+          './tsconfig.web.json',
+          './../../tsconfig.json',
+        ],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    languageOptions: {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       globals: {
         React: true,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         ...reactNative.environments['react-native']['react-native'],
         ...globals.node,
       },
     },
     plugins: {
       'no-relative-import-paths': noRelativeImportPaths,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       'react-native': fixupPluginRules(reactNative),
       'simple-import-sort': simpleImportSort,
       'unused-imports': unusedImports,
@@ -267,7 +284,6 @@ export default tsEslint.config(
       'import/resolver': {
         typescript: {
           alwaysTryTypes: true,
-          project: './tsconfig.json',
         },
       },
       react: {
@@ -276,15 +292,7 @@ export default tsEslint.config(
     },
   },
   {
-    files: ['**/*.ts', '**/*.tsx'],
     extends: [tsEslint.configs.recommendedTypeChecked],
-    languageOptions: {
-      parserOptions: {
-        parser: tsEslint.parser,
-        project: './tsconfig.json',
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
     rules: {
       '@typescript-eslint/array-type': ['error', { default: 'generic' }],
       '@typescript-eslint/consistent-type-exports': 'error',
@@ -328,6 +336,5 @@ export default tsEslint.config(
       '@typescript-eslint/no-unsafe-member-access': 'error',
       'no-underscore-dangle': 'error',
     },
-  },
-  globalIgnores(['**/eslint.config.mjs'])
+  }
 );
diff --git a/apps/common-app/package.json b/apps/common-app/package.json
@@ -7,7 +7,9 @@
     "lint": "eslint . --flag v10_config_lookup_from_file",
     "format": "prettier --write --list-different .",
     "circular-dependency-check": "yarn madge --extensions js,jsx,ts,tsx --circular src",
-    "type:check": "tsc --noEmit",
+    "type:check": "yarn type:check:native && yarn type:check:web",
+    "type:check:native": "tsc --noEmit",
+    "type:check:web": "tsc --noEmit --project tsconfig.web.json",
     "type:check:strict": "tsc --noEmit --customConditions react-native-strict-api"
   },
   "peerDependencies": {

diff --git a/apps/common-app/scripts/dependencies.js b/apps/common-app/scripts/dependencies.js
@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const path = require('path');
 
 /**

diff --git a/apps/common-app/src/apps/css/components/cards/ExpandableCard.tsx b/apps/common-app/src/apps/css/components/cards/ExpandableCard.tsx
@@ -50,6 +50,9 @@ export default function ExpandableCard({
           style={[styles.overlay, { height: overlayHeight }]}>
           <Animated.View style={[styles.gradient, animatedGradientStyle]}>
             <Svg height={overlayHeight} width="100%">
+              {/* TODO: Fix me */}
+              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+              {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
               <Defs>
                 <LinearGradient
                   id="vertical-gradient"

diff --git a/apps/common-app/src/apps/css/components/inputs/TabSelector.tsx b/apps/common-app/src/apps/css/components/inputs/TabSelector.tsx
@@ -83,6 +83,9 @@ function TabSelector<T extends string>({
     () => (
       <View pointerEvents="none" style={StyleSheet.absoluteFill}>
         <Svg>
+          {/* TODO: Fix me */}
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
           <Defs>
             <LinearGradient id="tab-selector" x1="0" x2="1" y1="0" y2="0">
               <Stop

diff --git a/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx b/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx
@@ -84,10 +84,16 @@ function Rocket({ size }: RocketProps) {
   return (
     <Svg
       viewBox="0 0 180 179" // Set the fixed viewBox based on the original SVG dimensions
+      // TODO: Fix me
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
       style={{
         height: size,
         width: size,
       }}>
+      {/* TODO: Fix me */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
       <Defs>
         <LinearGradient id="rocket-card" x1="0" x2="1" y1="0" y2="0">
           <Stop offset="0" stopColor={colors.background2} />
@@ -131,6 +137,9 @@ type FlameProps = {
 function Flame({ height, width }: FlameProps) {
   return (
     <Svg height={height} width={width}>
+      {/* TODO: Fix me */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
       <Defs>
         <LinearGradient id="flame-card" x1="0" x2="1" y1="0" y2="0">
           <Stop offset="0" stopColor={colors.primaryLight} />

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Circle.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Circle.tsx
@@ -1,4 +1,7 @@
 import Animated, { type CSSAnimationKeyframes } from 'react-native-reanimated';
+// TODO: Fix me
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
 import { Circle, type CircleProps, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Ellipse.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Ellipse.tsx
@@ -1,4 +1,7 @@
 import Animated, { type CSSAnimationKeyframes } from 'react-native-reanimated';
+// TODO: Fix me
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
 import { Ellipse, type EllipseProps, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Line.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Line.tsx
@@ -1,4 +1,7 @@
 import Animated, { type CSSAnimationKeyframes } from 'react-native-reanimated';
+// TODO: Fix me
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
 import { Line, type LineProps, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Rect.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Rect.tsx
@@ -1,4 +1,7 @@
 import Animated, { type CSSAnimationKeyframes } from 'react-native-reanimated';
+// TODO: Fix me
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
 import { Rect, type RectProps, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';

diff --git a/...p/src/apps/css/examples/animations/screens/animatedProperties/svg/common/FillAndColor.tsx b/...p/src/apps/css/examples/animations/screens/animatedProperties/svg/common/FillAndColor.tsx
@@ -1,13 +1,16 @@
+import type { JSX } from 'react';
 import Animated, {
   type CSSAnimationKeyframes,
   type CSSAnimationProperties,
 } from 'react-native-reanimated';
+// TODO: Fix me
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
 import type { CircleProps, PolygonProps } from 'react-native-svg';
 import { Circle, Polygon, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';
 import type { AnyRecord } from '@/types';
-import type { JSX } from 'react';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedPolygon = Animated.createAnimatedComponent(Polygon);

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Emojis.tsx b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Emojis.tsx
@@ -283,8 +283,14 @@ function YayEmoji() {
       </View>
       <Svg
         height={0.5 * EMOJI_SIZE}
+        // TODO: Fix me
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
         style={yayStyles.cheeks}
         width={EMOJI_SIZE}>
+        {/* TODO: Fix me */}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
         <Defs>
           <RadialGradient cx="50%" cy="50%" id="yay" rx="50%" ry="50%">
             <Stop offset="0" stopColor={COLORS.red} stopOpacity="0.3" />
@@ -628,8 +634,14 @@ function AngryEmoji() {
     <View style={angryStyles.emoji}>
       <Svg
         height={EMOJI_SIZE}
+        // TODO: Fix me
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
         style={StyleSheet.absoluteFill}
         width={EMOJI_SIZE}>
+        {/* TODO: Fix me */}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
         <Defs>
           <LinearGradient id="angry" x1="0" x2="0" y1="0" y2="1">
             <Stop offset="0" stopColor={COLORS.red} stopOpacity="1" />

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx
@@ -67,7 +67,13 @@ export default function RocketInSpace() {
     <Screen style={styles.container}>
       <View style={styles.scene}>
         <Animated.View style={styles.turbulence}>
+          {/* TODO: Fix me */}
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
           <Svg style={styles.rocket}>
+            {/* TODO: Fix me */}
+            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+            {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
             <Defs>
               <LinearGradient id="rocket" x1="0" x2="1" y1="0" y2="0">
                 <Stop offset="0" stopColor={COLORS.grayLightest} />
@@ -186,6 +192,9 @@ type FlameProps = {
 function Flame({ height, width }: FlameProps) {
   return (
     <Svg height={height} width={width}>
+      {/* TODO: Fix me */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
       <Defs>
         <LinearGradient id="flame" x1="0" x2="1" y1="0" y2="0">
           <Stop offset="0" stopColor={COLORS.orange} />

diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx
@@ -103,6 +103,9 @@ function GalleryCard({
   const gradient = useMemo(
     () => (
       <Svg height="100%" width="100%">
+        {/* TODO: Fix me */}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
         <Defs>
           <LinearGradient id="gallery" x1="0" x2="0" y1="0" y2="1">
             <Stop offset="0" stopColor={colors.black} stopOpacity="0" />

diff --git a/apps/common-app/src/apps/css/navigation/BottomTabBar.tsx b/apps/common-app/src/apps/css/navigation/BottomTabBar.tsx
@@ -59,6 +59,9 @@ export default function BottomTabBar({
   const gradient = useMemo(
     () => (
       <Svg height="100%" width="100%">
+        {/* TODO: Fix me */}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
         <Defs>
           <LinearGradient id="bottom-tab-bar" x1="0" x2="0" y1="0" y2="1">
             <Stop offset="0" stopColor={colors.black} stopOpacity="0" />

diff --git a/apps/common-app/src/apps/reanimated/eslint.config.mjs b/apps/common-app/src/apps/reanimated/eslint.config.mjs
@@ -1,10 +1,12 @@
 import jsEslint from '@eslint/js';
 import tsEslint from 'typescript-eslint';
+// @ts-expect-error No types for this package.
 import reactNative from 'eslint-plugin-react-native';
 import { fixupPluginRules } from '@eslint/compat';
 import { globalIgnores } from 'eslint/config';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import reanimated from 'eslint-plugin-reanimated';
+// @ts-expect-error No types for this package.
 import noInlineStyles from 'eslint-plugin-no-inline-styles';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
@@ -15,6 +17,14 @@ export default tsEslint.config(
   jsEslint.configs.recommended,
   react.configs.flat.recommended,
   eslintPluginPrettierRecommended,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: ['../../../tsconfig.json', './../../../tsconfig.web.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
   {
     languageOptions: {
       globals: {
@@ -58,7 +68,6 @@ export default tsEslint.config(
       'import/resolver': {
         typescript: {
           alwaysTryTypes: true,
-          project: '../../../tsconfig.json',
         },
       },
       react: {
@@ -69,12 +78,6 @@ export default tsEslint.config(
   {
     files: ['**/*.ts', '**/*.tsx'],
     extends: [tsEslint.configs.recommendedTypeChecked],
-    languageOptions: {
-      parserOptions: {
-        project: '../../../tsconfig.json',
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
     rules: {
       '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/no-var-requires': 'error',

diff --git a/apps/common-app/src/apps/reanimated/examples/PlanetsExample.tsx b/apps/common-app/src/apps/reanimated/examples/PlanetsExample.tsx
@@ -99,6 +99,9 @@ function BottomSun() {
 export default function PlanetsExample() {
   return (
     <View style={styles.container}>
+      {/* TODO: Fix me */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
       <Svg viewBox="-200 -200 400 400" style={styles.svg}>
         <BottomSun />
         <Planet

diff --git a/apps/common-app/src/apps/reanimated/examples/RuntimeTests/ReJest/RuntimeTestsRunner.tsx b/apps/common-app/src/apps/reanimated/examples/RuntimeTests/ReJest/RuntimeTestsRunner.tsx
@@ -137,9 +137,17 @@ function TestSelector({ tests, testSelectionCallbacks }: TestSelectorProps) {
         renderItem={({ item }) => {
           return (
             <SelectTest
+              // TODO: Fix me
+              // @ts-ignore RNGH types for web FlatList are broken.
               key={item.testSuiteName}
+              // TODO: Fix me
+              // @ts-ignore RNGH types for web FlatList are broken.
               disabled={item.disabled}
+              // TODO: Fix me
+              // @ts-ignore RNGH types for web FlatList are broken.
               testSuiteName={item.testSuiteName}
+              // TODO: Fix me
+              // @ts-ignore RNGH types for web FlatList are broken.
               selectClick={() => selectClick(item)}
               selectedTests={selectedTests}
             />