question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

inputRange must be monotonically non-decreasing

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
MorganTrudeaucommented, May 19, 2022

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;
};
0reactions
afelicionicommented, Mar 29, 2022

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)

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native Snap Carousel: Invariant Violation - Stack Overflow
React Native Snap Carousel: Invariant Violation: inputRange must be monotonically increasing NaN,NaN,NaN · Ask Question. Asked 5 years ago.
Read more >
Lessons I learned from building my first application - Reddit
I tried using inputRange: [50, 0], and got a cryptic error inputRange must be monotonically non-decreasing 50,0 . to reset an animation, ...
Read more >
Build Speedometer with React Native Animation | by pallavi
The values in inputRange need not necessarily start at 0. ... as “Invariant Violation: Input Range must be monotonically non-decreasing” ...
Read more >
React Native 动画的interpolate 函数理解 - 掘金
... like String(myThing) */ 'inputRange must be monotonically non-decreasing ' + arr ); } } function checkInfiniteRange(name: string, ...
Read more >
使用React Native动画构建车速表_weixin_26638123的博客
Otherwise, you will get an error as “Invariant Violation: Input Range must be monotonically non-decreasing”. inputRange中的值始终按升序排列 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found