Learn NATIVESCRIPT with Real Code Examples

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="NativeScript Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Switch Theme" @tap="toggleTheme" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);

        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary { margin: 5px; }
    .btn-warning { margin: 10px 0; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Demonstrates a simple counter layout using NativeScript Vue components and Vue.js for interactivity.

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Step Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <TextField v-model.number="step" keyboardType="number" hint="Step" class="step-input" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const step = ref(1);
        const isDark = ref(false);

        const increment = () => count.value += step.value;
        const decrement = () => count.value -= step.value;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, step, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary { margin: 5px; }
    .step-input { margin: 5px; width: 100px; text-align: center; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter example with customizable step increment.

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Auto Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="Pause/Resume" @tap="toggleRunning" class="btn-warning" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isRunning = ref(true);
        const isDark = ref(false);

        let interval;
        onMounted(() => {
        interval = setInterval(() => { if(isRunning.value) count.value++; }, 1000);
        });
        onUnmounted(() => clearInterval(interval));

        const toggleRunning = () => isRunning.value = !isRunning.value;
        const reset = () => count.value = 0;
        const toggleTheme = () => isDark.value = !isDark.value;

        return { count, isRunning, toggleRunning, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-warning, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter automatically increments every second with pause/resume control.

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Dark Mode Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Switch Theme" @tap="toggleTheme" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);

        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #222; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary, .btn-warning { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Simple counter with dark/light theme toggle.

<template>
    <Page class="page">
        <ActionBar title="Multi Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <StackLayout v-for="(c, index) in counters" :key="index" class="counter-block">
        <Label :text="`Counter ${index+1}: ${c}`" class="counter-text" />
        <Button text="+" @tap="() => increment(index)" class="btn-primary" />
        </StackLayout>
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const counters = ref([0,0,0]);
        const increment = (i) => counters.value[i]++;
        return { counters, increment };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary { margin: 5px; }
    .counter-text { font-size: 20px; margin-bottom: 10px; }
</style>

Multiple independent counters in a single page.

<template>
    <Page class="page">
        <ActionBar title="Toggle Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Toggle Double: {{ double ? 'ON' : 'OFF' }}" @tap="toggleDouble" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const double = ref(false);
        const increment = () => count.value += double.value ? 2 : 1;
        const decrement = () => count.value -= double.value ? 2 : 1;
        const reset = () => count.value = 0;
        const toggleDouble = () => double.value = !double.value;
        return { count, double, increment, decrement, reset, toggleDouble };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary, .btn-warning { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter with toggle for double increment mode.

<template>
    <Page class="page">
        <ActionBar title="Countdown Timer" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Time: ${count}`" class="counter-text" />
        <Button text="Start" @tap="startCountdown" class="btn-primary" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(10);
        let timer;
        const startCountdown = () => {
        clearInterval(timer);
        timer = setInterval(() => { if(count.value > 0) count.value--; }, 1000);
        };
        const reset = () => { clearInterval(timer); count.value = 10; };
        return { count, startCountdown, reset };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Countdown counter starting from 10 to 0.

<template>
    <Page class="page">
        <ActionBar title="Counter Alert" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
import { alert } from '@nativescript/core/ui/dialogs';
export default {
    setup() {
        const count = ref(0);
        const increment = () => {
        count.value++;
        if(count.value === 10) alert('Count reached 10!');
        };
        const reset = () => count.value = 0;
        return { count, increment, reset };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter shows an alert when it reaches 10.