ERROR Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

[Francowerner]

I've installed this package to try it out on expo go but cant get it to work. I've pasted the code from the example

`<Skeleton
isLoading={true}
containerStyle={styles.container}

Your content
Other content
`

imported it from import Skeleton from 'react-native-reanimated-skeleton';

this is my package.json:

"dependencies": { "@expo/metro-config": "^0.10.7", "@gorhom/bottom-sheet": "^4.6.0", "@hookform/resolvers": "^3.3.4", "@react-native-async-storage/async-storage": "1.18.2", "@shopify/flash-list": "1.4.3", "@tanstack/react-query": "^5.17.7", "@trpc/client": "next", "@trpc/react-query": "next", "@trpc/server": "next", "expo": "^49.0.21", "expo-barcode-scanner": "~12.5.3", "expo-camera": "~13.4.4", "expo-constants": "~14.4.2", "expo-image": "~1.3.5", "expo-image-picker": "~14.3.2", "expo-linear-gradient": "~12.3.0", "expo-linking": "~5.0.2", "expo-localization": "~14.3.0", "expo-media-library": "~15.4.1", "expo-router": "2.0.14", "expo-secure-store": "~12.3.1", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", "nativewind": "^4.0.22", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.49.2", "react-native": "0.72.6", "react-native-confirmation-code-field": "^7.3.2", "react-native-gesture-handler": "~2.12.0", "react-native-gifted-chat": "^2.4.0", "react-native-reanimated": "~3.3.0", "react-native-reanimated-carousel": "^3.5.1", "react-native-reanimated-skeleton": "^1.5.0", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.1", "react-native-svg": "13.9.0", "socket.io-client": "^4.7.4", "superjson": "2.2.1", "zod": "^3.22.4" }, "devDependencies": { "@babel/core": "^7.23.7", "@babel/preset-env": "^7.23.7", "@babel/runtime": "^7.23.7", "@expo/config-plugins": "7.2.2", "@forevent/api": "workspace:^0.1.0", "@forevent/eslint-config": "workspace:^0.2.0", "@forevent/prettier-config": "workspace:^0.1.0", "@forevent/tailwind-config": "workspace:^0.1.0", "@forevent/tsconfig": "workspace:^0.1.0", "@types/babel__core": "^7.20.4", "@types/react": "^18.2.46", "eslint": "^8.56.0", "metro": "^0.80.4", "prettier": "^3.1.1", "tailwindcss": "^3.4.0", "typescript": "^5.3.3" },

As you can see i have both react native reanimated and expo linear gradient installed, which, if missing, are suggested to be the culprits of this issue. im running on expo go sdk 49 with expo router. Thanks in advance

[marcuzgabriel]

@Francowerner. Thanks for your issue.

This library uses react-native-linear-gradient package. It does not use expo-linear-gradient.

I would naturally assume that this is why it complains about BVLinearGradient. Please try:

1. Add react-native-linear-gradient package to your package.json
2. Pod install and try again

[EmmyAina]

I'm currently experiencing this issue

Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

I have tried adding and installing react-native-linear-gradient package, but it doesn't fix the issue

[marcuzgabriel]

@EmmyAina and you also ensured that you did pod install and clean build?

[Tobertet]

I am having the same problem with Android.

[Jzuni97]

@Francowerner. Thanks for your issue.

This library uses react-native-linear-gradient package. It does not use expo-linear-gradient.

I would naturally assume that this is why it complains about BVLinearGradient. Please try:

1. Add react-native-linear-gradient package to your package.json
2. Pod install and try again

This worked for me, thanks!

[Tobertet]

@marcuzgabriel this issue is happening on Android as well. I tried clearing gradle and running it again but the same error appears.

[Tobertet]

Managed to get it to work after following these steps https://stackoverflow.com/a/71888815/7087543

[marcuzgabriel]

@marcuzgabriel this issue is happening on Android as well. I tried clearing gradle and running it again but the same error appears.

@Tobertet What version of React native do you use and what version og react-native-linear-gradient do you use? I will try to reproduce

[Tobertet]

"react-native-reanimated-skeleton": "^1.5.0",
"react-native-linear-gradient": "^2.8.3",
"react-native": "0.72.6",

[marcuzgabriel]

@Tobertet

I have used the packages above and created a new project react-native init projectname --version 0.72.6. The repo is here: https://github.com/marcuzgabriel/test-app-reanimated-skeleton.

Without any further fixes / configuration it works out of the box. The only thing I experienced was that I had the run the metro bundler with --reset-cache to ensure my newly added packages took effect.

[meng1204]

I have the same issue. It's not working when running on Expo.

[meng1204]

@Francowerner. Thanks for your issue.

This library uses react-native-linear-gradient package. It does not use expo-linear-gradient.

I would naturally assume that this is why it complains about BVLinearGradient. Please try:

1. Add react-native-linear-gradient package to your package.json
2. Pod install and try again

NOT WORKING

[marcuzgabriel]

@Francowerner. Thanks for your issue.

This library uses react-native-linear-gradient package. It does not use expo-linear-gradient.

I would naturally assume that this is why it complains about BVLinearGradient. Please try:

1. Add react-native-linear-gradient package to your package.json

2. Pod install and try again

NOT WORKING

I will try to set up an Expo project and try to reproduce and see what I can do.

[marcuzgabriel]

Here is how I got it to work with expo.

react-native-linear-gradient is not supported with Expo. As they are identical in API, a postinstall script is needed to change the import path from react-native-linear-gradient to expo-linear-gradient. Furthermore, the postinstall script also addresses that expo-linear-gradient refers to LinearGradient as const instead of default. So the script will ensure:

import LinearGradient from 'react-native-linear-gradient';

... transforms into ...

import { LinearGradient } from 'expo-linear-gradient';

1. Ensure you have this script https://github.com/marcuzgabriel/react-native-reanimated-skeleton/tree/main/packages/expo/scripts
2. Make sure postinstall is added to the package.json. Please see example: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/expo/package.json
3. npm install and rerun the app

[DaltonPelkey]

Just adding to this.

react-native-linear-gradient can be used with Expo, but you must use a dev client. Simply install the peer dependencies:
npx expo install react-native-reanimated react-native-linear-gradient

Rebuild your app:
npx expo prebuild --clean and npx expo run:ios/android

Or see here if you are building using EAS:
https://docs.expo.dev/build/setup/

Note: npm 7 should automatically install peer deps, but it never hurts to add them explicitly