# React Native: shadowGenerator not casting shadows

**URL:** <https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001>\
**Category:** Questions\
**Tags:** lighting, react-native\
**Created:** [April 24, 2024, 8:35pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001 "2024-04-24T20:35:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![carolx](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@carolx](https://forum.babylonjs.com/u/carolx)\
**Post date:** [April 24, 2024, 8:35pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/1 "2024-04-24T20:35:48Z")

</div>

I worked on a basic scene in the playground, and tried to replicate it in a React Native project. Here’s the PG: [https://playground.babylonjs.com/#20OAV9#14149](https://playground.babylonjs.com/#20OAV9#14149)

Problem 1:  
In React Native, the cube is rendered and the directional light applied to its faces, but it does not cast a shadow on the floor. I checked the shadowGenerator.getShadowMap().renderList and meshes were pushed. Any ideas what I can try?

Problem 2:  
Even in the web playground, if I uncomment line 27, `cube.receiveShadows = true` I get some artifacts in the cube’s material. Is it something wrong with how I set up the frustrum?

I’ve added the light gizmo to help understand what’s wrong but I don’t see the issue…  
Any help appreciated.

Edit: adding my package.json for reference

```auto
{
  "name": "BabylonJSTestProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@babylonjs/core": "^6.49.0",
    "@babylonjs/loaders": "^7.3.1",
    "@babylonjs/react-native": "^1.8.2",
    "@babylonjs/react-native-iosandroid-0-71": "^1.8.2",
    "@types/geojson": "^7946.0.14",
    "react": "18.2.0",
    "react-native": "0.73.7"
  },
  "overrides": {
    "@babylonjs/core": "^6.49.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

```

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 24, 2024, 10:52pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/2 "2024-04-24T22:52:03Z")

</div>

Cc @ryantrem

---

<div class="post-metadata">

**Author:** ![carolx](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@carolx](https://forum.babylonjs.com/u/carolx)\
**Post date:** [April 26, 2024, 4:45pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/3 "2024-04-26T16:45:00Z")

</div>

For Problem 1, removing these lines and adjusting lighting intensity to compensate allowed the shadows to appear on iPhone, though I’m still having problems in Android

```auto
dirLight.diffuse = new BABYLON.Color3(0.23,0.25,0.25);
dirLight.specular = new BABYLON.Color3(0, 0, 0);

```

Is there a way to determine from the documentation which features are available in React Native? It would be great to have maybe a flag indicating that in the docs.

---

<div class="post-metadata">

**Author:** ![ryantrem](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ryantrem/32/34010_2.png) [@ryantrem](https://forum.babylonjs.com/u/ryantrem)\
**Post date:** [April 29, 2024, 3:59pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/4 "2024-04-29T15:59:40Z")

</div>

I will take a look today and see if anything stands out.

> Is there a way to determine from the documentation which features are available in React Native? It would be great to have maybe a flag indicating that in the docs.

We try to keep a high level feature list up-to-date in the Babylon Native GitHub readme here: [BabylonJS/BabylonNative: Build cross-platform native applications with the power of the Babylon.js JavaScript framework (github.com)](https://github.com/babylonjs/babylonnative?tab=readme-ov-file#what-is-supported-from-babylonjs)

Flagging at the API level in the docs would be useful as well, but let me chat with some other folks and see if it would be practical.

---

<div class="post-metadata">

**Author:** ![ryantrem](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ryantrem/32/34010_2.png) [@ryantrem](https://forum.babylonjs.com/u/ryantrem)\
**Post date:** [April 29, 2024, 11:14pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/5 "2024-04-29T23:14:23Z")

</div>

@carolx I tried your playground with the Babylon Native test app on MacOS and iOS and see the same thing:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/f/0f11e3b510590309eb52fd5947cdd6cc45b5a5ad.jpeg)

Is this what you see? I haven’t tried it with Babylon React Native, but I would expect the behavior to be the same. That said, shadow support is not fully implemented in Babylon Native right now, so some behavior won’t yet be the same as Babylon.js in a browser.

@sebavan do you have any idea on the second problem described above?

> [https://playground.babylonjs.com/#20OAV9#14149](https://playground.babylonjs.com/#20OAV9#14149)  
> Even in the web playground, if I uncomment line 27, `cube.receiveShadows = true` I get some artifacts in the cube’s material. Is it something wrong with how I set up the frustrum?

I see the same thing (artifacts on the cube), and I would have thought that `receiveShadows` on the cube would not have any effect.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/2/92592e7aa87c9f161753086e027666281dd305ab.jpeg)

---

<div class="post-metadata">

**Author:** ![carolx](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@carolx](https://forum.babylonjs.com/u/carolx)\
**Post date:** [April 29, 2024, 11:44pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/6 "2024-04-29T23:44:05Z")

</div>

I was able to get the shadow on iOS, though they are not as soft as the playground test (possibly because of what you mentioned).

On Android, the same code does not show any shadow.

Could it be the package versions I’ve installed? I did have an issue with conflicting dependencies and had to manually override to 6.49.0 on package.json.

The artifacts when I turn on receiveShadows are still a mystery to me. It does seem to only happen with directional light after editing ortho options.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 2, 2024, 12:47am UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/7 "2024-05-02T00:47:53Z")

</div>

@ryantrem it looks like shadow acnea usually due to missing bias or because the depth buffer might have less precision in your case ?

---

<div class="post-metadata">

**Author:** ![carolx](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@carolx](https://forum.babylonjs.com/u/carolx)\
**Post date:** [May 10, 2024, 6:40pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/8 "2024-05-10T18:40:16Z")

</div>

Is it possible to achieve softer shadows in React Native? On the web playground I can soften them by manipulating the ortho values… But in React Native, the same values of ortho for the Directional light result in either hard or distorted shadows… I played with all settings in the [documentation](https://doc.babylonjs.com/features/featuresDeepDive/lights/shadows), none helped me achieve soft shadows…

---

<div class="post-metadata">

**Author:** ![ryantrem](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ryantrem/32/34010_2.png) [@ryantrem](https://forum.babylonjs.com/u/ryantrem)\
**Post date:** [May 10, 2024, 6:58pm UTC](https://forum.babylonjs.com/t/react-native-shadowgenerator-not-casting-shadows/50001/9 "2024-05-10T18:58:58Z")

</div>

I don’t think it is possible right now as shadows are not fully implemented in Babylon Native.