NSMutableDictionary cannot be converted to a YGValue

reberthkss commented 3 years ago

Gathering the error below on trying the getting start example

system:

os: macOS Big Sur

package.json
{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@aws-sdk/client-eventbridge": "^3.17.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^6.0.0",
    "@react-navigation/bottom-tabs": "^6.0.0-next.3",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "@reduxjs/toolkit": "^1.5.1",
    "aws-amplify": "^3.4.0",
    "moment": "^2.29.1",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-fast-image": "^8.3.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.0.1",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.0.0",
    "react-native-shimmer-placeholder": "^2.0.7",
    "react-native-toast-message": "^1.4.9",
    "react-native-vector-icons": "^8.1.0",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.20",
    "@types/react-native": "^0.64.0",
    "@types/react-native-vector-icons": "^6.4.6",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

app.tsx
const CategoryProductsHorizontalList: React.FC<DepartmentProductsHorizontalListProps> = ({department}: DepartmentProductsHorizontalListProps) => {

    // Handle animation
    const avatarRef = React.createRef()
    const firstLineRef = React.createRef()
    const secondLineRef = React.createRef()
    const thirdLineRef = React.createRef()

    React.useEffect(() => {
        const facebookAnimated = Animated.stagger(
            400,
            [
                avatarRef.current.getAnimated(),
                Animated.parallel([
                    firstLineRef.current.getAnimated(),
                    secondLineRef.current.getAnimated(),
                    thirdLineRef.current.getAnimated()
                ])
            ]
        );
        Animated.loop(facebookAnimated).start();
    }, [])

    return (
        <View>
            <View style={{ flexDirection: "row" }}>
                <ShimmerPlaceholder
                    ref={avatarRef}
                    stopAutoRun
                />
                <View style={{ justifyContent: "space-between" }}>
                    <ShimmerPlaceholder
                        ref={firstLineRef}
                        stopAutoRun
                    />
                    <ShimmerPlaceholder
                        ref={secondLineRef}
                        stopAutoRun
                    />
                    <ShimmerPlaceholder
                        ref={thirdLineRef}
                        stopAutoRun
                    />
                </View>
            </View>
        </View>
    )
}

danielprimat commented 3 years ago

Hey @reberthkss ,

you need to use LinearGradient: e.g: import LinearGradient from 'react-native-linear-gradient'; <ShimmerPlaceHolder shimmerStyle={[{ borderRadius: 20,marginHorizontal: 16, marginBottom: 20, }]} height={104} width={104} LinearGradient={LinearGradient}>

tomzaku commented 3 years ago

Are u using expo? If not, please follow those code

import LinearGradient from 'react-native-linear-gradient';
import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'

const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient)

<ShimmerPlaceHolder />

or

import LinearGradient from 'react-native-linear-gradient';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'

...

<ShimmerPlaceHolder
  LinearGradient={LinearGradient}
/>

bpeck81 commented 1 year ago

This bug occurs with expo, and isn't resolved.

import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'
import LinearGradient from 'expo-linear-gradient';
const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient)

tomzaku / react-native-shimmer-placeholder

NSMutableDictionary cannot be converted to a YGValue #64