inputRange must be monotonically non-decreasing

[scarlac]

trafficstars

Describe the bug Crash due to interpolation range

Reproduce I don't have a specific step to reproduce.

Dependencies:

• react-native-modalize [2.0.6]
• react-native [0.64.3]

The following appears in crash logs in production versions of my app: Fatal Exception: RCTFatalException: Unhandled JS Exception: Invariant Violation: inputRange must be monotonically non-decreasing -40,0,-120 and This error is located at: in ModalizeBase in RCTView in Unknown in Unknown in Unknown in EnsureSingleNavigato[...]

Note the values: -40, 0, -120 (where -120 is the problem). They seem to match the following code on line 933:

// ...
            translateY: value.interpolate({
              inputRange: [-40, 0, endHeight],
              outputRange: [0, 0, endHeight],
              extrapolate: 'clamp',
            }),
// ...

I suspect the endHeight calculation may sometimes go beyond what's expected. Perhaps a simple Math.max(0, endHeight) is sufficient to fix this?

[andreygamb]

same issue

[ChoiHyeongu]

same issue

[lurui1029]

same here

[afelicioni]

I can witness facing the same problem (by having checked the [-40, 0, endHeight] pattern for inputRange; since I can only see as recorded crash events, not able to tell steps to reproduce issue. My thinking is that a race condition or similar can happen. Anyway not sure about a decisive improvement, probably also move to useWindowDimensions hook usage could be part of solution (as moving up in code, Dimensions.get('window').height is part of calculated endHeight value)

[MorganTrudeau]

Looks like useDimensions listener returns height and width equal to 0 sometimes. I changed to this and it prevents the crash.

// lib/utils/use-dimensions.js 

exports.useDimensions = () => {
    const [dimensions, setDimensions] = React.useState(react_native_1.Dimensions.get('window'));
    const onChange = ({ window }) => {
        console.log("HEIGHTS onchange", window)
        if(window && window.height && window.width) {
            setDimensions(window);
        }
    };
    React.useEffect(() => {
        react_native_1.Dimensions.addEventListener('change', onChange);
        return () => react_native_1.Dimensions.removeEventListener('change', onChange);
    }, []);
    return dimensions;
};