Search code examples
navigationswipenativescript

How to implement navigation between pages using swipe gestures in Nativescript


I would like to implement navigation between pages much like is done with the TabView by swiping left or right. However, swipe gestures do not seem to be fired for the page level nor a Layout that spans the whole screen. The TabView itself is not useful since I have a large collection of items the user would be able to scroll through, and I don't need a bunch of tabs to be displayed on the screen.

Does anyone know how to implement this in Nativescript?


Solution

  • This is assuming that the layout element on the whole screen is a working option.

    For example:

    This is main-page.xml:

    <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:drawer="nativescript-telerik-ui/sidedrawer"  navigatingTo="navigatingTo" loaded="onLoaded">
        <StackLayout id="swipable">
            <Label text="Swipe to nabigate to next" textWrap="true" />  
        </StackLayout>
    </Page>
    

    This is main-page.js:

    var stackModule = require("ui/layouts/stack-layout");
    var gestures = require("ui/gestures");
    var frameModule = require("ui/frame");
    function onLoaded(args) {
        var page = args.object;
    
        var myStack = page.getViewById("swipable");
        myStack.on(gestures.GestureTypes.swipe, function (args) {
            frameModule.topmost().navigate({
                moduleName: "next-page"
            });
        });
    }
    exports.onLoaded = onLoaded;