CODEWITHSUNDEEP
navigationswipenativescript
Juan Acosta
Juan Acosta

Reputation: 303

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?

Upvotes: 2

Views: 3972

Answers (3)

Dev
Dev

Reputation: 441

Another method of doing swipe navigation in Nativescript 8.x (Svelte-Native) as follows:

<page backgroundColor="#FFFFFF">
    <actionBar title="Page Title" backgroundColor="#FFFFFF" />
    <stackLayout backgroundColor="#FFFFFF" on:swipe="{goToPage}">     
    </stackLayout>
</page>
<script lang="ts">
    import { NextPage } from "next-page.svelte";
    /*
     * Note that navigate function can be substituted with
     * core Nativescript navigation if working in Vanilla 
     * Nativescript contrary to the Svelte JS framework
     * (alias Svelte-native) leveraged here!!!
    ,*/
    import { navigate } from "svelte-native";
    import { Frame } from "@nativescript/core";

    function goToPage(args? : any)
    {
          if(args.type && args.type === "swipe"){
             switch(args.direction){
                 case 1:
                   Frame.goBack();
                 break;
                 case 2:
                   navigate({
                       page: NextPage,
                       transition: { name: "slide" }
                   });
                 break;
                 default:
                 break;
             }
          }
    }
</script>

Upvotes: 0

Nick Iliev
Nick Iliev

Reputation: 9670

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;

Upvotes: 5

Maka
Maka

Reputation: 653

This works for me

XML:

// XML
<ScrollView row="0" orientation="horizontal" swipe="onSwipe">
   .... content.... 
</ScrollView>

javascript: 

// javascript
function onSwipe(args) {    
var direction = args.direction;
console.log("Swipe Direction: " + direction); // 1 - left, 2 - right

if(direction === 1) {
    //topmost = require("ui/frame").topmost;
    frameModule.topmost().goBack(); // replace with func. below for navigation to other page
       // frameModule.topmost().navigate({
       // moduleName: "your/page"
       //   });

  }
}

This does not show any visual swipe actions (no animations etc.).

Upvotes: 0

Related Questions