react-native-shadow-2: Bug: The argument must be a React element, but you passed null with & weird behavior in corners - newest version

Hey @SrBrahma, thank you for the update! I (perhaps) notices a bug though.

When I upgraded to the new Version I get the following error. Am I doing something wrong?

The argument must be a React element, but you passed null.

Here I have a small code example

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import {Shadow} from "react-native-shadow-2"

export default function App() {
  return (
    <Shadow
      distance={15}
      style={{width:50, height:50}}
      startColor={'#eb9066d8'}
      endColor={'#ff00ff10'}
      offset={[3, 4]}>
      <View
        style={{
          borderTopStartRadius: 24,
          borderBottomEndRadius: 0,
          borderRadius: 10,
          backgroundColor: '#c454f0dd',
        }}>
        <Text style={{ margin: 20, fontSize: 20 }}>🤯</Text>
      </View>
    </Shadow>
  );
}

You can find a snack of the bug here: https://snack.expo.dev/@expoco2/bug-in-react-native-shadow-2

If I delete width and height in style, I get the following error btw: undefined is not an object (evaluating 'd.width') Can you say something about that as well?

I am using the latest react-native version

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 17 (10 by maintainers)

Most upvoted comments

@alexco2 Many many thanks for both reports. Just published 7.0.4 with this fix.

This error was due to react-native-svg not allowing on Android

{!paintInside && <Stop offset={radius / shadowRadius} stopOpacity={0}/>}

inside the RadialGradient component. I changed it to

{!paintInside ? <Stop offset={radius / shadowRadius} stopOpacity={0}/> : <></>}

and it’s now working.

Please do report any further issues!

(and also, beware that running your example may not show the shadow as width: 50, height: 50 may be smaller than the child, being beneath it)

SrBrahma on Aug 14, 2022

Yup, having the same issue on Android, thanks for pointing it out. I will fix it asap.

SrBrahma on Aug 14, 2022

@alexco2, I have fixed the undefined is not an object (evaluating 'd.width') in the just published 7.0.3 (may take a while to be available on Snack). Also, that error didn’t happen on Snack here, only in my RN web sandbox local setup. The error was caused by StyleSheet.flatten(false) returning undefined, contrary to its type definition. Maybe the RN version that Expo 46 the Snack uses have this issue this fixed.

I couldn’t get the The argument must be a React element, but you passed null. error. After the above fix, the code you gave run well on RN web. Please, if you still have it after trying the 7.0.3, ensure that everything is alright in your test case and try to give me any further info that can help me to reproduce this issue.

And again, many thanks for the report!

SrBrahma on Aug 14, 2022

Many thanks for the report. I will fix this asap.

SrBrahma on Aug 14, 2022