Shadows don't work

[ariel-bentu]

When using plane with transparent shadow material - when shadow is casted, the whole plane is shadowed

This is a regression, maybe in late versions of react-native.

Steps to reproduce (react-native "0.79.1"):

• create a new project: npx @react-native-community/cli init shadowBug
• edit the package.json and add:

  "react-native-filament": "^1.6.1",
   "react-native-worklets-core": "^1.5.0"

• overwrite the babel.config.js with:

module.exports = {
  plugins: [
    ["react-native-worklets-core/plugin", { processNestedWorklets: true }],
  ],
  presets: ['module:@react-native/babel-preset'],
};

• add at root of project file react-native-config.js with:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets'],
};

• edit metro.config.js and set config as follows:

const config = {
    resolver: {
        sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
        assetExts: ['glb', 'gltf', 'png', 'jpg', 'bin', 'obj', 'mtl', 'mp3', 'filamat'],
    }
};

• run npm install

• run (in ios) pod install

• open xcode .xcworkspace, and add: AVFoundation.framework and CoreMedia.framework
  (in Build Phases->Expand Link Binary With Libraries)

• replace App.tsx with the original code of CastShadow from react-native-filamen example

• modify it a bit:
  in line 17 and 18 with this:

  const TransparentShadowMaterial = require("./assets/transparent_shadow_material.filamat")
  const Coin = require('./assets/coin.glb')
  LogBox.ignoreLogs(["has already been"]);

• add LogBox to react-native imports

• change the function from CastShadow to App

• add "assets" folder and copy these two files into itassets:

  • https://github.com/margelo/react-native-filament/blob/0aa6ab7fa017f852c843a72059744eb6e1fc5875/package/example/Shared/assets/coin.glb
  • https://github.com/margelo/react-native-filament/blob/0aa6ab7fa017f852c843a72059744eb6e1fc5875/package/example/Shared/assets/transparent_shadow_material.filamat

• run the project