react-native-material-ui icon indicating copy to clipboard operation
react-native-material-ui copied to clipboard

ShadowRadius, content style, is NaN - Bug Reporting

Open zerobytes opened this issue 6 years ago • 3 comments

When using <ActionButton /> in anywhere it triggers an error regarding the style on content, which shows that shadowRadius style on content is set as NaN

image

react-native-material-ui ^1.30.1

zerobytes avatar Mar 05 '19 22:03 zerobytes

Manually setting shadowRadius takes the error off so until it's fixed you can define it manually

zerobytes avatar Mar 05 '19 22:03 zerobytes

For anyone else stumbling over this bug. Here's my workaround (I wrap "ActionButton" with a bug-fixing component.

import React from 'react';
import { ActionButton } from 'react-native-material-ui';

export const ActionButtonFixShadowRadiusNANBug = (props) => {

    let overriddenProps = props;

    if (typeof overriddenProps !== 'object') {
        overriddenProps = {};
    }
    if (!('style' in overriddenProps) || typeof overriddenProps.style !== 'object') {
        overriddenProps = {
            ...overriddenProps,
            style: {}
        };
    }

    if (!('container' in overriddenProps.style) || typeof overriddenProps.style.container !== 'object') {
        overriddenProps = {
            ...overriddenProps,
            style: { ...overriddenProps.style, container: {} }
        };
    }

    if (!('shadowRadius' in overriddenProps.style.container) || typeof overriddenProps.style.container.shadowRadius !== 'number') {
        overriddenProps = {
            ...overriddenProps,
            style: {
                ...overriddenProps.style,
                container: {
                    ...overriddenProps.style.container,
                    shadowRadius: 5
                }
            }
        };
    }

    return (<ActionButton {...overriddenProps} />);
}

I then import it with as import { ActionButtonFixShadowRadiusNANBug as ActionButton } from '../Components/ActionButtonFixShadowRadiusNANBug';

(in this example, I've saved the code in ../Components/ActionButtonFixShadowRadiusNANBug.ts

jav avatar Jan 05 '20 11:01 jav

For added searchability:

This was the error message I was recieving:

[25,"RCTView",21,{"height":56,"width":56,"borderRadius":28,"backgroundColor":4294198070,"shadowColor":4278190080,"shadowOpacity":0.3,"shadowRadius":"<<NaN>>","shadowOffset":{"height":1,"width":0},"zIndex":1}] is not usable as a native method argument

jav avatar Jan 05 '20 11:01 jav