inputRange must be monotonically increasing

[RWOverdijk]

Is this compatible with react-native-web (with expo)?

import React from 'react'
import { Button, Icon, Layout } from '@ui-kitten/components'
import { Modalize } from 'react-native-modalize'

export class OrderOverview extends React.Component {
  modalRef = React.createRef()

  renderFooter() {
    return (
      <Layout style={{ width: 20, height: 20, backgroundColor: 'red'}} />
    )
  }

  render() {
    return (
      <Modalize ref={this.modalRef} FooterComponent={this.renderFooter()}>
        <Layout style={{ width: 100, height: 150, backgroundColor: 'green'}} />
      </Modalize>
    )
  }
}

Gets me this beauty:

invariant.js:40 Uncaught Invariant Violation: inputRange must be monotonically increasing -40,0,NaN
at invariant (http://192.168.2.157:19006/static/js/bundle.js:84887:15)
at checkValidInputRange (http://192.168.2.157:19006/static/js/bundle.js:198999:62)
at createInterpolation (http://192.168.2.157:19006/static/js/bundle.js:198847:3)
at new AnimatedInterpolation (http://192.168.2.157:19006/static/js/bundle.js:199017:28)
at AnimatedAddition.interpolate (http://192.168.2.157:19006/static/js/bundle.js:198562:12)
at Modalize.get (http://192.168.2.157:19006/static/js/bundle.js:181745:76)
at Modalize._this.renderModalize (http://192.168.2.157:19006/static/js/bundle.js:181602:59)
at Modalize.render (http://192.168.2.157:19006/static/js/bundle.js:181717:19)
at finishClassComponent (http://192.168.2.157:19006/static/js/bundle.js:127897:31)
at updateClassComponent (http://192.168.2.157:19006/static/js/bundle.js:127852:24)
at beginWork$1 (http://192.168.2.157:19006/static/js/bundle.js:129363:16)
at HTMLUnknownElement.callCallback (http://192.168.2.157:19006/static/js/bundle.js:111205:14)
at Object.invokeGuardedCallbackDev (http://192.168.2.157:19006/static/js/bundle.js:111255:16)
at invokeGuardedCallback (http://192.168.2.157:19006/static/js/bundle.js:111312:31)
at beginWork$$1 (http://192.168.2.157:19006/static/js/bundle.js:134075:7)
at performUnitOfWork (http://192.168.2.157:19006/static/js/bundle.js:133069:12)
at workLoopSync (http://192.168.2.157:19006/static/js/bundle.js:133043:22)
at renderRoot (http://192.168.2.157:19006/static/js/bundle.js:132736:11)
at runRootCallback (http://192.168.2.157:19006/static/js/bundle.js:132412:20)
at http://192.168.2.157:19006/static/js/bundle.js:122211:24
at unstable_runWithPriority (http://192.168.2.157:19006/static/js/bundle.js:211745:12)
at runWithPriority$2 (http://192.168.2.157:19006/static/js/bundle.js:122163:10)
at flushSyncCallbackQueueImpl (http://192.168.2.157:19006/static/js/bundle.js:122207:7)
at flushSyncCallbackQueue (http://192.168.2.157:19006/static/js/bundle.js:122196:3)
at batchedUpdates$1 (http://192.168.2.157:19006/static/js/bundle.js:132506:7)
at reactionScheduler (http://192.168.2.157:19006/static/js/bundle.js:103303:47)
at runReactions (http://192.168.2.157:19006/static/js/bundle.js:103279:5)
at endBatch (http://192.168.2.157:19006/static/js/bundle.js:102979:9)
at _endAction (http://192.168.2.157:19006/static/js/bundle.js:102365:5)
at executeAction (http://192.168.2.157:19006/static/js/bundle.js:102319:9)
at runInAction (http://192.168.2.157:19006/static/js/bundle.js:103454:12)

Never mind the silly content, it's just to test with. 😄

[RWOverdijk]

@jeremybarbet I've made it "not break" by adding || 0 after this.snapEnd (which is NaN). This isn't the solution but might help figure out what's broken here.

    get modalizeContent() {
        const { modalHeight } = this.state;
        const valueY = react_native_1.Animated.add(this.dragY, this.reverseBeginScrollY);
        return {
            height: modalHeight,
            maxHeight: this.initialComputedModalHeight,
            transform: [
                {
                    translateY: react_native_1.Animated.add(this.translateY, valueY).interpolate({
                        inputRange: [-40, 0, this.snapEnd || 0], // Added || 0
                        outputRange: [0, 0, this.snapEnd || 0], // Added || 0
                        extrapolate: 'clamp',
                    }),
                },
            ],
        };
    }

This brings another issue, which is that I can't drag the modal at all anymore, but I assume this is related.

[RWOverdijk]

Update 2: The issue is with the Platform.select in defaultProps:

  modalTopOffset: react_native_1.Platform.select({
        ios: 0,
        android: react_native_1.StatusBar.currentHeight || 0,
        default: 0 // <--- add this
    }), 

You need to add the default: 0 (because web is neither).

This doesn't solve all issues though, it's still not capturing the touch events properly.

If you "long press" and then move it follows, but then it doesn't stop the touch events and react-navigation also navigates back to the previous screen.

[jeremybarbet]

Hey!

I never used react-native-web, but I know react-native-gesture-handler merged some stuff related to that recently. So it should be possible to make it work.

I was looking for a codesandbox, but I haven't been able to find anything where I can play around, do you have your code somewhere that I could quickly look at?

I'm guessing your issue is related to these 3 lines, https://github.com/jeremybarbet/react-native-modalize/blob/master/src/index.tsx#L94-L96 maybe Dimensions are not returned the same way on react-native-web, or it's maybe something else than Dimensions.get('window') it's even though a 100% guess

[RWOverdijk]

@jeremybarbet G'day! I don't have a repo with this set up, but you could use https://github.com/RWOverdijk/nav-issue which I made to illustrate an issue with react-navigation.

Perhaps that is an easy way to get you up and running with the wonderful world of web? 😄 Honestly, I am surprised how well most things work.

[jeremybarbet]

Alright, I published a new rc that fixes the crash.

I've been able to have the swipe gesture working, but not the scrolling and there is some issue with the position of the modal when you pass modalHeight, modalTopOffset. I found a workaround by providing a marginTop in pixel rather than auto, but didn't push anything because I didn't test everything.

I would be really interested to have a full support for react-native-web now. You got me into this world. You can already run the expo example for web. If you want to dig more and try to fix issues that would be super dope!

[RWOverdijk]

@jeremybarbet That's a great start 😄

I'd love to, but I kind of sort of moved to a different solution because deadlines are a pita :(

Once I get the time to redo this stuff I could take a look but it might take a while.

[jeremybarbet]

Well I just realised, it's react-native-web, so you don't scroll by swiping up/down, but by using the wheel of your mouse and it works when you do so, ahaha

So basically, almost everything is working, except some edges cases, that I will try to fix when I find time!

[RWOverdijk]

@jeremybarbet Wait, but then why doesn't it work when emulating a mobile browser in chrome? Doesn't it translate touches properly?

I also couldn't get it running on a device for that matter.

Or is this after your fixes? In which case: haha 😆

[jeremybarbet]

Well, this is work-ish but very much broken.

I would need to dig more into react-native-web/react-native-gesture-handler to see how they create gestures events for the web

[RWOverdijk]

That makes sense. 😄 Honestly this is an exciting time to develop with react native. Covering all platforms like this is awesome...

[jeremybarbet]

Released in 2.0.0. I will close this issue, there is still some work to be done on RNGH to support all gestures.