`Unable to resolve "expo-linear-gradient"` error when using <LmDateSelection/>
GaNiziolek opened this issue · comments
Hello,
I'm developing my application using Tamagui, and I need to use some DatePicker, so I found this package @tamagui-extras/date wich seems to be fine.
I Installed with
yarn add @tamagui-extras/date
package.json
"dependencies": {
"@expo-google-fonts/poppins": "^0.2.3",
"@react-navigation/native": "^6.0.2",
"@tamagui-extras/date": "^1.9.9",
"@tamagui/babel-plugin": "^1.76.0",
"@tamagui/config": "^1.76.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
"expo": "~49.0.15",
"expo-crypto": "~12.4.1",
"expo-font": "~11.4.0",
"expo-linking": "~5.0.2",
"expo-router": "^2.0.0",
"expo-secure-store": "~12.3.1",
"expo-splash-screen": "~0.20.5",
"expo-sqlite": "~11.3.3",
"expo-status-bar": "~1.6.0",
"expo-system-ui": "~2.4.0",
"expo-web-browser": "~12.3.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.6",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-svg": "13.9.0",
"react-native-web": "~0.19.6",
"tamagui": "^1.76.0"
},The component where I use the date picker
import React from "react"
import { type GetProps, YStack } from "tamagui"
import { LmDateSelection } from "@tamagui-extras/date"
export interface IStyledDatePickerProps {
$stack?: GetProps<typeof YStack>
$switch?: GetProps<typeof Switch>
label?: string
}
export default function StyledDatePicker(props: IStyledDatePickerProps) {
return (
<YStack
px={16}
py={8}
gap={8}
{...props.$stack}
>
<LmDateSelection />
</YStack>
)
}When I add the <LmDateSelection/> to my component, the following error occurs
Unable to resolve "expo-linear-gradient" from "node_modules/@tamagui/linear-gradient/dist/cjs/linear-gradient.native.js"
ERROR [Error: undefined Unable to resolve module expo-linear-gradient from ./node_modules/@tamagui/linear-gradient/dist/cjs/linear-gradient.native.js: expo-linear-gradient could not be found within the project or in these directories:
node_modules
../node_modules
19 | });
20 | module.exports = __toCommonJS(linear_gradient_exports);
> 21 | var import_expo_linear_gradient = require("expo-linear-gradient");
| ^
22 | // Annotate the CommonJS export names for ESM import in node:
23 | 0 && (module.exports = {
24 | LinearGradient]
does yarn add expo-linear-gradient solves the issue?
Thanks for your fast response @dohomi,
I've added the expo-linear-gradient but now there is another error.
ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNCDatePicker' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes
at ContextNavigator (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:153194:24)
at ExpoRoot (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:153165:30)
at App
at withDevTools(App) (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:132787:27)
at ErrorToastContainer (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:132688:24)
at ErrorOverlay
at RCTView
at View (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:40270:43)
at RCTView
at View (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:40270:43)
at AppContainer (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:40110:36)
at main(RootComponent) (http://192.168.0.209:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true:121862:28)Have a look at this issue: #36 (comment)
on native (expo) you have to add the missing dependencies and its very frickle - I think mostly because of the mono repo setup. Make sure you are running on the same version of the external dependencies.
I also think I might drop in a new component which does not use the RNCDatePIcker and purely uses the tamagui web versioin I've built for the web version
By the way the https://tamagui.dev/docs/components/linear-gradient/1.0.0 docs states that on native you have to add the expo-linear-gradient I have to add it somewhere to the docs.
I've found this issue https://stackoverflow.com/a/77652563/13283955, It seems to be a similar error.
The @tamagui-extras/date package installs react-native-community/datetimepicker@7.6.2
Following this tutorial on expo docs and using npx expo install @react-native-community/datetimepicker installs version 7.2.0.
Maybe expo 49 do not support react-native-community/datetimepicker@7.6.2 this version?
Your best bet for this scenario is using your root package.json and pin via resolve @react-native-community/datetimepicker to a functioning version. Please let me know if you succeed - otherwise I might expose the non-native datepicker under a different component name and without @react-native-community/datetimepicker
I've added this to package.json and all works fine now
"resolutions": {
"@react-native-community/datetimepicker": "7.2.0"
},So seems some package doesn't support the last @react-native-community/datetimepicker version, probably expo.
https://stackoverflow.com/a/77652563/13283955
https://stackoverflow.com/a/41082766/13283955
I add a new section to the readme for other users to have a better start using this library: https://github.com/dohomi/tamagui-kitchen-sink/blob/master/readme.md#installation--troubleshoot-expo
Closing the issue for now