-
|
Hey there! So I've been updating Reanimated to v4 in my project and want to give a try to the new CSS transitions. It all works nicely, except that I constantly get typing error on For instance here is the output of the `bun tsc` command I getbun tsc
src/components/forms/BaseThemedFormInput.tsx:37:9 - error TS2322: Type '{ borderColor: string; transitionProperty: "borderColor"; transitionDuration: number; }' is not assignable to type 'false | "" | (false & Partial<CSSAnimationProperties> & Partial<CSSTransitionProperties>) | ("" & Partial<...> & Partial<...>) | ... 14 more ... | undefined'.
Type '{ borderColor: string; transitionProperty: "borderColor"; transitionDuration: number; }' is not assignable to type 'undefined'.
37 {
~
38 borderColor: isFocused
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
42 transitionDuration: animationDuration,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
43 },
~~~~~~~~~
src/components/forms/BaseThemedFormInput.tsx:52:13 - error TS2322: Type '{ fontSize: 14 | 12; transform: { translateY: number; }[]; transitionProperty: ("fontSize" | "transform")[]; transitionDuration: number; }' is not assignable to type 'false | "" | (false & Partial<CSSAnimationProperties> & Partial<CSSTransitionProperties>) | ("" & Partial<...> & Partial<...>) | ... 14 more ... | undefined'.
Type '{ fontSize: 14 | 12; transform: { translateY: number; }[]; transitionProperty: ("fontSize" | "transform")[]; transitionDuration: number; }' is not assignable to type 'undefined'.
52 {
~
53 fontSize: isActive
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
62 transitionDuration: animationDuration,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
63 },
~~~~~~~~~~~~~
src/components/forms/BaseThemedFormInput.tsx:72:11 - error TS2322: Type '{ transform: { translateY: number; }[]; transitionDuration: number; transitionProperty: "transform"; }' is not assignable to type 'false | "" | (false & Partial<CSSAnimationProperties> & Partial<CSSTransitionProperties>) | ("" & Partial<...> & Partial<...>) | ... 14 more ... | undefined'.
Type '{ transform: { translateY: number; }[]; transitionDuration: number; transitionProperty: "transform"; }' is not assignable to type 'undefined'.
72 {
~
73 transform: [
~~~~~~~~~~~~~~~~~~~~~~~~
...
79 transitionProperty: "transform",
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
80 },
~~~~~~~~~~~
Found 3 errors in the same file, starting at: src/components/forms/BaseThemedFormInput.tsx:37I'm still pretty new to React Native world as I'm an iOS dev so I might miss something very obvious here 😅 Here is my package.json as it might contain some relevant version info, note that I'm using Unistyles as styling library{
"name": "xxx",
"main": "index.ts",
"version": "0.0.1",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint",
"lint:fix": "eslint . --fix",
"prepare": "husky"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@gorhom/bottom-sheet": "^5.1.8",
"@react-native-async-storage/async-storage": "2.1.2",
"@react-native-community/datetimepicker": "8.4.1",
"@react-native-masked-view/masked-view": "0.3.2",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"@react-navigation/stack": "^7.4.2",
"@sentry/react-native": "~6.10.0",
"@shopify/react-native-skia": "^2.1.1",
"@supabase/supabase-js": "^2.49.4",
"eas-build-cache-provider": "^16.4.2",
"expo-blur": "~14.1.4",
"expo-constants": "~17.1.6",
"expo-dev-client": "~5.1.8",
"expo-font": "~13.3.1",
"expo-haptics": "~14.1.4",
"expo-linear-gradient": "~14.1.4",
"expo-linking": "~7.1.4",
"expo-localization": "~16.1.5",
"expo-router": "~5.0.6",
"expo-splash-screen": "~0.30.8",
"expo-status-bar": "~2.2.3",
"expo-symbols": "~0.4.5",
"expo-system-ui": "~5.0.7",
"expo-web-browser": "~14.1.6",
"i18next": "^24.2.3",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-i18next": "^15.4.1",
"react-native": "0.79.2",
"react-native-easing-gradient": "^1.1.1",
"react-native-edge-to-edge": "1.6.0",
"react-native-gesture-handler": "~2.24.0",
"react-native-keyboard-controller": "^1.17.5",
"react-native-nitro-modules": "^0.26.2",
"react-native-reanimated": "~4.0.2",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-unistyles": "^3.0.3",
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "^0.20.0",
"react-native-webview": "13.13.5",
"react-native-worklets": "^0.4.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.12",
"@types/react": "~19.0.10",
"eslint": "^8.57.0",
"eslint-config-expo": "~9.2.0",
"eslint-config-prettier": "^10.1.2",
"eslint-import-resolver-typescript": "^4.3.4",
"eslint-plugin-import-x": "^4.11.0",
"eslint-plugin-prettier": "^5.2.6",
"husky": "^9.1.7",
"jest": "^29.2.1",
"jest-expo": "~53.0.5",
"lint-staged": "^15.5.1",
"prettier": "^3.5.3",
"typescript": "^5.3.3"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"prettier --write",
"eslint --fix"
]
},
"private": true
}Don't hesitate to tell me if some more information is needed 😊 |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 12 replies
-
|
Hey @qeude! Could you possibly share the source code of the component in which the TS complains about these types? I will try to recreate the same setup on my side and see if I get the same error. |
Beta Was this translation helpful? Give feedback.
-
|
No worries, just tried and it seems like it worked nicely Thanks a lot! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Ok, so, as far as I understand, the issue is gone and the problem was resolved? |
Beta Was this translation helpful? Give feedback.
-
|
Well actually, the error comes back after running |
Beta Was this translation helpful? Give feedback.
-
|
Ok, then it might be an issue with expo generated types similar to this one. Can you please check if there is a |
Beta Was this translation helpful? Give feedback.
-
|
As soon as I delete |
Beta Was this translation helpful? Give feedback.
-
|
I bumped my local project to expo What I can suggest is patching the |
Beta Was this translation helpful? Give feedback.
-
|
And are you sure that you use expo |
Beta Was this translation helpful? Give feedback.
-
Yes I updated it locally to ensure that wasn't the cause. It seems like updating all dependencies to the recommended version from |
Beta Was this translation helpful? Give feedback.
-
|
Hey @qeude! Coming back to the topic. Have you managed to test it out? |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for the late answer, I've been busy lately. I managed to test it out and it works. |
Beta Was this translation helpful? Give feedback.
Ok, then it might be an issue with expo generated types similar to this one. Can you please check if there is a
expo-env.d.tsfile in your repo root and if deleting this file fixes the issue? Can you tell me which version ofexpodo you use? I think that the issue was resolved in SDK 53 so maybe you are using too old version that is not compatible.