fix: bump packages, eslint, tsconfig, prettier and resolve all conflicts (#2114)

PR bumping packages, eslint, tsconfig, prettier and resolving all conflicts connected to it.
2025-12-05 22:56:11 +00:00 · 2023-08-07 17:44:58 +02:00
parent 3599c57e31
commit 416ccc8a86
64 changed files with 4762 additions and 4382 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,13 +0,0 @@
-# EditorConfig is awesome: http://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-charset = utf-8
-end_of_line = lf
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-insert_final_newline = true
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,12 +1,38 @@
 module.exports = {
-  extends: '@react-native-community',
-  parserOptions: {
-    project: ["./tsconfig.json"],
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'standard',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:import/typescript',
+  ],
+  plugins: ['react', 'react-native', 'import', '@typescript-eslint', 'react-hooks'],
+  env: {
+    'react-native/react-native': true,
+  },
+  settings: {
+    'import/resolver': {
+      'babel-module': {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
  },
  rules: {
-    'no-bitwise': 'off',
-    '@typescript-eslint/consistent-type-exports': 'error',
-    '@typescript-eslint/consistent-type-imports': 'error',
-    '@typescript-eslint/no-explicit-any': 'error',
+    'import/no-unresolved': 'error',
+    'react/jsx-uses-vars': 'error',
+    'react/jsx-uses-react': 'error',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      {
+        'ts-ignore': 'allow-with-description',
+        'ts-expect-error': 'allow-with-description',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-var-requires': 'warn',
+    eqeqeq: 'error',
+    'no-unreachable': 'error',
  },
 };
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,13 +0,0 @@
-[ignore]
-.*/node_modules/resolve/test/resolver/malformed_package_json/package.json
-
-[include]
-
-[libs]
-flow-typed
-
-[lints]
-
-[options]
-
-[strict]
--- a/.github/workflows/js-build-test.yml
+++ b/.github/workflows/js-build-test.yml
@@ -15,10 +15,10 @@ jobs:
    steps:
      - name: checkout
        uses: actions/checkout@v2
-      - name: Use Node.js 16
+      - name: Use Node.js 18
        uses: actions/setup-node@v2
        with:
-          node-version: 16
+          node-version: 18
          cache: 'yarn'
          cache-dependency-path: 'yarn.lock'
      - name: Install node dependencies
@@ -30,4 +30,3 @@ jobs:
      - name: Build Example App
        working-directory: Example/
        run: yarn && yarn tsc
-
--- a/.gitignore
+++ b/.gitignore
@@ -46,7 +46,6 @@ cn-doc.md
 experimental/

 /lib/
-/flow-typed/

 # VS Code
 .vscode/
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all"
-}
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,8 +1,8 @@
 module.exports = {
-  arrowParens: 'avoid',
-  jsxBracketSameLine: true,
  bracketSameLine: true,
-  bracketSpacing: false,
+  printWidth: 80,
  singleQuote: true,
-  trailingComma: 'all',
+  trailingComma: 'es5',
+  tabWidth: 2,
+  arrowParens: 'always',
 };
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,8 +0,0 @@
-sudo: false
-
-language: node_js
-node_js:
-  - '12'
-
-script:
-  - npm test
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -22,7 +22,6 @@ We use `typescript` for type checks, `eslint` with `prettier` for linting/format
 - `yarn test`: Run all tests, except for e2e (see note below).
 - `yarn lint`: Run `eslint` check.
 - `yarn tsc`: Run `typescript` check.
- `yarn flow`: Run `flow` type check.
 - `yarn jest`: Run `jest` type check.

 Currently e2e tests exist here: https://github.com/msand/react-native-svg-e2e/
--- a/Example/ios/Podfile.lock
+++ b/Example/ios/Podfile.lock
@@ -484,7 +484,7 @@ PODS:
    - React-jsi (= 0.72.1)
    - React-logger (= 0.72.1)
    - React-perflogger (= 0.72.1)
-  - RNReanimated (3.3.0):
+  - RNReanimated (3.4.2):
    - DoubleConversion
    - FBLazyVector
    - glog
@@ -513,7 +513,7 @@ PODS:
    - React-RCTText
    - ReactCommon/turbomodule/core
    - Yoga
-  - RNSVG (13.9.0):
+  - RNSVG (13.10.0):
    - React-Core
  - SocketRocket (0.6.1)
  - Yoga (1.14.0)
@@ -740,8 +740,8 @@ SPEC CHECKSUMS:
  React-runtimescheduler: 67707a955b9ecc628cc38bdc721fbc498910f0fd
  React-utils: 0a70ea97d4e2749f336b450c082905be1d389435
  ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b
-  RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
-  RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
+  RNReanimated: 726395a2fa2f04cea340274ba57a4e659bc0d9c1
+  RNSVG: ee7e4ae98adade9ad8a12e7f9276504e71bd3ef7
  SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
  Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
--- a/Example/package.json
+++ b/Example/package.json
@@ -17,13 +17,14 @@
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.72.1",
-    "react-native-reanimated": "^3.3.0",
+    "react-native-reanimated": "^3.4.2",
    "react-native-svg": "link:../",
    "react-native-web": "^0.18.12",
    "react-native-windows": "0.72.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
--- a/Example/yarn.lock
+++ b/Example/yarn.lock
--- a/FabricExample/ios/Podfile.lock
+++ b/FabricExample/ios/Podfile.lock
@@ -1057,7 +1057,7 @@ PODS:
    - React-jsi (= 0.72.1)
    - React-logger (= 0.72.1)
    - React-perflogger (= 0.72.1)
-  - RNReanimated (3.3.0):
+  - RNReanimated (3.4.2):
    - DoubleConversion
    - FBLazyVector
    - glog
@@ -1087,23 +1087,39 @@ PODS:
    - React-RCTText
    - ReactCommon/turbomodule/core
    - Yoga
-  - RNSVG (13.9.0):
-    - RCT-Folly
+  - RNSVG (13.10.0):
+    - hermes-engine
+    - RCT-Folly (= 2021.07.22.00)
    - RCTRequired
    - RCTTypeSafety
-    - React
    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-NativeModulesApple
    - React-RCTFabric
+    - React-utils
+    - ReactCommon/turbomodule/bridging
    - ReactCommon/turbomodule/core
-    - RNSVG/common (= 13.9.0)
-  - RNSVG/common (13.9.0):
-    - RCT-Folly
+    - RNSVG/common (= 13.10.0)
+    - Yoga
+  - RNSVG/common (13.10.0):
+    - hermes-engine
+    - RCT-Folly (= 2021.07.22.00)
    - RCTRequired
    - RCTTypeSafety
-    - React
    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-NativeModulesApple
    - React-RCTFabric
+    - React-utils
+    - ReactCommon/turbomodule/bridging
    - ReactCommon/turbomodule/core
+    - Yoga
  - SocketRocket (0.6.1)
  - Yoga (1.14.0)
  - YogaKit (1.18.1):
@@ -1342,8 +1358,8 @@ SPEC CHECKSUMS:
  React-runtimescheduler: 67707a955b9ecc628cc38bdc721fbc498910f0fd
  React-utils: 0a70ea97d4e2749f336b450c082905be1d389435
  ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b
-  RNReanimated: 3ce2aec600ad2ef47a5927abf2742329d7a190e9
-  RNSVG: e6e82189bac969a139b3bb4740364a2e8aac31ec
+  RNReanimated: 5008fe999d57038a1c5c1163044854d453f41b98
+  RNSVG: b677ab45318fca9f50dc361c1e3fd7c558dd0963
  SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
  Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
--- a/FabricExample/package.json
+++ b/FabricExample/package.json
@@ -12,7 +12,7 @@
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.1",
-    "react-native-reanimated": "^3.3.0",
+    "react-native-reanimated": "^3.4.2",
    "react-native-svg": "link:../"
  },
  "devDependencies": {
--- a/FabricExample/yarn.lock
+++ b/FabricExample/yarn.lock
--- a/RNSVG.podspec
+++ b/RNSVG.podspec
@@ -11,46 +11,25 @@ Pod::Spec.new do |s|
  s.license           = package['license']
  s.homepage          = package['homepage']
  s.authors           = 'Horcrux Chen'
-  s.platforms         = { :osx => "10.14", :ios => "9.0", :tvos => "9.2" }
  s.source            = { :git => 'https://github.com/react-native-community/react-native-svg.git', :tag => "v#{s.version}" }
+  s.source_files    = 'apple/**/*.{h,m,mm}'
+  s.ios.exclude_files = '**/*.macos.{h,m,mm}'
+  s.tvos.exclude_files = '**/*.macos.{h,m,mm}'
+  s.osx.exclude_files = '**/*.ios.{h,m,mm}'
+  s.requires_arc    = true

  if fabric_enabled
-    # folly_version must match the version used in React Native
-    # See folly_version in react-native/React/FBReactNativeSpec/FBReactNativeSpec.podspec
-    folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+    s.platforms = { :osx => "10.14", ios: '12.4', tvos: '11.0' }
+    install_modules_dependencies(s)

-    s.pod_target_xcconfig = {
-      'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native"  "$(PODS_ROOT)/RCT-Folly"',
-      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
-    }
-    s.platforms       = { ios: '12.4', tvos: '11.0' }
-    s.compiler_flags  = folly_compiler_flags + ' -DRCT_NEW_ARCH_ENABLED'
-    s.source_files    = 'apple/**/*.{h,m,mm,cpp}'
-    s.ios.exclude_files = '**/*.macos.{h,m,mm,cpp}'
-    s.tvos.exclude_files = '**/*.macos.{h,m,mm,cpp}'
-    s.osx.exclude_files = '**/*.ios.{h,m,mm,cpp}'
-    s.requires_arc    = true
-  
-    s.dependency "React"
-    s.dependency "React-RCTFabric"
-    s.dependency "React-Codegen"
-    s.dependency "RCT-Folly"
-    s.dependency "RCTRequired"
-    s.dependency "RCTTypeSafety"
-    s.dependency "ReactCommon/turbomodule/core"
-    
    s.subspec "common" do |ss|
      ss.source_files         = "common/cpp/**/*.{cpp,h}"
      ss.header_dir           = "rnsvg"
      ss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\"" }
    end
  else 
-    s.source_files       = 'apple/**/*.{h,m,mm}'
+    s.platforms         = { :osx => "10.14", :ios => "9.0", :tvos => "9.2" }
    s.exclude_files      = 'apple/Utils/RNSVGFabricConversions.h'
-    s.ios.exclude_files  = '**/*.macos.{h,m,mm}'
-    s.tvos.exclude_files = '**/*.macos.{h,m,mm}'
-    s.osx.exclude_files  = '**/*.ios.{h,m,mm}'
-    s.requires_arc       = true
    s.dependency           'React-Core'
  end
 end
--- a/USAGE.md
+++ b/USAGE.md
@@ -41,8 +41,7 @@ export default class SvgExample extends React.Component {
        style={[
          StyleSheet.absoluteFill,
          { alignItems: 'center', justifyContent: 'center' },
-        ]}
-      >
+        ]}>
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle
            cx="50"
@@ -131,7 +130,7 @@ import { SvgFallback } from './components/SvgFallback';

 export default () => {
  const [uri, setUri] = React.useState(
-    'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg',
+    'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg'
  );
  return (
    <SvgUri
@@ -156,7 +155,7 @@ Try [react-native-svg-transformer](https://github.com/kristerkari/react-native-s
 `metro.config.js` for react-native >= 0.72

 ```js
-const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

 const defaultConfig = getDefaultConfig(__dirname);
 const { assetExts, sourceExts } = defaultConfig.resolver;
@@ -169,12 +168,12 @@ const { assetExts, sourceExts } = defaultConfig.resolver;
 */
 const config = {
  transformer: {
-    babelTransformerPath: require.resolve("react-native-svg-transformer")
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
-    assetExts: assetExts.filter((ext) => ext !== "svg"),
-    sourceExts: [...sourceExts, "svg"]
-  }
+    assetExts: assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...sourceExts, 'svg'],
+  },
 };

 module.exports = mergeConfig(defaultConfig, config);
@@ -339,8 +338,7 @@ Colors set in the Svg element are inherited by its children:
  fill="blue"
  stroke="red"
  color="green"
-  viewBox="-16 -16 544 544"
->
+  viewBox="-16 -16 544 544">
  <Path
    d="M318.37,85.45L422.53,190.11,158.89,455,54.79,350.38ZM501.56,60.2L455.11,13.53a45.93,45.93,0,0,0-65.11,0L345.51,58.24,449.66,162.9l51.9-52.15A35.8,35.8,0,0,0,501.56,60.2ZM0.29,497.49a11.88,11.88,0,0,0,14.34,14.17l116.06-28.28L26.59,378.72Z"
    strokeWidth="32"
@@ -534,8 +532,7 @@ The <Text> element is used to define text.
    fontWeight="bold"
    x="100"
    y="20"
-    textAnchor="middle"
-  >
+    textAnchor="middle">
    STROKED TEXT
  </Text>
 </Svg>
@@ -709,8 +706,7 @@ The <Image> element allows a raster image to be included in an Svg component.
    textAnchor="middle"
    fontWeight="bold"
    fontSize="16"
-    fill="blue"
-  >
+    fill="blue">
    HOGWARTS
  </Text>
 </Svg>
@@ -733,8 +729,7 @@ The <ClipPath> SVG element defines a clipping path. A clipping path is used/refe
      ry="50%"
      fx="50%"
      fy="50%"
-      gradientUnits="userSpaceOnUse"
-    >
+      gradientUnits="userSpaceOnUse">
      <Stop offset="0%" stopColor="#ff0" stopOpacity="1" />
      <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
    </RadialGradient>
@@ -750,8 +745,7 @@ The <ClipPath> SVG element defines a clipping path. A clipping path is used/refe
          fontSize="32"
          fontWeight="bold"
          textAnchor="middle"
-          scale="1.2"
-        >
+          scale="1.2">
          Q
        </Text>
      </G>
@@ -829,8 +823,7 @@ The <RadialGradient> element is used to define a radial gradient. The <RadialGra
      ry="55"
      fx="150"
      fy="75"
-      gradientUnits="userSpaceOnUse"
-    >
+      gradientUnits="userSpaceOnUse">
      <Stop offset="0" stopColor="#ff0" stopOpacity="1" />
      <Stop offset="1" stopColor="#83a" stopOpacity="1" />
    </RadialGradient>
@@ -869,8 +862,7 @@ The <Mask> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&lt;D
      x1="0"
      y1="0"
      x2="800"
-      y2="0"
-    >
+      y2="0">
      <Stop offset="0" stopColor="white" stopOpacity="0" />
      <Stop offset="1" stopColor="white" stopOpacity="1" />
    </LinearGradient>
@@ -880,8 +872,7 @@ The <Mask> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&lt;D
      x="0"
      y="0"
      width="800"
-      height="300"
-    >
+      height="300">
      <Rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
    </Mask>
    <Text
@@ -890,8 +881,7 @@ The <Mask> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&lt;D
      y="200"
      fontFamily="Verdana"
      fontSize="100"
-      textAnchor="middle"
-    >
+      textAnchor="middle">
      Masked text
    </Text>
  </Defs>
@@ -927,8 +917,7 @@ The <Pattern> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&l
      y="0"
      width="100"
      height="100"
-      viewBox="0 0 10 10"
-    >
+      viewBox="0 0 10 10">
      <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
    </Pattern>
  </Defs>
@@ -968,8 +957,7 @@ The graphics for a marker are defined by a ‘marker’ element. To indicate tha
      markerUnits="strokeWidth"
      markerWidth="4"
      markerHeight="3"
-      orient="auto"
-    >
+      orient="auto">
      <Path d="M 0 0 L 10 5 L 0 10 z" />
    </Marker>
  </Defs>
@@ -1129,8 +1117,7 @@ export default class App extends Component {
              x1="0"
              y1="0"
              x2="800"
-              y2="0"
-            >
+              y2="0">
              <Stop offset="0" stopColor="white" stopOpacity="0.2" />
              <Stop offset="1" stopColor="white" stopOpacity="1" />
            </LinearGradient>
@@ -1140,8 +1127,7 @@ export default class App extends Component {
              x="0"
              y="0"
              width="800"
-              height="300"
-            >
+              height="300">
              <Rect
                x="0"
                y="0"
--- a/tests/css.test.tsx
+++ b/tests/css.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import renderer from 'react-test-renderer';
 import { SvgCss, parse, inlineStyles } from '../src/ReactNativeSVG';

--- a/jest.config.ts
+++ b/jest.config.ts
@@ -1,7 +1,7 @@
 import { Config } from '@jest/types';

 const config: Config.InitialOptions = {
-  testPathIgnorePatterns: ['/node_modules/', '/Example/', '/TestsExample/'],
+  testPathIgnorePatterns: ['/node_modules/', '/Example/', '/TestsExample/', '/FabricExample/'],
  preset: 'react-native',
  verbose: true,
 };
--- a/package.json
+++ b/package.json
@@ -13,11 +13,9 @@
  "types": "lib/typescript/index.d.ts",
  "react-native": "src/index.ts",
  "files": [
-    "__tests__",
    "android",
    "apple",
    "common",
-    "elements",
    "lib",
    "src",
    "RNSVG.podspec",
@@ -47,8 +45,6 @@
  ],
  "scripts": {
    "bob": "bob build",
-    "flow": "flow src",
-    "flowtyped": "flow-typed install",
    "format": "yarn format-js && yarn format-ios && yarn format-java",
    "format-ios": "find apple/ common/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
    "format-java": "node ./scripts/format-java.js",
@@ -70,45 +66,42 @@
    "css-tree": "^1.1.3"
  },
  "devDependencies": {
-    "@react-native-community/cli": "^9.0.0",
-    "@react-native-community/cli-platform-android": "^9.0.0",
-    "@react-native-community/cli-platform-ios": "^9.0.0",
    "@react-native-community/eslint-config": "^3.0.2",
    "@react-native-community/eslint-plugin": "^1.2.0",
    "@react-native/babel-plugin-codegen": "^0.71.0",
+    "@react-native/eslint-config": "^0.72.2",
    "@types/css-tree": "^1.0.3",
    "@types/jest": "^27.5.2",
    "@types/node": "*",
-    "@types/react": "~18.0.15",
-    "@types/react-native": "^0.70.0",
+    "@types/react": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^28.1.0",
+    "babel-plugin-module-resolver": "^5.0.0",
    "clang-format": "^1.8.0",
-    "eslint": "^8.16.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "flow-bin": "^0.119.1",
-    "flow-typed": "^3.0.0",
-    "flowgen": "^1.10.0",
+    "eslint": "^8.44.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-import-resolver-babel-module": "^5.3.2",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-standard": "^5.0.0",
    "husky": "^8.0.1",
    "jest": "^28.1.0",
    "lint-staged": "^13.0.3",
    "pegjs": "^0.10.0",
-    "prettier": "^2.6.2",
-    "react": "^17.0.1",
-    "react-native": "^0.64.0",
+    "prettier": "3.0.1",
+    "react": "^18.2.0",
+    "react-native": "^0.72.3",
    "react-native-builder-bob": "^0.20.4",
-    "react-native-windows": "^0.64.0",
-    "react-test-renderer": "^16.13.0",
+    "react-native-windows": "^0.72.4",
+    "react-test-renderer": "^18.2.0",
    "release-it": "^14.12.5",
    "ts-node": "^10.8.0",
-    "typescript": "^4.7.2"
-  },
-  "resolutions": {
-    "@react-native-community/cli-platform-android": "^9.0.0",
-    "@react-native-community/cli": "^9.0.0",
-    "@react-native-community/cli-platform-ios": "^9.0.0"
+    "typescript": "^5.1.6"
  },
  "lint-staged": {
    "{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",
--- a/src/LocalSvg.tsx
+++ b/src/LocalSvg.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, Component } from 'react';
+import * as React from 'react';
+import { useState, useEffect, Component } from 'react';
 import type { ImageSourcePropType } from 'react-native';
 import { Platform, Image } from 'react-native';

@@ -24,12 +25,14 @@ export function isUriAnAndroidResourceIdentifier(uri?: string) {
 export async function loadAndroidRawResource(uri: string) {
  try {
    const RNSVGRenderableModule: Spec =
+      // neeeded for new arch
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
      require('./fabric/NativeSvgRenderableModule').default;
    return await RNSVGRenderableModule.getRawResource(uri);
  } catch (e) {
    console.error(
      'Error in RawResourceUtils while trying to natively load an Android raw resource: ',
-      e,
+      e
    );
    return null;
  }
@@ -51,7 +54,7 @@ export const loadLocalRawResource =

 export type LocalProps = SvgProps & {
  asset: ImageSourcePropType;
-  override?: Object;
+  override?: object;
 };
 export type LocalState = { xml: string | null };

@@ -69,12 +72,14 @@ export class WithLocalSvg extends Component<LocalProps, LocalState> {
  componentDidMount() {
    this.load(this.props.asset);
  }
+
  componentDidUpdate(prevProps: { asset: ImageSourcePropType }) {
    const { asset } = this.props;
    if (asset !== prevProps.asset) {
      this.load(asset);
    }
  }
+
  async load(asset: ImageSourcePropType) {
    try {
      this.setState({ xml: asset ? await loadLocalRawResource(asset) : null });
@@ -82,6 +87,7 @@ export class WithLocalSvg extends Component<LocalProps, LocalState> {
      console.error(e);
    }
  }
+
  render() {
    const {
      props,
--- a/src/ReactNativeSVG.web.ts
+++ b/src/ReactNativeSVG.web.ts
@@ -24,7 +24,7 @@ import type { TSpanProps } from './elements/TSpan';
 import type { UseProps } from './elements/Use';
 import type { GestureResponderEvent, TransformsStyle } from 'react-native';
 import {
-  // @ts-ignore
+  // @ts-ignore it is not seen in exports
  unstable_createElement as createElement,
 } from 'react-native';
 import type {
@@ -36,11 +36,11 @@ import SvgTouchableMixin from './lib/SvgTouchableMixin';
 import { resolve } from './lib/resolve';
 import { transformsArrayToProps } from './lib/extract/extractTransform';

-type BlurEvent = Object;
-type FocusEvent = Object;
-type PressEvent = Object;
-type LayoutEvent = Object;
-type EdgeInsetsProp = Object;
+type BlurEvent = object;
+type FocusEvent = object;
+type PressEvent = object;
+type LayoutEvent = object;
+type EdgeInsetsProp = object;

 interface BaseProps {
  accessible?: boolean;
@@ -48,7 +48,7 @@ interface BaseProps {
  accessibilityHint?: string;
  accessibilityIgnoresInvertColors?: boolean;
  accessibilityRole?: string;
-  accessibilityState?: Object;
+  accessibilityState?: object;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
@@ -88,7 +88,7 @@ interface BaseProps {
  forwardedRef?:
    | React.RefCallback<SVGElement>
    | React.MutableRefObject<SVGElement | null>;
-  style?: Iterable<{}>;
+  style?: Iterable<unknown>;

  // different tranform props
  gradientTransform?: TransformProps['transform'];
@@ -111,7 +111,7 @@ function stringifyTransformProps(transformProps: TransformProps) {
    transformArray.push(
      `translate(${transformProps.translateX || 0}, ${
        transformProps.translateY || 0
-      })`,
+      })`
    );
  }
  if (transformProps.scale != null) {
@@ -119,7 +119,7 @@ function stringifyTransformProps(transformProps: TransformProps) {
  }
  if (transformProps.scaleX != null || transformProps.scaleY != null) {
    transformArray.push(
-      `scale(${transformProps.scaleX || 1}, ${transformProps.scaleY || 1})`,
+      `scale(${transformProps.scaleX || 1}, ${transformProps.scaleY || 1})`
    );
  }
  // rotation maps to rotate, not to collide with the text rotate attribute (which acts per glyph rather than block)
@@ -137,7 +137,7 @@ function stringifyTransformProps(transformProps: TransformProps) {

 function parseTransformProp(
  transform: TransformProps['transform'],
-  props?: BaseProps,
+  props?: BaseProps
 ) {
  const transformArray: string[] = [];

@@ -148,7 +148,7 @@ function parseTransformProp(
      transformArray.push(`matrix(${transform.join(' ')})`);
    } else {
      const stringifiedProps = transformsArrayToProps(
-        transform as TransformsStyle['transform'],
+        transform as TransformsStyle['transform']
      );
      transformArray.push(...stringifyTransformProps(stringifiedProps));
    }
@@ -170,7 +170,7 @@ function parseTransformProp(
 */
 const prepare = <T extends BaseProps>(
  self: WebShape<T>,
-  props = self.props,
+  props = self.props
 ) => {
  const {
    transform,
@@ -199,8 +199,8 @@ const prepare = <T extends BaseProps>(
    gradientTransform?: string;
    patternTransform?: string;
    'transform-origin'?: string;
-    style?: {};
-    ref?: {};
+    style?: object;
+    ref?: unknown;
  } = {
    ...(hasTouchableProperty(props)
      ? {
@@ -262,14 +262,12 @@ const prepare = <T extends BaseProps>(

 const getBoundingClientRect = (node: SVGElement) => {
  if (node) {
-    // @ts-ignore
    const isElement = node.nodeType === 1; /* Node.ELEMENT_NODE */
-    // @ts-ignore
    if (isElement && typeof node.getBoundingClientRect === 'function') {
-      // @ts-ignore
      return node.getBoundingClientRect();
    }
  }
+  throw new Error('Can not get boundingClientRect of ' + node || 'undefined');
 };

 const measureLayout = (
@@ -280,14 +278,13 @@ const measureLayout = (
    width: number,
    height: number,
    left: number,
-    top: number,
-  ) => void,
+    top: number
+  ) => void
 ) => {
-  // @ts-ignore
-  const relativeNode = node && node.parentNode;
+  const relativeNode = node?.parentNode;
  if (relativeNode) {
    setTimeout(() => {
-      // @ts-ignore
+      // @ts-expect-error TODO: handle it better
      const relativeRect = getBoundingClientRect(relativeNode);
      const { height, left, top, width } = getBoundingClientRect(node);
      const x = left - relativeRect.left;
@@ -297,20 +294,18 @@ const measureLayout = (
  }
 };

-function remeasure() {
-  // @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function remeasure(this: any) {
  const tag = this.state.touchable.responderID;
-  if (tag == null) {
+  if (tag === null) {
    return;
  }
-  // @ts-ignore
  measureLayout(tag, this._handleQueryLayout);
 }

 export class WebShape<
  P extends BaseProps = BaseProps,
-  C = {},
-> extends React.Component<P, C> {
+> extends React.Component<P> {
  [x: string]: unknown;
  protected tag?: React.ElementType;
  protected prepareProps(props: P) {
@@ -319,6 +314,7 @@ export class WebShape<

  elementRef =
    React.createRef<SVGElement>() as React.MutableRefObject<SVGElement | null>;
+
  lastMergedProps: Partial<P> = {};

  /**
@@ -329,7 +325,7 @@ export class WebShape<
      {},
      this.props,
      this.lastMergedProps,
-      props.style,
+      props.style
    );
    this.lastMergedProps = merged;
    const clean = prepare(this, this.prepareProps(merged));
@@ -343,15 +339,16 @@ export class WebShape<
            break;
          case 'style':
            // style can be an object here or an array, so we convert it to an array and assign each element
-            for (const partialStyle of ([] as {}[]).concat(clean.style ?? [])) {
-              // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
+            for (const partialStyle of ([] as unknown[]).concat(
+              clean.style ?? []
+            )) {
              Object.assign(current.style, partialStyle);
            }
            break;
          default:
            // apply all other incoming prop updates as attributes on the node
            // same logic as in https://github.com/software-mansion/react-native-reanimated/blob/d04720c82f5941532991b235787285d36d717247/src/reanimated2/js-reanimated/index.ts#L38-L39
-            // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
+            // @ts-expect-error TODO: fix this
            current.setAttribute(camelCaseToDashed(cleanAttribute), cleanValue);
            break;
        }
@@ -361,17 +358,19 @@ export class WebShape<

  _remeasureMetricsOnActivation: () => void;
  touchableHandleStartShouldSetResponder?: (
-    e: GestureResponderEvent,
+    e: GestureResponderEvent
  ) => boolean;
+
  touchableHandleResponderMove?: (e: GestureResponderEvent) => void;
  touchableHandleResponderGrant?: (e: GestureResponderEvent) => void;
  touchableHandleResponderRelease?: (e: GestureResponderEvent) => void;
  touchableHandleResponderTerminate?: (e: GestureResponderEvent) => void;
  touchableHandleResponderTerminationRequest?: (
-    e: GestureResponderEvent,
+    e: GestureResponderEvent
  ) => boolean;
-  constructor(props: P, context: C) {
-    super(props, context);
+
+  constructor(props: P) {
+    super(props);

    // Do not attach touchable mixin handlers if SVG element doesn't have a touchable prop
    if (hasTouchableProperty(props)) {
@@ -384,13 +383,13 @@ export class WebShape<
  render(): JSX.Element {
    if (!this.tag) {
      throw new Error(
-        'When extending `WebShape` you need to overwrite either `tag` or `render`!',
+        'When extending `WebShape` you need to overwrite either `tag` or `render`!'
      );
    }
    this.lastMergedProps = {};
    return createElement(
      this.tag,
-      prepare(this, this.prepareProps(this.props)),
+      prepare(this, this.prepareProps(this.props))
    );
  }
 }
@@ -467,7 +466,7 @@ function encodeSvg(svgString: string) {
      '<svg',
      ~svgString.indexOf('xmlns')
        ? '<svg'
-        : '<svg xmlns="http://www.w3.org/2000/svg"',
+        : '<svg xmlns="http://www.w3.org/2000/svg"'
    )
    .replace(/"/g, "'")
    .replace(/%/g, '%25')
@@ -483,11 +482,11 @@ export class Svg extends WebShape<BaseProps & SvgProps> {
  tag = 'svg' as const;
  toDataURL(
    callback: (data: string) => void,
-    options: { width?: number; height?: number } = {},
+    options: { width?: number; height?: number } = {}
  ) {
    const ref = this.elementRef.current;

-    if (ref == null) {
+    if (ref === null) {
      return;
    }

@@ -496,18 +495,14 @@ export class Svg extends WebShape<BaseProps & SvgProps> {
    const width = Number(options.width) || rect.width;
    const height = Number(options.height) || rect.height;

-    // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);
    svg.setAttribute('width', String(width));
    svg.setAttribute('height', String(height));
-    // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
    svg.appendChild(ref.cloneNode(true));

-    // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
    const img = new window.Image();
    img.onload = () => {
-      // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
@@ -517,8 +512,7 @@ export class Svg extends WebShape<BaseProps & SvgProps> {
    };

    img.src = `data:image/svg+xml;utf8,${encodeSvg(
-      // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
-      new window.XMLSerializer().serializeToString(svg),
+      new window.XMLSerializer().serializeToString(svg)
    )}`;
  }
 }
--- a/src/css.tsx
+++ b/src/css.tsx
@@ -1,4 +1,5 @@
-import React, { Component, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
+import { Component, useEffect, useMemo, useState } from 'react';
 import type {
  JsxAST,
  Middleware,
@@ -76,10 +77,10 @@ function getAttributeValue(elem: XmlAST, name: string): string {
 // takes an array of nodes, and removes any duplicates, as well as any nodes
 // whose ancestors are also in the array
 function removeSubsets(nodes: Array<XmlAST | string>): Array<XmlAST | string> {
-  let idx = nodes.length,
-    node,
-    ancestor,
-    replace;
+  let idx = nodes.length;
+  let node;
+  let ancestor;
+  let replace;

  // Check if each node (or one of its ancestors) is already contained in the
  // array.
@@ -111,12 +112,12 @@ function removeSubsets(nodes: Array<XmlAST | string>): Array<XmlAST | string> {
 // does at least one of passed element nodes pass the test predicate?
 function existsOne(
  predicate: (v: XmlAST) => boolean,
-  elems: Array<XmlAST | string>,
+  elems: Array<XmlAST | string>
 ): boolean {
  return elems.some(
    (elem) =>
      typeof elem === 'object' &&
-      (predicate(elem) || existsOne(predicate, elem.children)),
+      (predicate(elem) || existsOne(predicate, elem.children))
  );
 }

@@ -131,20 +132,21 @@ function getSiblings(node: XmlAST | string): Array<XmlAST | string> {

 // does the element have the named attribute?
 function hasAttrib(elem: XmlAST, name: string): boolean {
-  return elem.props.hasOwnProperty(name);
+  return Object.prototype.hasOwnProperty.call(elem.props, name);
 }

 // finds the first node in the array that matches the test predicate, or one
 // of its children
 function findOne(
  predicate: (v: XmlAST) => boolean,
-  elems: Array<XmlAST | string>,
+  elems: Array<XmlAST | string>
 ): XmlAST | null {
  let elem: XmlAST | null = null;

  for (let i = 0, l = elems.length; i < l && !elem; i++) {
    const node = elems[i];
    if (typeof node === 'string') {
+      /* empty */
    } else if (predicate(node)) {
      elem = node;
    } else {
@@ -163,7 +165,7 @@ function findOne(
 function findAll(
  predicate: (v: XmlAST) => boolean,
  nodes: Array<XmlAST | string>,
-  result: Array<XmlAST> = [],
+  result: Array<XmlAST> = []
 ): Array<XmlAST> {
  for (let i = 0, j = nodes.length; i < j; i++) {
    const node = nodes[i];
@@ -287,10 +289,10 @@ function filterByPseudos(selectors: FlatSelectorList) {
      csstree.generate({
        type: 'Selector',
        children: new List<CssNode>().fromArray(
-          pseudos.map((pseudo) => pseudo.item.data),
+          pseudos.map((pseudo) => pseudo.item.data)
        ),
-      }),
-    ),
+      })
+    )
  );
 }
 // usePseudos Array with strings of single or sequence of pseudo-elements and/or -classes that should pass
@@ -304,7 +306,7 @@ const usePseudos = [''];
 */
 function cleanPseudos(selectors: FlatSelectorList) {
  selectors.forEach(({ pseudos }) =>
-    pseudos.forEach((pseudo) => pseudo.list.remove(pseudo.item)),
+    pseudos.forEach((pseudo) => pseudo.list.remove(pseudo.item))
  );
 }

@@ -332,11 +334,11 @@ function specificity(selector: Selector): Specificity {

      case 'PseudoClassSelector':
        switch (node.name.toLowerCase()) {
-          case 'not':
+          case 'not': {
            const children = (node as PseudoClassSelector).children;
            children && children.each(walk);
            break;
-
+          }
          case 'before':
          case 'after':
          case 'first-line':
@@ -355,13 +357,14 @@ function specificity(selector: Selector): Specificity {
        C++;
        break;

-      case 'TypeSelector':
+      case 'TypeSelector': {
        // ignore universal selector
        const { name } = node;
        if (name.charAt(name.length - 1) !== '*') {
          C++;
        }
        break;
+      }
    }
  });

@@ -378,7 +381,7 @@ function specificity(selector: Selector): Specificity {
 */
 function compareSpecificity(
  aSpecificity: Specificity,
-  bSpecificity: Specificity,
+  bSpecificity: Specificity
 ): number {
  for (let i = 0; i < 4; i += 1) {
    if (aSpecificity[i] < bSpecificity[i]) {
@@ -512,7 +515,7 @@ function CSSStyleDeclaration(ast: XmlAST) {
  try {
    const declarations = csstree.parse(
      styles,
-      declarationParseProps,
+      declarationParseProps
    ) as DeclarationList;
    declarations.children.each((node) => {
      try {
@@ -527,7 +530,7 @@ function CSSStyleDeclaration(ast: XmlAST) {
        ) {
          console.warn(
            "Warning: Parse error when parsing inline styles, style properties of this element cannot be used. The raw styles can still be get/set using .attr('style').value. Error details: " +
-              styleError,
+              styleError
          );
        }
      }
@@ -535,7 +538,7 @@ function CSSStyleDeclaration(ast: XmlAST) {
  } catch (parseError) {
    console.warn(
      "Warning: Parse error when parsing inline styles, style properties of this element cannot be used. The raw styles can still be get/set using .attr('style').value. Error details: " +
-        parseError,
+        parseError
    );
  }
 }
@@ -559,7 +562,9 @@ function initStyle(selectedEl: XmlAST): StyledAST {
 */
 function closestElem(node: XmlAST, elemName: string) {
  let elem: XmlAST | null = node;
-  while ((elem = elem.parent) && elem.tag !== elemName) {}
+  while ((elem = elem.parent) && elem.tag !== elemName) {
+    /* empty */
+  }
  return elem;
 }

@@ -586,19 +591,19 @@ const parseProps = {
 * @author modified by: msand <msand@abo.fi>
 */
 export const inlineStyles: Middleware = function inlineStyles(
-  document: XmlAST,
+  document: XmlAST
 ) {
  // collect <style/>s
  const styleElements = cssSelect('style', document, cssSelectOpts);

-  //no <styles/>s, nothing to do
+  // no <styles/>s, nothing to do
  if (styleElements.length === 0) {
    return document;
  }

  const selectors: FlatSelectorList = [];

-  for (let element of styleElements) {
+  for (const element of styleElements) {
    const { children } = element;
    if (!children.length || closestElem(element, 'foreignObject')) {
      // skip empty <style/>s or <foreignObject> content.
@@ -612,7 +617,7 @@ export const inlineStyles: Middleware = function inlineStyles(
    } catch (parseError) {
      console.warn(
        'Warning: Parse error of styles of <style/> element, skipped. Error details: ' +
-          parseError,
+          parseError
      );
    }
  }
@@ -630,7 +635,7 @@ export const inlineStyles: Middleware = function inlineStyles(
  const sortedSelectors = sortSelectors(selectorsPseudo).reverse();

  // match selectors
-  for (let { rule, item } of sortedSelectors) {
+  for (const { rule, item } of sortedSelectors) {
    if (rule === null) {
      continue;
    }
@@ -638,7 +643,7 @@ export const inlineStyles: Middleware = function inlineStyles(
    try {
      // apply <style/> to matched elements
      const matched = cssSelect(selectorStr, document, cssSelectOpts).map(
-        initStyle,
+        initStyle
      );

      if (matched.length === 0) {
@@ -655,7 +660,7 @@ export const inlineStyles: Middleware = function inlineStyles(
          const name = property.trim();
          const camel = camelCase(name);
          const val = csstree.generate(value).trim();
-          for (let element of matched) {
+          for (const element of matched) {
            const { style, priority } = element;
            const current = priority.get(name);
            if (current === undefined || current < important) {
@@ -671,7 +676,7 @@ export const inlineStyles: Middleware = function inlineStyles(
          'Warning: Syntax error when trying to select \n\n' +
            selectorStr +
            '\n\n, skipped. Error details: ' +
-            selectError,
+            selectError
        );
        continue;
      }
@@ -686,7 +691,7 @@ export function SvgCss(props: XmlProps) {
  const { xml, override } = props;
  const ast = useMemo<JsxAST | null>(
    () => (xml !== null ? parse(xml, inlineStyles) : null),
-    [xml],
+    [xml]
  );
  return <SvgAst ast={ast} override={override || props} />;
 }
@@ -714,12 +719,14 @@ export class SvgWithCss extends Component<XmlProps, XmlState> {
  componentDidMount() {
    this.parse(this.props.xml);
  }
+
  componentDidUpdate(prevProps: { xml: string | null }) {
    const { xml } = this.props;
    if (xml !== prevProps.xml) {
      this.parse(xml);
    }
  }
+
  parse(xml: string | null) {
    try {
      this.setState({ ast: xml ? parse(xml, inlineStyles) : null });
@@ -727,6 +734,7 @@ export class SvgWithCss extends Component<XmlProps, XmlState> {
      this.props.onError ? this.props.onError(e as Error) : console.error(e);
    }
  }
+
  render() {
    const {
      props,
@@ -741,12 +749,14 @@ export class SvgWithCssUri extends Component<UriProps, UriState> {
  componentDidMount() {
    this.fetch(this.props.uri);
  }
+
  componentDidUpdate(prevProps: { uri: string | null }) {
    const { uri } = this.props;
    if (uri !== prevProps.uri) {
      this.fetch(uri);
    }
  }
+
  async fetch(uri: string | null) {
    try {
      this.setState({ xml: uri ? await fetchText(uri) : null });
@@ -754,6 +764,7 @@ export class SvgWithCssUri extends Component<UriProps, UriState> {
      this.props.onError ? this.props.onError(e as Error) : console.error(e);
    }
  }
+
  render() {
    const {
      props,
--- a/src/elements/Circle.tsx
+++ b/src/elements/Circle.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps';
 import type { CommonPathProps, NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
--- a/src/elements/ClipPath.tsx
+++ b/src/elements/ClipPath.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import { extract } from '../lib/extract/extractProps';
 import Shape from './Shape';
 import RNSVGClipPath from '../fabric/ClipPathNativeComponent';
--- a/src/elements/Defs.tsx
+++ b/src/elements/Defs.tsx
@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 import RNSVGDefs from '../fabric/DefsNativeComponent';

-export default class Defs extends Component<React.PropsWithChildren<{}>> {
+export default class Defs extends Component<React.PropsWithChildren> {
  static displayName = 'Defs';

  render() {
--- a/src/elements/Ellipse.tsx
+++ b/src/elements/Ellipse.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps';
 import type { CommonPathProps, NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
--- a/src/elements/ForeignObject.tsx
+++ b/src/elements/ForeignObject.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import {
  withoutXY,
  stringifyPropsForFabric,
@@ -37,8 +37,7 @@ export default class ForeignObject extends G<ForeignObjectProps> {
          this.refMethod(ref as (ForeignObject & NativeMethods) | null)
        }
        {...withoutXY(this, props)}
-        {...foreignObjectProps}
-      >
+        {...foreignObjectProps}>
        {children}
      </RNSVGForeignObject>
    );
--- a/src/elements/G.tsx
+++ b/src/elements/G.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
 import { extractFont } from '../lib/extract/extractText';
 import extractTransform from '../lib/extract/extractTransform';
@@ -24,7 +24,7 @@ export default class G<P> extends Shape<GProps & P> {
    props: GProps &
      P & {
        matrix?: number[];
-      },
+      }
  ) => {
    const matrix = !props.matrix && extractTransform(props);
    if (matrix) {
@@ -44,16 +44,16 @@ export default class G<P> extends Shape<GProps & P> {
    return (
      <RNSVGGroup
        ref={(ref) => this.refMethod(ref as (G<P> & NativeMethods) | null)}
-        {...extractedProps}
-      >
+        {...extractedProps}>
        {props.children}
      </RNSVGGroup>
    );
  }
 }

-const hasProps = (obj: {}) => {
-  for (let _ in obj) {
+const hasProps = (obj: object) => {
+  // eslint-disable-next-line no-unreachable-loop
+  for (const _ in obj) {
    return true;
  }
  return false;
--- a/src/elements/Image.tsx
+++ b/src/elements/Image.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import type { ImageProps as RNImageProps, NativeMethods } from 'react-native';
 import { Image } from 'react-native';
 import { alignEnum, meetOrSliceTypes } from '../lib/extract/extractViewBox';
@@ -64,7 +64,7 @@ export default class SvgImage extends Shape<ImageProps> {
      src: !href
        ? null
        : Image.resolveAssetSource(
-            typeof href === 'string' ? { uri: href } : href,
+            typeof href === 'string' ? { uri: href } : href
          ),
    };
    return (
--- a/src/elements/Line.tsx
+++ b/src/elements/Line.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps';
 import type { CommonPathProps, NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
--- a/src/elements/LinearGradient.tsx
+++ b/src/elements/LinearGradient.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractGradient from '../lib/extract/extractGradient';
 import type { NumberProp, TransformProps, Units } from '../lib/extract/types';
 import Shape from './Shape';
--- a/src/elements/Marker.tsx
+++ b/src/elements/Marker.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractViewBox from '../lib/extract/extractViewBox';
 import type { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
@@ -64,8 +64,7 @@ export default class Marker extends Shape<MarkerProps> {
      <RNSVGMarker
        ref={(ref) => this.refMethod(ref as (Marker & NativeMethods) | null)}
        {...markerProps}
-        {...extractViewBox({ viewBox, preserveAspectRatio })}
-      >
+        {...extractViewBox({ viewBox, preserveAspectRatio })}>
        {children}
      </RNSVGMarker>
    );
--- a/src/elements/Mask.tsx
+++ b/src/elements/Mask.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import {
  stringifyPropsForFabric,
  withoutXY,
@@ -53,8 +53,7 @@ export default class Mask extends Shape<MaskProps> {
        ref={(ref) => this.refMethod(ref as (Mask & NativeMethods) | null)}
        {...withoutXY(this, props)}
        {...strigifiedMaskProps}
-        {...maskProps}
-      >
+        {...maskProps}>
        {children}
      </RNSVGMask>
    );
--- a/src/elements/Path.tsx
+++ b/src/elements/Path.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { extract } from '../lib/extract/extractProps';
 import Shape from './Shape';
 import RNSVGPath from '../fabric/PathNativeComponent';
--- a/src/elements/Pattern.tsx
+++ b/src/elements/Pattern.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractTransform from '../lib/extract/extractTransform';
 import extractViewBox from '../lib/extract/extractViewBox';
 import type { NumberProp, TransformProps, Units } from '../lib/extract/types';
@@ -68,8 +68,7 @@ export default class Pattern extends Shape<PatternProps> {
        ref={(ref) => this.refMethod(ref as (Pattern & NativeMethods) | null)}
        {...strigifiedPatternProps}
        {...patternProps}
-        {...extractViewBox({ viewBox, preserveAspectRatio })}
-      >
+        {...extractViewBox({ viewBox, preserveAspectRatio })}>
        {children}
      </RNSVGPattern>
    );
--- a/src/elements/Polygon.tsx
+++ b/src/elements/Polygon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Path from './Path';
 import Shape from './Shape';
 import type { CommonPathProps, NumberProp } from '../lib/extract/types';
@@ -19,7 +19,7 @@ export default class Polygon extends Shape<PolygonProps> {
  setNativeProps = (
    props: PolygonProps & {
      d?: string;
-    },
+    }
  ) => {
    const { points } = props;
    if (points) {
--- a/src/elements/Polyline.tsx
+++ b/src/elements/Polyline.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Path from './Path';
 import Shape from './Shape';
 import type { CommonPathProps, NumberProp } from '../lib/extract/types';
@@ -19,7 +19,7 @@ export default class Polyline extends Shape<PolylineProps> {
  setNativeProps = (
    props: PolylineProps & {
      d?: string;
-    },
+    }
  ) => {
    const { points } = props;
    if (points) {
--- a/src/elements/RadialGradient.tsx
+++ b/src/elements/RadialGradient.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractGradient from '../lib/extract/extractGradient';
 import type { NumberProp, TransformProps, Units } from '../lib/extract/types';
 import Shape from './Shape';
--- a/src/elements/Rect.tsx
+++ b/src/elements/Rect.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
  stringifyPropsForFabric,
  withoutXY,
--- a/src/elements/Shape.tsx
+++ b/src/elements/Shape.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import { Component } from 'react';
 import SvgTouchableMixin from '../lib/SvgTouchableMixin';
 import extractBrush from '../lib/extract/extractBrush';
@@ -29,7 +30,6 @@ export interface Point {
 }

 export interface SVGPoint extends Point {
-  constructor(point?: Point): SVGPoint;
  matrixTransform(matrix: Matrix): SVGPoint;
 }

@@ -39,7 +39,7 @@ export interface Rect {
  width: number;
  height: number;
 }
-export interface SVGRect extends Rect {}
+export type SVGRect = Rect;

 export interface Matrix {
  a: number;
@@ -51,7 +51,6 @@ export interface Matrix {
 }

 export interface SVGMatrix extends Matrix {
-  constructor(matrix?: Matrix): SVGMatrix;
  multiply(secondMatrix: Matrix): SVGMatrix;
  inverse(): SVGMatrix;
  translate(x: number, y: number): SVGMatrix;
@@ -65,7 +64,7 @@ export interface SVGMatrix extends Matrix {
  skewY(angle: number): SVGMatrix;
 }

-export function multiply_matrices(l: Matrix, r: Matrix): Matrix {
+export function multiplyMatrices(l: Matrix, r: Matrix): Matrix {
  const { a: al, b: bl, c: cl, d: dl, e: el, f: fl } = l;
  const { a: ar, b: br, c: cr, d: dr, e: er, f: fr } = r;

@@ -112,88 +111,99 @@ export class SVGMatrix implements SVGMatrix {
      this.f = 0;
    }
  }
+
  multiply(secondMatrix: Matrix): SVGMatrix {
-    return new SVGMatrix(multiply_matrices(this, secondMatrix));
+    return new SVGMatrix(multiplyMatrices(this, secondMatrix));
  }
+
  inverse(): SVGMatrix {
    return new SVGMatrix(invert(this));
  }
+
  translate(x: number, y: number): SVGMatrix {
    return new SVGMatrix(
-      multiply_matrices(this, { a: 1, b: 0, c: 0, d: 1, e: x, f: y }),
+      multiplyMatrices(this, { a: 1, b: 0, c: 0, d: 1, e: x, f: y })
    );
  }
+
  scale(scaleFactor: number): SVGMatrix {
    return new SVGMatrix(
-      multiply_matrices(this, {
+      multiplyMatrices(this, {
        a: scaleFactor,
        b: 0,
        c: 0,
        d: scaleFactor,
        e: 0,
        f: 0,
-      }),
+      })
    );
  }
+
  scaleNonUniform(scaleFactorX: number, scaleFactorY: number): SVGMatrix {
    return new SVGMatrix(
-      multiply_matrices(this, {
+      multiplyMatrices(this, {
        a: scaleFactorX,
        b: 0,
        c: 0,
        d: scaleFactorY,
        e: 0,
        f: 0,
-      }),
+      })
    );
  }
+
  rotate(angle: number): SVGMatrix {
    const cos = Math.cos(deg2rad * angle);
    const sin = Math.sin(deg2rad * angle);
    return new SVGMatrix(
-      multiply_matrices(this, { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 }),
+      multiplyMatrices(this, { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 })
    );
  }
+
  rotateFromVector(x: number, y: number): SVGMatrix {
    const angle = Math.atan2(y, x);
    const cos = Math.cos(deg2rad * angle);
    const sin = Math.sin(deg2rad * angle);
    return new SVGMatrix(
-      multiply_matrices(this, { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 }),
+      multiplyMatrices(this, { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 })
    );
  }
+
  flipX(): SVGMatrix {
    return new SVGMatrix(
-      multiply_matrices(this, { a: -1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
+      multiplyMatrices(this, { a: -1, b: 0, c: 0, d: 1, e: 0, f: 0 })
    );
  }
+
  flipY(): SVGMatrix {
    return new SVGMatrix(
-      multiply_matrices(this, { a: 1, b: 0, c: 0, d: -1, e: 0, f: 0 }),
+      multiplyMatrices(this, { a: 1, b: 0, c: 0, d: -1, e: 0, f: 0 })
    );
  }
+
  skewX(angle: number): SVGMatrix {
    return new SVGMatrix(
-      multiply_matrices(this, {
+      multiplyMatrices(this, {
        a: 1,
        b: 0,
        c: Math.tan(deg2rad * angle),
        d: 1,
        e: 0,
        f: 0,
-      }),
+      })
    );
  }
+
  skewY(angle: number): SVGMatrix {
    return new SVGMatrix(
-      multiply_matrices(this, {
+      multiplyMatrices(this, {
        a: 1,
        b: Math.tan(deg2rad * angle),
        c: 0,
        d: 1,
        e: 0,
        f: 0,
-      }),
+      })
    );
  }
 }
@@ -218,6 +228,7 @@ export class SVGPoint implements SVGPoint {
      this.y = 0;
    }
  }
+
  matrixTransform(matrix: Matrix): SVGPoint {
    return new SVGPoint(matrixTransform(matrix, this));
  }
@@ -239,20 +250,23 @@ export default class Shape<P> extends Component<P> {
    super(props);
    SvgTouchableMixin(this);
  }
+
  refMethod: (instance: (Shape<P> & NativeMethods) | null) => void = (
-    instance: (Shape<P> & NativeMethods) | null,
+    instance: (Shape<P> & NativeMethods) | null
  ) => {
    this.root = instance;
  };
+
  // Hack to make Animated work with Shape components.
  getNativeScrollRef(): (Shape<P> & NativeMethods) | null {
    return this.root;
  }
+
  setNativeProps = (
    props: P & {
      matrix?: ColumnMajorTransformMatrix;
      fill?: ColorValue;
-    } & TransformProps,
+    } & TransformProps
  ) => {
    if (props.fill) {
      // @ts-ignore TODO: native `fill` prop differs from the one passed in props
@@ -260,6 +274,7 @@ export default class Shape<P> extends Component<P> {
    }
    this.root?.setNativeProps(props);
  };
+
  /*
   * The following native methods are experimental and likely broken in some
   * ways. If you have a use case for these, please open an issue with a
@@ -282,42 +297,48 @@ export default class Shape<P> extends Component<P> {
      clipped,
    });
  };
+
  getCTM = (): SVGMatrix => {
    const handle = findNodeHandle(this.root);
    const RNSVGRenderableModule: Spec =
      require('../fabric/NativeSvgRenderableModule').default;
    return new SVGMatrix(RNSVGRenderableModule.getCTM(handle));
  };
+
  getScreenCTM = (): SVGMatrix => {
    const handle = findNodeHandle(this.root);
    const RNSVGRenderableModule: Spec =
      require('../fabric/NativeSvgRenderableModule').default;
    return new SVGMatrix(RNSVGRenderableModule.getScreenCTM(handle));
  };
+
  isPointInFill = (options: DOMPointInit): boolean | undefined => {
    const handle = findNodeHandle(this.root);
    const RNSVGRenderableModule: Spec =
      require('../fabric/NativeSvgRenderableModule').default;
    return RNSVGRenderableModule.isPointInFill(handle, options);
  };
+
  isPointInStroke = (options: DOMPointInit): boolean | undefined => {
    const handle = findNodeHandle(this.root);
    const RNSVGRenderableModule: Spec =
      require('../fabric/NativeSvgRenderableModule').default;
    return RNSVGRenderableModule.isPointInStroke(handle, options);
  };
+
  getTotalLength = (): number | undefined => {
    const handle = findNodeHandle(this.root);
    const RNSVGRenderableModule: Spec =
      require('../fabric/NativeSvgRenderableModule').default;
    return RNSVGRenderableModule.getTotalLength(handle);
  };
+
  getPointAtLength = (length: number): SVGPoint => {
    const handle = findNodeHandle(this.root);
    const RNSVGRenderableModule: Spec =
      require('../fabric/NativeSvgRenderableModule').default;
    return new SVGPoint(
-      RNSVGRenderableModule.getPointAtLength(handle, { length }),
+      RNSVGRenderableModule.getPointAtLength(handle, { length })
    );
  };
 }
--- a/src/elements/Stop.tsx
+++ b/src/elements/Stop.tsx
@@ -9,7 +9,7 @@ export interface StopProps {
  parent?: Component;
 }

-export default class Stop extends Component<StopProps, {}> {
+export default class Stop extends Component<StopProps> {
  static displayName = 'Stop';

  setNativeProps = () => {
--- a/src/elements/Svg.tsx
+++ b/src/elements/Svg.tsx
@@ -1,5 +1,5 @@
 import type { Component } from 'react';
-import React from 'react';
+import * as React from 'react';
 import type {
  ColorValue,
  MeasureInWindowOnSuccessCallback,
@@ -62,7 +62,7 @@ export default class Svg extends Shape<SvgProps> {
  measureLayout = (
    relativeToNativeNode: number,
    onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail: () => void /* currently unused */,
+    onFail: () => void /* currently unused */
  ) => {
    const { root } = this;
    root && root.measureLayout(relativeToNativeNode, onSuccess, onFail);
@@ -72,7 +72,7 @@ export default class Svg extends Shape<SvgProps> {
    props: SvgProps & {
      bbWidth?: NumberProp;
      bbHeight?: NumberProp;
-    },
+    }
  ) => {
    const { width, height } = props;
    if (width) {
@@ -85,12 +85,13 @@ export default class Svg extends Shape<SvgProps> {
    root && root.setNativeProps(props);
  };

-  toDataURL = (callback: (base64: string) => void, options?: Object) => {
+  toDataURL = (callback: (base64: string) => void, options?: object) => {
    if (!callback) {
      return;
    }
    const handle = findNodeHandle(this.root as Component);
    const RNSVGSvgViewModule: Spec =
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
      require('../fabric/NativeSvgViewModule').default;
    RNSVGSvgViewModule.toDataURL(handle, options, callback);
  };
@@ -201,8 +202,7 @@ export default class Svg extends Shape<SvgProps> {
      <RNSVGSvg
        {...props}
        ref={(ref) => this.refMethod(ref as (Svg & NativeMethods) | null)}
-        {...extractViewBox({ viewBox, preserveAspectRatio })}
-      >
+        {...extractViewBox({ viewBox, preserveAspectRatio })}>
        <G
          {...{
            children,
--- a/src/elements/Symbol.tsx
+++ b/src/elements/Symbol.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractViewBox from '../lib/extract/extractViewBox';
 import Shape from './Shape';
 import RNSVGSymbol from '../fabric/SymbolNativeComponent';
@@ -23,10 +23,9 @@ export default class Symbol extends Shape<SymbolProps> {
    const symbolProps = { name: id };
    return (
      <RNSVGSymbol
-        ref={(ref) => this.refMethod(ref as (Symbol & NativeMethods) | null)}
+        ref={(ref) => this.refMethod(ref as Shape<SymbolProps> & NativeMethods)}
        {...symbolProps}
-        {...extractViewBox(props)}
-      >
+        {...extractViewBox(props)}>
        {children}
      </RNSVGSymbol>
    );
--- a/src/elements/TSpan.tsx
+++ b/src/elements/TSpan.tsx
@@ -1,5 +1,5 @@
 import type { Component } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
 import extractTransform from '../lib/extract/extractTransform';
 import type { TextChild } from '../lib/extract/extractText';
@@ -31,8 +31,8 @@ export default class TSpan extends Shape<TSpanProps> {
  setNativeProps = (
    props: TSpanProps & {
      matrix?: ColumnMajorTransformMatrix;
-      style?: [] | {};
-    },
+      style?: [] | unknown;
+    }
  ) => {
    const matrix = !props.matrix && extractTransform(props);
    if (matrix) {
@@ -51,7 +51,7 @@ export default class TSpan extends Shape<TSpanProps> {
        x: null,
        y: null,
      },
-      this,
+      this
    );
    Object.assign(props, extractText(prop, false));
    props.ref = this.refMethod as (instance: Component | null) => void;
--- a/src/elements/Text.tsx
+++ b/src/elements/Text.tsx
@@ -1,5 +1,5 @@
 import type { Component, ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractText from '../lib/extract/extractText';
 import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
 import extractTransform from '../lib/extract/extractTransform';
@@ -31,8 +31,8 @@ export default class Text extends Shape<TextProps> {
  setNativeProps = (
    props: TextProps & {
      matrix?: ColumnMajorTransformMatrix;
-      style?: [] | {};
-    },
+      style?: [] | unknown;
+    }
  ) => {
    const matrix = props && !props.matrix && extractTransform(props);
    if (matrix) {
@@ -51,7 +51,7 @@ export default class Text extends Shape<TextProps> {
        x: null,
        y: null,
      },
-      this,
+      this
    );
    Object.assign(props, extractText(prop, true));
    props.ref = this.refMethod as (instance: Component | null) => void;
--- a/src/elements/TextPath.tsx
+++ b/src/elements/TextPath.tsx
@@ -1,5 +1,5 @@
 import type { Component } from 'react';
-import React from 'react';
+import * as React from 'react';
 import extractTransform from '../lib/extract/extractTransform';
 import { withoutXY } from '../lib/extract/extractProps';
 import type {
@@ -33,10 +33,10 @@ export default class TextPath extends Shape<TextPathProps> {
  static displayName = 'TextPath';

  setNativeProps = (
-    props: Object & {
+    props: object & {
      matrix?: ColumnMajorTransformMatrix;
-      style?: [] | {};
-    } & TransformProps,
+      style?: [] | unknown;
+    } & TransformProps
  ) => {
    const matrix = !props.matrix && extractTransform(props);
    if (matrix) {
@@ -69,7 +69,7 @@ export default class TextPath extends Shape<TextPathProps> {
          {
            children,
          },
-          true,
+          true
        ),
        {
          href: match,
@@ -79,7 +79,7 @@ export default class TextPath extends Shape<TextPathProps> {
          side,
          alignmentBaseline,
          midLine,
-        },
+        }
      );
      props.ref = this.refMethod as (instance: Component | null) => void;
      return <RNSVGTextPath {...props} />;
@@ -88,7 +88,7 @@ export default class TextPath extends Shape<TextPathProps> {
    console.warn(
      'Invalid `href` prop for `TextPath` element, expected a href like "#id", but got: "' +
        href +
-        '"',
+        '"'
    );
    return (
      <TSpan ref={this.refMethod as (instance: Component | null) => void}>
--- a/src/elements/Use.tsx
+++ b/src/elements/Use.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 import {
  stringifyPropsForFabric,
  withoutXY,
@@ -50,7 +50,7 @@ export default class Use extends Shape<UseProps> {
      console.warn(
        'Invalid `href` prop for `Use` element, expected a href like "#id", but got: "' +
          href +
-          '"',
+          '"'
      );
    }
    const useProps = stringifyPropsForFabric({
@@ -64,8 +64,7 @@ export default class Use extends Shape<UseProps> {
      <RNSVGUse
        ref={(ref) => this.refMethod(ref as (Use & NativeMethods) | null)}
        {...withoutXY(this, props)}
-        {...useProps}
-      >
+        {...useProps}>
        {children}
      </RNSVGUse>
    );
--- a/src/fabric/NativeSvgRenderableModule.ts
+++ b/src/fabric/NativeSvgRenderableModule.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-types */
+// its needed for codegen to work
 import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 import type { Int32, Float } from 'react-native/Libraries/Types/CodegenTypes';
--- a/src/fabric/NativeSvgViewModule.ts
+++ b/src/fabric/NativeSvgViewModule.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-types */
+// its needed for codegen to work
 import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
@@ -6,7 +8,7 @@ export interface Spec extends TurboModule {
  toDataURL(
    tag: Int32 | null,
    options?: Object,
-    callback?: (base64: string) => void,
+    callback?: (base64: string) => void
  ): void;
 }

--- a/src/fabric/utils.ts
+++ b/src/fabric/utils.ts
@@ -1,5 +1,5 @@
 import type { ViewProps as VP } from 'react-native';

-interface ViewProps extends Omit<VP, 'pointerEvents'> {}
+type ViewProps = Omit<VP, 'pointerEvents'>;

 export type { ViewProps };
--- a/src/index.js.flow
+++ b/src/index.js.flow
@@ -1,531 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.17.0
- */
-
-import * as React from "react";
-import * as ReactNative from "react-native";
-import {
-  ColorValue,
-  GestureResponderEvent,
-  LayoutChangeEvent,
-  TransformsStyle,
-} from "react-native";
-export type NumberProp = string | number;
-export type NumberArray = NumberProp[] | NumberProp;
-export type FillRule = "evenodd" | "nonzero";
-export type Units = "userSpaceOnUse" | "objectBoundingBox";
-export type MarkerUnits = "strokeWidth" | "userSpaceOnUse";
-export type Orient = "auto" | "auto-start-reverse";
-export type TextAnchor = "start" | "middle" | "end";
-export type FontStyle = "normal" | "italic" | "oblique";
-export type FontVariant = "normal" | "small-caps";
-export type FontWeight =
-  | NumberProp
-  | "normal"
-  | "bold"
-  | "bolder"
-  | "lighter"
-  | "100"
-  | "200"
-  | "300"
-  | "400"
-  | "500"
-  | "600"
-  | "700"
-  | "800"
-  | "900";
-export type FontStretch =
-  | "normal"
-  | "wider"
-  | "narrower"
-  | "ultra-condensed"
-  | "extra-condensed"
-  | "condensed"
-  | "semi-condensed"
-  | "semi-expanded"
-  | "expanded"
-  | "extra-expanded"
-  | "ultra-expanded";
-export type TextDecoration =
-  | "none"
-  | "underline"
-  | "overline"
-  | "line-through"
-  | "blink";
-export type FontVariantLigatures = "normal" | "none";
-export type AlignmentBaseline =
-  | "baseline"
-  | "text-bottom"
-  | "alphabetic"
-  | "ideographic"
-  | "middle"
-  | "central"
-  | "mathematical"
-  | "text-top"
-  | "bottom"
-  | "center"
-  | "top"
-  | "text-before-edge"
-  | "text-after-edge"
-  | "before-edge"
-  | "after-edge"
-  | "hanging";
-export type BaselineShift =
-  | "sub"
-  | "super"
-  | "baseline"
-  | $ReadOnlyArray<NumberProp>
-  | NumberProp;
-export type LengthAdjust = "spacing" | "spacingAndGlyphs";
-export type TextPathMethod = "align" | "stretch";
-export type TextPathSpacing = "auto" | "exact";
-export type TextPathMidLine = "sharp" | "smooth";
-export type Linecap = "butt" | "square" | "round";
-export type Linejoin = "miter" | "bevel" | "round";
-export interface TouchableProps {
-  disabled?: boolean;
-  onPress?: (event: GestureResponderEvent) => void;
-  onPressIn?: (event: GestureResponderEvent) => void;
-  onPressOut?: (event: GestureResponderEvent) => void;
-  onLongPress?: (event: GestureResponderEvent) => void;
-  delayPressIn?: number;
-  delayPressOut?: number;
-  delayLongPress?: number;
-}
-export type ResponderProps = {
-  pointerEvents?: "box-none" | "none" | "box-only" | "auto",
-  ...
-} & ReactNative.GestureResponderHandlers;
-export type Color = ColorValue;
-export interface FillProps {
-  fill?: Color;
-  fillOpacity?: NumberProp;
-  fillRule?: FillRule;
-}
-export interface ClipProps {
-  clipRule?: FillRule;
-  clipPath?: string;
-}
-export interface VectorEffectProps {
-  vectorEffect?:
-    | "none"
-    | "non-scaling-stroke"
-    | "nonScalingStroke"
-    | "default"
-    | "inherit"
-    | "uri";
-}
-export interface DefinitionProps {
-  id?: string;
-}
-export interface StrokeProps {
-  stroke?: Color;
-  strokeWidth?: NumberProp;
-  strokeOpacity?: NumberProp;
-  strokeDasharray?: $ReadOnlyArray<NumberProp> | NumberProp;
-  strokeDashoffset?: NumberProp;
-  strokeLinecap?: Linecap;
-  strokeLinejoin?: Linejoin;
-  strokeMiterlimit?: NumberProp;
-}
-export interface FontObject {
-  fontStyle?: FontStyle;
-  fontVariant?: FontVariant;
-  fontWeight?: FontWeight;
-  fontStretch?: FontStretch;
-  fontSize?: NumberProp;
-  fontFamily?: string;
-  textAnchor?: TextAnchor;
-  textDecoration?: TextDecoration;
-  letterSpacing?: NumberProp;
-  wordSpacing?: NumberProp;
-  kerning?: NumberProp;
-  fontFeatureSettings?: string;
-  fontVariantLigatures?: FontVariantLigatures;
-  fontVariationSettings?: string;
-}
-export type FontProps = {
-  font?: FontObject,
-  ...
-} & FontObject;
-export interface TransformObject {
-  translate?: NumberArray;
-  translateX?: NumberProp;
-  translateY?: NumberProp;
-  origin?: NumberArray;
-  originX?: NumberProp;
-  originY?: NumberProp;
-  scale?: NumberArray;
-  scaleX?: NumberProp;
-  scaleY?: NumberProp;
-  skew?: NumberArray;
-  skewX?: NumberProp;
-  skewY?: NumberProp;
-  rotation?: NumberProp;
-  x?: NumberArray;
-  y?: NumberArray;
-}
-export type ColumnMajorTransformMatrix = [
-  number,
-  number,
-  number,
-  number,
-  number,
-  number
-];
-export type TransformProps = {
-  transform?:
-    | ColumnMajorTransformMatrix
-    | string
-    | TransformObject
-    | $PropertyType<TransformsStyle, "transform">,
-  ...
-} & TransformObject;
-export interface CommonMaskProps {
-  mask?: string;
-}
-export interface CommonMarkerProps {
-  marker?: string;
-  markerStart?: string;
-  markerMid?: string;
-  markerEnd?: string;
-}
-export interface NativeProps {
-  onLayout?: (event: LayoutChangeEvent) => void;
-}
-export type CommonPathProps = { ... } & FillProps &
-  StrokeProps &
-  ClipProps &
-  TransformProps &
-  VectorEffectProps &
-  ResponderProps &
-  TouchableProps &
-  DefinitionProps &
-  CommonMarkerProps &
-  CommonMaskProps &
-  NativeProps;
-export type CircleProps = {
-  cx?: NumberProp,
-  cy?: NumberProp,
-  opacity?: NumberProp,
-  r?: NumberProp,
-  ...
-} & CommonPathProps;
-declare export var Circle: React.ComponentClass<CircleProps>;
-export type CircleType = React.ComponentClass<CircleProps>;
-export interface ClipPathProps {
-  id?: string;
-}
-declare export var ClipPath: React.ComponentClass<ClipPathProps>;
-export type ClipPathType = React.ComponentClass<ClipPathProps>;
-declare export var Defs: React.ComponentClass<{ ... }>;
-export type DefsType = React.ComponentClass<{ ... }>;
-export type EllipseProps = {
-  cx?: NumberProp,
-  cy?: NumberProp,
-  opacity?: NumberProp,
-  rx?: NumberProp,
-  ry?: NumberProp,
-  ...
-} & CommonPathProps;
-declare export var Ellipse: React.ComponentClass<EllipseProps>;
-export type EllipseType = React.ComponentClass<EllipseProps>;
-export type GProps = {
-  opacity?: NumberProp,
-  ...
-} & CommonPathProps &
-  FontProps;
-declare export var G: React.ComponentClass<GProps>;
-export type GType = React.ComponentClass<GProps>;
-export interface ForeignObjectProps {
-  x?: NumberProp;
-  y?: NumberProp;
-  width?: NumberProp;
-  height?: NumberProp;
-}
-declare export var ForeignObject: React.ComponentClass<ForeignObjectProps>;
-export type ForeignObjectType = React.ComponentClass<ForeignObjectProps>;
-export type ImageProps = {
-  x?: NumberProp,
-  y?: NumberProp,
-  width?: NumberProp,
-  height?: NumberProp,
-  xlinkHref?: $PropertyType<ReactNative.ImageProps, "source"> | string,
-  href?: $PropertyType<ReactNative.ImageProps, "source"> | string,
-  preserveAspectRatio?: string,
-  opacity?: NumberProp,
-  clipPath?: string,
-  id?: string,
-  ...
-} & ResponderProps &
-  CommonMaskProps &
-  ClipProps &
-  TouchableProps;
-declare export var Image: React.ComponentClass<ImageProps>;
-export type ImageType = React.ComponentClass<ImageProps>;
-export type LineProps = {
-  opacity?: NumberProp,
-  x1?: NumberProp,
-  x2?: NumberProp,
-  y1?: NumberProp,
-  y2?: NumberProp,
-  ...
-} & CommonPathProps;
-declare export var Line: React.ComponentClass<LineProps>;
-export type LineType = React.ComponentClass<LineProps>;
-export interface LinearGradientProps {
-  x1?: NumberProp;
-  x2?: NumberProp;
-  y1?: NumberProp;
-  y2?: NumberProp;
-  gradientUnits?: Units;
-  gradientTransform?: ColumnMajorTransformMatrix | string;
-  id?: string;
-}
-declare export var LinearGradient: React.ComponentClass<LinearGradientProps>;
-export type LinearGradientType = React.ComponentClass<LinearGradientProps>;
-export type PathProps = {
-  d?: string,
-  opacity?: NumberProp,
-  ...
-} & CommonPathProps;
-declare export var Path: React.ComponentClass<PathProps>;
-export type PathType = React.ComponentClass<PathProps>;
-export interface PatternProps {
-  id?: string;
-  x?: NumberProp;
-  y?: NumberProp;
-  width?: NumberProp;
-  height?: NumberProp;
-  patternTransform?: ColumnMajorTransformMatrix | string;
-  patternUnits?: Units;
-  patternContentUnits?: Units;
-  viewBox?: string;
-  preserveAspectRatio?: string;
-}
-declare export var Pattern: React.ComponentClass<PatternProps>;
-export type PatternType = React.ComponentClass<PatternProps>;
-export type PolygonProps = {
-  opacity?: NumberProp,
-  points?: string | $ReadOnlyArray<NumberProp>,
-  ...
-} & CommonPathProps;
-declare export var Polygon: React.ComponentClass<PolygonProps>;
-export type PolygonType = React.ComponentClass<PolygonProps>;
-export type PolylineProps = {
-  opacity?: NumberProp,
-  points?: string | $ReadOnlyArray<NumberProp>,
-  ...
-} & CommonPathProps;
-declare export var Polyline: React.ComponentClass<PolylineProps>;
-export type PolylineType = React.ComponentClass<PolylineProps>;
-export interface RadialGradientProps {
-  fx?: NumberProp;
-  fy?: NumberProp;
-  rx?: NumberProp;
-  ry?: NumberProp;
-  cx?: NumberProp;
-  cy?: NumberProp;
-  r?: NumberProp;
-  gradientUnits?: Units;
-  gradientTransform?: ColumnMajorTransformMatrix | string;
-  id?: string;
-}
-declare export var RadialGradient: React.ComponentClass<RadialGradientProps>;
-export type RadialGradientType = React.ComponentClass<RadialGradientProps>;
-export type RectProps = {
-  x?: NumberProp,
-  y?: NumberProp,
-  width?: NumberProp,
-  height?: NumberProp,
-  rx?: NumberProp,
-  ry?: NumberProp,
-  opacity?: NumberProp,
-  ...
-} & CommonPathProps;
-declare export var Rect: React.ComponentClass<RectProps>;
-export type RectType = React.ComponentClass<RectProps>;
-export interface StopProps {
-  stopColor?: Color;
-  stopOpacity?: NumberProp;
-  offset?: NumberProp;
-}
-declare export var Stop: React.ComponentClass<StopProps>;
-export type StopType = React.ComponentClass<StopProps>;
-export type SvgProps = {
-  width?: NumberProp,
-  height?: NumberProp,
-  viewBox?: string,
-  preserveAspectRatio?: string,
-  color?: Color,
-  title?: string,
-  ...
-} & GProps &
-  ReactNative.ViewProperties;
-declare export var Svg: React.ComponentClass<SvgProps>;
-export type SvgType = React.ComponentClass<SvgProps>;
-declare export default typeof Svg;
-export interface SymbolProps {
-  id?: string;
-  viewBox?: string;
-  preserveAspectRatio?: string;
-  opacity?: NumberProp;
-}
-declare export var Symbol: React.ComponentClass<SymbolProps>;
-export type SymbolType = React.ComponentClass<SymbolProps>;
-export type TSpanProps = {
-  x?: NumberArray,
-  y?: NumberArray,
-  dx?: NumberArray,
-  dy?: NumberArray,
-  rotate?: NumberArray,
-  inlineSize?: NumberProp,
-  ...
-} & CommonPathProps &
-  FontProps;
-declare export var TSpan: React.ComponentClass<TSpanProps>;
-export type TSpanType = React.ComponentClass<TSpanProps>;
-export type TextSpecificProps = {
-  alignmentBaseline?: AlignmentBaseline,
-  baselineShift?: BaselineShift,
-  verticalAlign?: NumberProp,
-  lengthAdjust?: LengthAdjust,
-  textLength?: NumberProp,
-  fontData?: null | {
-    [name: string]: mixed,
-    ...
-  },
-  fontFeatureSettings?: string,
-  ...
-} & CommonPathProps &
-  FontProps;
-export type TextProps = {
-  x?: NumberArray,
-  y?: NumberArray,
-  dx?: NumberArray,
-  dy?: NumberArray,
-  rotate?: NumberArray,
-  opacity?: NumberProp,
-  inlineSize?: NumberProp,
-  ...
-} & TextSpecificProps;
-declare export var Text: React.ComponentClass<TextProps>;
-export type TextType = React.ComponentClass<TextProps>;
-export type TextPathProps = {
-  xlinkHref?: string,
-  href?: string,
-  startOffset?: NumberProp,
-  method?: TextPathMethod,
-  spacing?: TextPathSpacing,
-  midLine?: TextPathMidLine,
-  ...
-} & TextSpecificProps;
-declare export var TextPath: React.ComponentClass<TextPathProps>;
-export type TextPathType = React.ComponentClass<TextPathProps>;
-export type UseProps = {
-  xlinkHref?: string,
-  href?: string,
-  width?: NumberProp,
-  height?: NumberProp,
-  x?: NumberProp,
-  y?: NumberProp,
-  opacity?: NumberProp,
-  ...
-} & CommonPathProps;
-declare export var Use: React.ComponentClass<UseProps>;
-export type UseType = React.ComponentClass<UseProps>;
-export type MaskProps = {
-  id?: string,
-  x?: NumberProp,
-  y?: NumberProp,
-  width?: NumberProp,
-  height?: NumberProp,
-  maskUnits?: Units,
-  maskContentUnits?: Units,
-  ...
-} & CommonPathProps;
-declare export var Mask: React.ComponentClass<MaskProps>;
-export type MaskType = React.ComponentClass<MaskProps>;
-export interface MarkerProps {
-  id?: string;
-  viewBox?: string;
-  preserveAspectRatio?: string;
-  refX?: NumberProp;
-  refY?: NumberProp;
-  markerWidth?: NumberProp;
-  markerHeight?: NumberProp;
-  markerUnits?: MarkerUnits;
-  orient?: Orient | NumberProp;
-}
-declare export var Marker: React.ComponentClass<MarkerProps>;
-export type MarkerType = React.ComponentClass<MarkerProps>;
-export type Styles = {
-  [property: string]: string,
-  ...
-};
-export interface AST {
-  tag: string;
-  style?: Styles;
-  styles?: string;
-  priority?: Map<string, boolean | void>;
-  parent: AST | null;
-  children: (AST | string)[] | (React$Node | string)[];
-  props: {
-    [prop: string]: Styles | string | void,
-    ...
-  };
-  Tag: React.ComponentType<>;
-}
-export type XmlAST = {
-  children: (XmlAST | string)[],
-  parent: XmlAST | null,
-  ...
-} & AST;
-export type JsxAST = {
-  children: (React$Node | string)[],
-  ...
-} & AST;
-export type UriProps = {
-  uri: string | null,
-  onError?: (error: Error) => void,
-  override?: SvgProps,
-  onError?: (error: Error) => void,
-  onLoad?: () => void,
-  ...
-} & SvgProps;
-export type UriState = {
-  xml: string | null,
-  ...
-};
-export type XmlProps = {
-  xml: string | null,
-  onError?: (error: Error) => void,
-  override?: SvgProps,
-  ...
-} & SvgProps;
-export type XmlState = {
-  ast: JsxAST | null,
-  ...
-};
-export type AstProps = {
-  ast: JsxAST | null,
-  override?: SvgProps,
-  ...
-} & SvgProps;
-export type Middleware = (ast: XmlAST) => XmlAST;
-declare export function parse(
-  source: string,
-  middleware?: Middleware
-): JsxAST | null;
-declare export var SvgAst: React.FunctionComponent<AstProps>;
-declare export var SvgXml: React.FunctionComponent<XmlProps>;
-declare export var SvgFromXml: React.ComponentClass<XmlProps, XmlState>;
-declare export var SvgUri: React.FunctionComponent<UriProps>;
-declare export var SvgFromUri: React.ComponentClass<UriProps, UriState>;
-declare export var SvgCss: React.FunctionComponent<XmlProps>;
-declare export var SvgWithCss: React.ComponentClass<XmlProps, XmlState>;
-declare export var SvgCssUri: React.FunctionComponent<UriProps>;
-declare export var SvgWithCssUri: React.ComponentClass<UriProps, UriState>;
-declare export var inlineStyles: Middleware;
--- a/src/lib/Matrix2D.ts
+++ b/src/lib/Matrix2D.ts
@@ -70,7 +70,7 @@ export function append(
  c2: number,
  d2: number,
  tx2: number,
-  ty2: number,
+  ty2: number
 ) {
  const change = a2 !== 1 || b2 !== 0 || c2 !== 0 || d2 !== 1;
  const translate = tx2 !== 0 || ty2 !== 0;
@@ -131,7 +131,7 @@ export function appendTransform(
  skewX: number,
  skewY: number,
  regX: number,
-  regY: number,
+  regY: number
 ) {
  if (
    x === 0 &&
--- a/src/lib/SvgTouchableMixin.ts
+++ b/src/lib/SvgTouchableMixin.ts
@@ -1,8 +1,7 @@
-// @ts-ignore
 import type { GestureResponderEvent } from 'react-native';
 import { Touchable } from 'react-native';
 const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
-// @ts-ignore
+// @ts-expect-error: Mixin is not typed
 const { Mixin } = Touchable;
 const {
  touchableHandleStartShouldSetResponder,
--- a/src/lib/extract/extractGradient.ts
+++ b/src/lib/extract/extractGradient.ts
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
-import React, { Children } from 'react';
+import * as React from 'react';
+import { Children } from 'react';
 import { processColor } from 'react-native';

 import extractOpacity from './extractOpacity';
@@ -15,7 +16,7 @@ function percentToFloat(
    | string
    | {
        __getAnimatedValue: () => number;
-      },
+      }
 ): number {
  if (typeof percent === 'number') {
    return percent;
@@ -46,7 +47,7 @@ export default function extractGradient(
    gradientTransform?: TransformProps['transform'];
    gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
  } & TransformProps,
-  parent: {},
+  parent: unknown
 ) {
  const { id, children, gradientTransform, transform, gradientUnits } = props;
  if (!id) {
@@ -58,7 +59,7 @@ export default function extractGradient(
    ? Children.map(children, (child) =>
        React.cloneElement(child, {
          parent,
-        }),
+        })
      )
    : [];
  const l = childArray.length;
@@ -75,7 +76,7 @@ export default function extractGradient(
    const color = stopColor && processColor(stopColor);
    if (typeof color !== 'number' || isNaN(offsetNumber)) {
      console.warn(
-        `"${stopColor}" is not a valid color or "${offset}" is not a valid offset`,
+        `"${stopColor}" is not a valid color or "${offset}" is not a valid offset`
      );
      continue;
    }
@@ -97,7 +98,7 @@ export default function extractGradient(
    children: childArray,
    gradientUnits: (gradientUnits && units[gradientUnits]) || 0,
    gradientTransform: extractTransform(
-      gradientTransform || transform || props,
+      gradientTransform || transform || props
    ),
  };
 }
--- a/src/lib/extract/extractProps.ts
+++ b/src/lib/extract/extractProps.ts
@@ -19,7 +19,7 @@ const clipRules: { evenodd: number; nonzero: number } = {
  nonzero: 1,
 };

-export function propsAndStyles(props: Object & { style?: [] | {} }) {
+export function propsAndStyles(props: object & { style?: [] | unknown }) {
  const { style } = props;
  return !style
    ? props
@@ -57,7 +57,7 @@ export default function extractProps(
    StrokeProps &
    FillProps &
    ClipProps,
-  ref: Object,
+  ref: object
 ) {
  const {
    id,
@@ -140,7 +140,7 @@ export default function extractProps(
      console.warn(
        'Invalid `clipPath` prop, expected a clipPath like "#id", but got: "' +
          clipPath +
-          '"',
+          '"'
      );
    }
  }
@@ -154,7 +154,7 @@ export default function extractProps(
      console.warn(
        'Invalid `mask` prop, expected a mask like "#id", but got: "' +
          mask +
-          '"',
+          '"'
      );
    }
  }
@@ -162,7 +162,10 @@ export default function extractProps(
  return extracted;
 }

-export function extract(instance: Object, props: Object & { style?: [] | {} }) {
+export function extract(
+  instance: object,
+  props: object & { style?: [] | unknown }
+) {
  return extractProps(propsAndStyles(props), instance);
 }

@@ -180,8 +183,8 @@ export function stringifyPropsForFabric(props: {
 }

 export function withoutXY(
-  instance: Object,
-  props: Object & { style?: [] | {} },
+  instance: object,
+  props: object & { style?: [] | unknown }
 ) {
  return extractProps({ ...propsAndStyles(props), x: null, y: null }, instance);
 }
--- a/src/lib/extract/extractProps.windows.ts
+++ b/src/lib/extract/extractProps.windows.ts
@@ -19,7 +19,7 @@ const clipRules: { evenodd: number; nonzero: number } = {
  nonzero: 1,
 };

-export function propsAndStyles(props: Object & { style?: [] | {} }) {
+export function propsAndStyles(props: object & { style?: [] | unknown }) {
  const { style } = props;
  return !style
    ? props
@@ -54,7 +54,7 @@ export default function extractProps(
    StrokeProps &
    FillProps &
    ClipProps,
-  ref: Object,
+  ref: object
 ) {
  const {
    id,
@@ -122,7 +122,7 @@ export default function extractProps(
      console.warn(
        'Invalid `clipPath` prop, expected a clipPath like "#id", but got: "' +
          clipPath +
-          '"',
+          '"'
      );
    }
  }
@@ -136,7 +136,7 @@ export default function extractProps(
      console.warn(
        'Invalid `mask` prop, expected a mask like "#id", but got: "' +
          mask +
-          '"',
+          '"'
      );
    }
  }
@@ -144,7 +144,10 @@ export default function extractProps(
  return extracted;
 }

-export function extract(instance: Object, props: Object & { style?: [] | {} }) {
+export function extract(
+  instance: object,
+  props: object & { style?: [] | unknown }
+) {
  return extractProps(propsAndStyles(props), instance);
 }

@@ -166,8 +169,8 @@ export function stringifyPropsForFabric(props: {
 }

 export function withoutXY(
-  instance: Object,
-  props: Object & { style?: [] | {} },
+  instance: object,
+  props: object & { style?: [] | unknown }
 ) {
  return extractProps({ ...propsAndStyles(props), x: null, y: null }, instance);
 }
--- a/src/lib/extract/extractText.tsx
+++ b/src/lib/extract/extractText.tsx
@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
-import React, { Children } from 'react';
+import * as React from 'react';
+import { Children } from 'react';
 import extractLengthList from './extractLengthList';
 import { pickNotNil } from '../util';
 import type { NumberArray, NumberProp } from './types';
@@ -33,7 +34,7 @@ function extractSingleFontFamily(fontFamilyString?: string) {
 }

 function parseFontString(font: string) {
-  if (cachedFontObjectsFromString.hasOwnProperty(font)) {
+  if (Object.prototype.hasOwnProperty.call(cachedFontObjectsFromString, font)) {
    return cachedFontObjectsFromString[font];
  }
  const match = fontRegExp.exec(font);
@@ -119,13 +120,13 @@ export function extractFont(props: fontProps) {
  Object.keys(fontProps).map(
    (k) =>
      (stringifiedFontProps[k] =
-        fontProps[k] === null ? null : String(fontProps[k])),
+        fontProps[k] === null ? null : String(fontProps[k]))
  );

  return stringifiedFontProps;
 }

-let TSpan: ComponentType<React.PropsWithChildren<{}>>;
+let TSpan: ComponentType<React.PropsWithChildren>;

 export function setTSpan(TSpanImplementation: ComponentType) {
  TSpan = TSpanImplementation;
--- a/src/lib/extract/types.ts
+++ b/src/lib/extract/types.ts
@@ -3,9 +3,9 @@ import type {
  GestureResponderEvent,
  GestureResponderHandlers,
  LayoutChangeEvent,
+  TransformsStyle,
 } from 'react-native';
 import type React from 'react';
-import type { TransformsStyle } from 'react-native';

 export type NumberProp = string | number;
 export type NumberArray = NumberProp[] | NumberProp;
@@ -262,10 +262,10 @@ export type ResponderInstanceProps = {
  touchableHandleResponderRelease?: (e: GestureResponderEvent) => void;
  touchableHandleResponderTerminate?: (e: GestureResponderEvent) => void;
  touchableHandleStartShouldSetResponder?: (
-    e: GestureResponderEvent,
+    e: GestureResponderEvent
  ) => boolean;
  touchableHandleResponderTerminationRequest?: (
-    e: GestureResponderEvent,
+    e: GestureResponderEvent
  ) => boolean;
 };

--- a/src/lib/resolve.ts
+++ b/src/lib/resolve.ts
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 // Kept in separate file, to avoid name collision with Symbol element
 export function resolve<T>(
  styleProp: Iterable<T> | undefined,
-  cleanedProps: T,
+  cleanedProps: T
 ) {
  if (styleProp) {
    return StyleSheet
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -1,7 +1,7 @@
 export function pickNotNil(object: { [prop: string]: unknown }) {
  const result: { [prop: string]: unknown } = {};
  for (const key in object) {
-    if (object.hasOwnProperty(key)) {
+    if (Object.prototype.hasOwnProperty.call(object, key)) {
      const value = object[key];
      if (value !== undefined && value !== null) {
        result[key] = value;
--- a/src/xml.tsx
+++ b/src/xml.tsx
@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
-import React, { Component, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
+import { Component, useEffect, useMemo, useState } from 'react';
 import Rect from './elements/Rect';
 import Circle from './elements/Circle';
 import Ellipse from './elements/Ellipse';
@@ -65,7 +66,7 @@ export interface AST {
  props: {
    [prop: string]: Styles | string | undefined;
  };
-  Tag: ComponentType<React.PropsWithChildren<{}>>;
+  Tag: ComponentType<React.PropsWithChildren>;
 }

 export interface XmlAST extends AST {
@@ -79,7 +80,7 @@ export interface JsxAST extends AST {

 export type AdditionalProps = {
  onError?: (error: Error) => void;
-  override?: Object;
+  override?: object;
  onLoad?: () => void;
  fallback?: JSX.Element;
 };
@@ -112,7 +113,7 @@ export function SvgXml(props: XmlProps) {
  try {
    const ast = useMemo<JsxAST | null>(
      () => (xml !== null ? parse(xml) : null),
-      [xml],
+      [xml]
    );
    return <SvgAst ast={ast} override={override || props} />;
  } catch (error) {
@@ -161,12 +162,14 @@ export class SvgFromXml extends Component<XmlProps, XmlState> {
  componentDidMount() {
    this.parse(this.props.xml);
  }
+
  componentDidUpdate(prevProps: { xml: string | null }) {
    const { xml } = this.props;
    if (xml !== prevProps.xml) {
      this.parse(xml);
    }
  }
+
  parse(xml: string | null) {
    try {
      this.setState({ ast: xml ? parse(xml) : null });
@@ -174,6 +177,7 @@ export class SvgFromXml extends Component<XmlProps, XmlState> {
      console.error(e);
    }
  }
+
  render() {
    const {
      props,
@@ -188,12 +192,14 @@ export class SvgFromUri extends Component<UriProps, UriState> {
  componentDidMount() {
    this.fetch(this.props.uri);
  }
+
  componentDidUpdate(prevProps: { uri: string | null }) {
    const { uri } = this.props;
    if (uri !== prevProps.uri) {
      this.fetch(uri);
    }
  }
+
  async fetch(uri: string | null) {
    try {
      this.setState({ xml: uri ? await fetchText(uri) : null });
@@ -201,6 +207,7 @@ export class SvgFromUri extends Component<UriProps, UriState> {
      console.error(e);
    }
  }
+
  render() {
    const {
      props,
@@ -235,7 +242,7 @@ export function getStyle(string: string): Styles {

 export function astToReact(
  value: AST | string,
-  index: number,
+  index: number
 ): JSX.Element | string {
  if (typeof value === 'object') {
    const { Tag, props, children } = value;
@@ -296,12 +303,12 @@ export function parse(source: string, middleware?: Middleware): JsxAST | null {
  let state = metadata;
  let children = null;
  let root: XmlAST | undefined;
-  let stack: XmlAST[] = [];
+  const stack: XmlAST[] = [];

  function error(message: string) {
    const { line, column, snippet } = locate(source, i);
    throw new Error(
-      `${message} (${line}:${column}). If this is valid SVG, it's probably a bug. Please raise an issue\n\n${snippet}`,
+      `${message} (${line}:${column}). If this is valid SVG, it's probably a bug. Please raise an issue\n\n${snippet}`
    );
  }

@@ -435,7 +442,7 @@ export function parse(source: string, middleware?: Middleware): JsxAST | null {

    if (currentElement && tag !== currentElement.tag) {
      error(
-        `Expected closing tag </${tag}> to match opening tag <${currentElement.tag}>`,
+        `Expected closing tag </${tag}> to match opening tag <${currentElement.tag}>`
      );
    }

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,23 +1,19 @@
 {
  "compilerOptions": {
-    "target": "es2017",
-    "lib": ["es6", "es2016"],
+    "baseUrl": ".",
+    "declaration": true,
+    "preserveSymlinks": true,
+    "target": "es6",
+    "module": "ESNext",
    "jsx": "react-native",
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
+    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
-    "types": ["react", "react-native"]
+    "moduleResolution": "node",
+    "lib": ["es6", "dom"],
+    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
  },
-  "include": ["src/**/*"]
+  "include": ["src"]
 }
--- a/yarn.lock
+++ b/yarn.lock