Expo Support?

[bfarrgaynor]

When running this on an Expo managed project I get a BVLinearGradient was not found in the UIManager error. Is it possible to work around this? It looks like the issue has to do with react-native-linear-gradient. Is it possible to swap this dependency for expo-linear-gradient? Has anyone got this working in expo?

[oldo]

I've ended up using https://github.com/mfrachet/rn-placeholder

[suraj-ingle]

@bfarrgaynor +1 tried rebuilding the app as suggested by some stackoverflow answers but that didn't help. the error happens only when i use the <SkeletonPlaceholder></SkeletonPlaceholder>

Devs, Let me know if you need any details abt my environment setup

[ftzi]

Same. The exact error: Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

[ansmlc]

Any news on Expo support?

[soltaneben]

I've ended up using https://github.com/mfrachet/rn-placeholder

That package costed me a lot of problems, I ended up using rn-placeholder too, it is simple and works fine in both IOS & Android

[djw27]

expo-linear-gradient and react-native-linear-gradient have very similar (the same?) APIs, so one potential approach at getting this package to work with expo is to apply a patch to react-native-skeleton-placeholder as follows:

diff --git a/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js b/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
index 95b995a..80e7540 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const react_native_linear_gradient_1 = require("expo-linear-gradient");
 const WINDOW_WIDTH = react_native_1.Dimensions.get('window').width;
 const logEnabled = false;
 const SkeletonPlaceholder = ({ children, enabled = true, backgroundColor = '#E1E9EE', highlightColor = '#F2F8FC', speed = 800, direction = 'right', borderRadius, }) => {
@@ -83,7 +83,7 @@ const SkeletonPlaceholder = ({ children, enabled = true, backgroundColor = '#E1E
       <react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, { backgroundColor }]}/>
 
       {isAnimationReady && highlightColor !== undefined && transparentColor !== undefined && (<react_native_1.Animated.View style={animatedGradientStyle}>
-          <react_native_linear_gradient_1.default {...gradientProps} colors={[transparentColor, highlightColor, transparentColor]}/>
+          <react_native_linear_gradient_1.LinearGradient {...gradientProps} colors={[transparentColor, highlightColor, transparentColor]}/>
         </react_native_1.Animated.View>)}
     </masked_view_1.default>);
 };

Apply the patch using patch-package. We're doing this in production with no issues.

[NabeelUppel]

I believe you have to use the dev-client. https://docs.expo.dev/development/create-development-builds/

This creates a client that allows BVLinearGradient to be registered

[samiul-bs]

expo-linear-gradient and react-native-linear-gradient have very similar (the same?) APIs, so one potential approach at getting this package to work with expo is to apply a patch to react-native-skeleton-placeholder as follows:

diff --git a/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js b/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
index 95b995a..80e7540 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const react_native_linear_gradient_1 = require("expo-linear-gradient");
 const WINDOW_WIDTH = react_native_1.Dimensions.get('window').width;
 const logEnabled = false;
 const SkeletonPlaceholder = ({ children, enabled = true, backgroundColor = '#E1E9EE', highlightColor = '#F2F8FC', speed = 800, direction = 'right', borderRadius, }) => {
@@ -83,7 +83,7 @@ const SkeletonPlaceholder = ({ children, enabled = true, backgroundColor = '#E1E
       <react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, { backgroundColor }]}/>
 
       {isAnimationReady && highlightColor !== undefined && transparentColor !== undefined && (<react_native_1.Animated.View style={animatedGradientStyle}>
-          <react_native_linear_gradient_1.default {...gradientProps} colors={[transparentColor, highlightColor, transparentColor]}/>
+          <react_native_linear_gradient_1.LinearGradient {...gradientProps} colors={[transparentColor, highlightColor, transparentColor]}/>
         </react_native_1.Animated.View>)}
     </masked_view_1.default>);
 };

Apply the patch using patch-package. We're doing this in production with no issues.

Just a little change is needed for the updated react-native-skeleton-placeholder library 5.2.4. Updated patch here

diff --git a/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js b/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
index 353abb6..f019b00 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/skeleton-placeholder.js
@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const react_native_linear_gradient_1 = require("expo-linear-gradient");
 const WINDOW_WIDTH = react_native_1.Dimensions.get('window').width;
 const logEnabled = false;
 const SkeletonPlaceholder = ({ children, enabled = true, backgroundColor = '#E1E9EE', highlightColor = '#F2F8FC', speed = 800, direction = 'right', borderRadius, shimmerWidth, }) => {
@@ -86,7 +86,7 @@ const SkeletonPlaceholder = ({ children, enabled = true, backgroundColor = '#E1E
       <react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, { backgroundColor }]}/>
 
       {isAnimationReady && highlightColor !== undefined && transparentColor !== undefined && (<react_native_1.Animated.View style={animatedGradientStyle}>
-          <react_native_linear_gradient_1.default {...getGradientProps(shimmerWidth)} colors={[transparentColor, highlightColor, transparentColor]}/>
+        <react_native_linear_gradient_1.LinearGradient {...getGradientProps(shimmerWidth)} colors={[transparentColor, highlightColor, transparentColor]}/>
         </react_native_1.Animated.View>)}
     </masked_view_1.default>);
 };

After updating the file, run the following command npx patch-package react-native-skeleton-placeholder // install patch-package if not installed Then install postinstall-postinstall and add "postinstall": "patch-package" to your package.json scripts.

[FawadAhmedRaza]

use expo-react-native-skeleton-placeholder it's work for me 100% similar to react-native-skeleton-placeholder and working in expo