Enable swiping between major tabs

[spinks]

As per the request of an important end user.

Maybe this? https://www.npmjs.com/package/react-easy-swipe or this? https://github.com/dogfessional/react-swipeable

import { useSwipeable } from 'react-swipeable';

above works to catch swipe motions on pages, but then it is difficult to get the right page animations

[spinks]

Using react swipable

import { useSwipeable } from 'react-swipeable';

const handlers = useSwipeable({ onSwiped: (eventData) => eventHandler, ...config })
return (<div {...handlers}> Swipe section </div>)

Then I have tried using

history.push('/food')
// and so on as the event handlers

However the page transition animations are incorrect when swiping left (as pages by default come in from the right)

Maybe using conditional divs such as

{swipeLeft && <Redirect to='/food' />}

with a state component for the swipeLeft

const [swipeLeft, setSwipeLeft] = useState(false)
// with the onSwiped handlers changing the state of these
const handlers = useSwipeable({ onSwiped: () => setSwipeLeft(true) })
// and then wrap the whole content in the handlers
return (<IonContent {...handlers}> Swipe section </IonContent >)

[alasdair-cooper]

I have committed some Android only stuff, but there is a bug where when you tap one of the icons on the bottom of the screen, they stay highlighted when you swipe. It's the same problem with history.replace() and history.push(). Is there code that changes the highlighted icon, or is it built in as a function of tabs?

[spinks]

I couldn't say, I guess its a router behaviour thing. Unless you can get it fixed within the next day will probably leave this out

[alasdair-cooper]

I honestly have no clue what I am doing, so I think I'm going to have to leave this, sorry.