Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

inputRange must be monotonically increasing #157

Closed
RWOverdijk opened this issue Mar 22, 2020 · 11 comments
Closed

inputRange must be monotonically increasing #157

RWOverdijk opened this issue Mar 22, 2020 · 11 comments
Labels
🚀 New feature New feature or request

Comments

@RWOverdijk
Copy link

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
Copy link
Author

@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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

@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
Copy link
Owner

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!

@jeremybarbet jeremybarbet added the 🚀 New feature New feature or request label Mar 25, 2020
@RWOverdijk
Copy link
Author

@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
Copy link
Owner

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!

giphy

@jeremybarbet jeremybarbet mentioned this issue Mar 27, 2020
10 tasks
@RWOverdijk
Copy link
Author

@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
Copy link
Owner

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
Copy link
Author

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

@jeremybarbet
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🚀 New feature New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants