search

marcuzgabriel / react-native-reanimated-skeleton

A customizable skeleton-like loading placeholder for react native projects using reanimated v3
https://marcuzgabriel.github.io/react-native-reanimated-skeleton
MIT License
78 stars 7 forks source link

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

Open Francowerner opened 7 months ago

Francowerner commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

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

Tobertet commented 6 months ago

I am having the same problem with Android.

Jzuni97 commented 6 months ago

@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 commented 6 months ago

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

Tobertet commented 6 months ago

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

marcuzgabriel commented 6 months ago

@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 commented 6 months ago 
"react-native-reanimated-skeleton": "^1.5.0",
"react-native-linear-gradient": "^2.8.3",
"react-native": "0.72.6",
marcuzgabriel commented 6 months ago

@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 commented 6 months ago

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

meng1204 commented 6 months ago

@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 commented 6 months ago

@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 commented 5 months ago

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 commented 4 months ago

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