Fix for Expo

[YasserShkeir]

Hello all,

I implemented a fix that will allow you to develop in expo. Follow along:

Step 1:
Go to node_modules\react-native-skeleton-placeholder\lib\skeleton-placeholder.js

Step 2:
Replace the line that includes:
const react_native_linear_gradient_1 = __importDefault(require("expo-linear-gradient"));
With
const LinearGradient = require('expo-linear-gradient').LinearGradient;

Step 3:
animatedGradientStyle should become as below:

const animatedGradientStyle = React.useMemo(() => {
        const animationWidth = (layout?.width || 0) + (shimmerWidth !== null && shimmerWidth !== undefined ? shimmerWidth : 0);
        return {
          ...react_native_1.StyleSheet.absoluteFillObject,
          flexDirection: 'row',
          transform: [
            {
              translateX: animatedValueRef.current.interpolate({
                inputRange: [0, 1],
                outputRange: direction === 'right'
                  ? [-animationWidth, animationWidth]
                  : [animationWidth, -animationWidth],
              }),
            },
          ],
          width: animationWidth,
        };
    }, [direction, layout?.width, shimmerWidth]);

Step 4:
Replace react_native_linear_gradient_1.default inside the masked view with LinearGradient

And that's it! Please let me know if this helps 👍

[Alireza17224]

Thank you very much!

[MnariMohamed]

but is it a good idea to solve this by editing node modules ? because it means that wherever you install your application you have to modify this again

[Nahuel1440]

react-native-skeleton-placeholder+5.2.4.patch
You can do it automatically with patch-package https://www.npmjs.com/package/patch-package

[EddyTheDove]

You can build your own component to work with Expo in the meantime.
Copy the source file content into your own component: https://github.com/chramos/react-native-skeleton-placeholder/blob/master/src/skeleton-placeholder.tsx.

Replace import LinearGradient from 'react-native-linear-gradient';
with import {LinearGradient} from 'expo-linear-gradient';

Make sure you install expo-linear-gradient.
Rebuild your app.

This is a temporary workaround until a permanent fix is added.

Here's a gist of the solution https://gist.github.com/EddyTheDove/1e8a527ddf0f41dc240c41b72b2fdaae