jlooper / nativescript-snacks

🍕 Short snippets and videos to help users learn NativeScript

NativeScript Snacks

The gh-pages branch of this repo hosts NativeScriptSnacks.com, a website with short, snack-sized video content that helps users learn more about Telerik NativeScript.

You can find video content and code snippets, sorted by Angular 2 vs. "Vanilla" NativeScript content type. Look for the Angular badge for content specific to Angular 2.

If you'd like to contribute content, please use the 'contribute' link on the site.

PRs to NativeScript Snacks are welcome!

nativescript-snacks's Issues

Update my NativeScript CLI installation

RadSideDrawer with angular 2

Would love to see a tutorial or code sample on how to use RadSideDrawer in NativeScript angular 2.

Thanks.

Navigate to route after push notification is received in main.ts

Can somebody help me navigate after push notification is received??
I get "cannot read property 'navigate' of undefined"

This code is inside main.ts and there is no class or constructor to initialize variables:
`
import { RouterExtensions } from "nativescript-angular/router";

let router: RouterExtensions;
setTimeout(() => {

let firebase = require("nativescript-plugin-firebase");  

firebase.init({ 
    onPushTokenReceivedCallback: function(token) {             
        deviceToken = token;  
        console.log("Firebase push token: " + token);  
    },  
    onMessageReceivedCallback: (message) => {  
       // let router: RouterExtensions; //tried initializing it here but didnt work also
        
        let link = JSON.stringify(message.website);
        router.navigate(["webViewPage"],{
       clearHistory:true,
       transition: {
        name: "slideTop",
        duration: 800,
        curve: "spring"
        },
        queryParams:{"url": link}, 
        animated: true
  
      });
        
    }

..........
`

Splash Screen tutorial

It would be great to see a tutorial on creating a splash screen with nativescript and angular

Using a native library by making a custom plugin

A nice tutorial on how to create a NativeScript plugin to use native libraries would be nice

Using the camera with preview functionality

I would like to see a tut on using the camera with a preview like the react-native module:

https://github.com/lwansbrough/react-native-camera

How to implement Google Places Autocomplete lookup with Typescript

Love to see how to implement Google Places API to do the Autocomplete lookup as the user types their address, using Typescript.

implement code-view by Nathan

because it's fantastic

Nativescript 3rd party libraries chart

right now im doing ERP project, so i need chart to give visual data to user, is it have any tutorial about how to use 3rd party chart plugin instead of chart from telerik

video on using 3rd party android libraries

I'd like to know how to built a custom camera app with a library like https://github.com/Glamdring/EasyCamera in Nativescript.

How do I create an Android Manifest.xml file and an Info.plist file in App_Resources so it isn't overwritten?

(very carefully)

Example with Geofire

An example that uses Geofire would be awesome!
https://github.com/firebase/geofire-js

Add custom component to AbsoluteLayout at runtime

How can I a custom component to a to an absolutelayout, maybe by take event or by timer.

child component html

<StackLayout #bubble width="50" height="50" backgroundColor="red">
    <Label text="Hello" textWrap="true"></Label>
</StackLayout>

parent component

var childComponent = new ChildComponent();
myAbsoluteLayout.addChild(childComponent);

Nativescript Slider

Hi,

Could you do a tutorial on creating a Nativescript Slider in XML and capturing its value in Typescript? Also if possible to display the value of the Slider as you move it would be great. Thanks.

Timeline list

Something like this:

Push Notifications using nativescript-push-notifications

Hi, can someone post a Push notification app using nativescript-push-notifications, which is capable of receiving notification even when the app is stopped or suspended (All other case when the app is not is running state).

A video player example with TS-NG2

It will be great to have a video player example with TS-NG2. I see there is nativescript-videoplayer, but the example there is not with TS-NG2.

Multi Ask

Hello,
I'd like if you will help me in some issues:

1. How to send sms without an app messenger
2. How to login with google or Facebook accounts
3. How to implement payment with google play pay or apple payment or PayPal, with authority check.

Thanks and I hope it will help to many others,
Yuval Aharoni

how to unit test

Searchbar Example in typescript

i am new and on the docs there is no example on how to implement search function any help

Nativescript ng modal

I would like to see a simple barebone modal done using nativescrit ng. I tried implementing the modal here https://github.com/NativeScript/nativescript-sdk-examples-ng/tree/master/app/modal-page but got many errors when I tried implementing with my project.

How do I perform a fresh install on Windows - using the new installer scripts

video on debugging apps using vs code

Load a Tabs view after Login Page

needs a example of loading tabs view after login page or welcome. thanks

Markdown Rendering in NativeScript-Vue

Hey guys, I'm new to {N}-Vue, and now I have some question to ask

I tried using WebView to render a Markdown Content in {N}
But now, I would like to try another way to turn the Markdown Content into Native XML, and assign it into a variable, does anyone know how to implement it?

I tried the code below and it doesn't work

drag and drop between 2 listview

I would be very happy in viewing a tutorial showing how to perform drag and drop items between two listtview on the same screen.
I did not succeed, nor with Pan Gesture and classic Listview, nor with RadListview.

Stephane

what are the best ways to make one-to-one chat UI

support connect no sql database (mongodb, orientdb...)

building notification system like facebook

am building nativescript angular social app so requires users adding other users and commenting on posts and sending messages etc
so i want to notify the user if any of this actions took place
need help asap

nativescript-cardio-reader

Hi.... I want add nativescript-cardio-reader plugin in my NativeScript angular App...
i unable to get the scanned data... Plz.. share ur experience to get the solutin...
this is the plugin url https://market.nativescript.org/plugins/nativescript-cardio-reader

Maps integration

There are multiple solutions for using maps in NativeScript application (nativescript-googlemaps, dapriett google maps sdk plugin and mapbox)
I would like to see a demo where one of these solutions is shown with these features:

• getting tapped location
• adding multiple markers
• dragging markers
• typing in address and have that location shown selected on the map

Snippets: improve mobile

A few minor adjustments to CSS needed to improve accessibility on a couple mobile devices.

Some app with calculation

I see is lack of examples in how to work with calculations, like a simple calculator or a split calc. Hope can make one.
Thanks Iñaki

Todo App Tutorial

Many developers find it easy to get started with new thing by learning how to create todo app.

It will be great if this is added, this should bring more developers joining in nativescript because currently no such simple yet complete tutorial is found.

Thanks

Complex Navigation - Navigation Best Practices

Hey,

I am trying to navigate correcly im my app, but for me there is a lot of things that is hard to understand what is the right way to do that.

for example route from page1 to page2, and then from page2 to page3 and then from page3 to page4 and then from page4 to page2 but make sure that page3 and page4 will be removed from the history.

again this is the scenario:
page1 -> page2
page2 -> page3
page3 -> page4
page4 -> page2

and in the end of this scenario that history will be page1/page2

What I am asking is what is the right way to do that? with or ? with childern? with Angular Route or with RouterExtension?

If there is a good tutorial that you familiar with I would be happy to get it. :)

Thank you very much,
Bar.

Less Angular

Most of the articles are based on Angular while less and less developers are using it. Please focus on plain javascript as it won't become outdated and unusable where as Angular is well on it's way there now.

ipad style popover

i would be very happy to see a tutorial on displaying a popover for a dropdown menu as shown in the image below.

Thanks in advance.

make video titles clickable throughout

so you can visit a video's page

Sidemenu startup template like ionic 2

if the nativescript can try to simply stuff a little more like the way ionic do it would help us a lot of beginners like me please guys startup templates tabs , blank and side menu to make it easy to learn

[HELP!] A Custom FAB Button by Carlos Cabral

Playground Example

This is a very good example, does anyone know how to make the FabItem tapped?
Thank you!

embedded lightweight web server httpd

I want to integrate a simple http server in nativescript, which works on both iOS and Android. Kindly make a tutorial for that.

images zoom

Playing around nested containers

I would love to see something similar to theses pages running nto nativescript, using ng2 et typescript.

http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested
or
https://www.npmjs.com/package/ng2-drag-drop

Stephane