Now it supports tabris 2.9 you can download the development apk here and for version 3.9 in the play store. go to documentation 2.9.x & 3.9.x

Documentation

• video example
• getting started
  • installation
• Voir
• helpers view
  • addView
  • setMenuDrawer
• popup
  • Toast
  • Modal
• helpers storage
  • setPreference
  • getValuePreference
  • existsKeyPreference
• components
  • PreferenceScreen
    • SwitchPreference
    • CheckBoxPreference
    • ListPreference
    • TextPreference
  • CoordinatePage
  • DrawerMenu
    • DrawerMenuItem

Getting Started

when installing voir-native installs with the dependency of tabrisjs you can go to the documentation of tabrisjs and see the entire list of widgets, services and more.

Installation

execute command

npm i voir-native

Voir

It is an object with 2 properties that helps render more friendly without invoking the addView function Voir.Render It is an abstract class that has to be inherited. It has as abstract methods the render that returns a page and the renderAction that returns an array action collection. Voir.factory It helps that the class is invoked as a function.

Helpers View

addView

addView function adds views to the CoordinatePage

| parameter types |:-- | ...Array<tabris.Action | tabris.Page>

example

import { addView, CoordinatePage } from "voir-native";
import { Action, Page, contentView } from "tabris";

contentView.append(<CoordinatePage layoutData="stretch" />);

addView(<Action title="setting" />, <Page title="setting" stretch />);

setMenuDrawer

| parameter types |:-- | Array<MenuItemOption>

interface MenuItemOption {
    id: string;
    text: string;
    image?: string;
}

example

import { setMenuDrawer } from "voir-native";
import { drawer } from "tabris";

drawer.enabled = true;

setMenuDrawer(
    [
        {
            text: "home",
            id: "home",
            image: "/images/home.png"
        },
        {
            text: "favorite",
            id: "favorite",
            image: "/images/favorite.png"
        },
        {
            text: "configure",
            id: "config",
            image: "/images/settings.png"
        }
    ],
    menu => console.log(menu)
);

popup

displays as a popup element in the user interface

Toast

show popup message with duration time

| method | parameter types | | ---------------- | --------------- | | constructor | string, number | | static makeText | string, number | | show | |

example

import { Toast } from "voir-native";

Toast.makeText("hello", 2000).show();

static methods: SHORT | MEDIUM | LONG

Modal

displays a popup that represents a view

| method | parameter types | return | | --------------- | --------------- | ---------------- | | addView | ...Widget[] | | setButtonCancel | string | tabris.Listeners | | setButtonAccept | string | tabris.Listeners | | remove | | removeView | | removeButtons | | show |

example

import { Modal } from "voir-native";
import {TextView} from "tabris";

const modal = new Modal();

modal.addView(
    <TextView text="this is my text" />
);

modal.setButtonCancel("cancel").addListener(() => {
    modal.remove();
});

modal.setButtonAccept("accept").addListener(() => {
    modal.remove();
});

modal.show();

helpers storage

setPreference

Add new preference data

| parameter types |:-- | string | any

getValuePreference

Recover the value of preference

| parameter types | return | | :-------------- | ------ | | string | any |

existsKeyPreference

comprueba si existe la preferencia

| parameter types | return | | :-------------- | ------- | | string | boolean |

Components

Preference

to add preferences where data can be saved in which the user preference persists

properties received by default to:

• ListPreference
• SwitchPreference
• CheckBoxPreference

| property | type | | -------- | --------------------------- | | title | string | | summary | string | | key | string | | value | string | boolean | number | | onSelect | (event: any)=> any |

PreferenceScreen

create preference page

ListPreference

create a modal displaying a view of options to select

received aditional property

| property | type | | -------- | -------- | | entries | IEntry[] |

interface IPropertyListPreference extends IPropertyChildPreference {
    entries: IEntry[];
}

interface IEntry {
    text: string;
    id: string;
}

TextPreference

| property | type | | -------- | ------------------ | | title | string | | summary | string | | onSelect | (event: any)=> any |

Example

import {
    PreferenceScreen,
    TextPreference,
    SwitchPreference,
    CheckBoxPreference,
    ListPreference
} from "voir-native";
import { contentView } from "tabris";

contentView.append(
    PreferenceScreen({
        layoutData: "stretch"
    }).append(
        TextPreference({
            title: "text info",
            summary: "summary"
        }),
        SwitchPreference({
            title: "title",
            summary: "summary",
            key: "keySwitch",
            value: true
        }),
        CheckBoxPreference({
            title: "title",
            summary: "summary",
            key: "cbPreference",
            value: false
        }),
        ListPreference({
            title: "my list preference",
            key: "list",
            value: 0, // default value select
            entries: [{ id: "myId", text: "item 1" }]
        })
    )
);

CoordinatePage

handles the elements of a current page

import { CoordinatePage } from "voir-native";

import { contentView, TextView } from "tabris";

const menuLeft = ()=> {
    return (
        <DrawerMenu>
            <DrawerMenuItem text="hola" id="oi" />
            <DrawerMenuItem text="77" id="re"/>
        </DrawerMenu>
    )
}

const menuItemSelected = (item) => {
    console.log('pressed id '+ item.id)
}

const drawerItemSelected = (item) => {
    console.log('pressed drawerItemSelected id '+ item.id)
}

contentView.append(
  CoordinatePage({
    layoutData: "stretch",
    drawerActionVisible: true,
    menuDrawer={menuLeft()}
    contentDrawer={<TextView text="content" />}
    onDrawerItemSelected={drawerItemSelected}
    onActionSelect={menuItemSelected}
  })
);

// or

contentView.append(<CoordinatePage layoutData="stretch" />);

DrawerMenu

It is a wrapper for DrawerMenuItem. Only works for JSX as it provides a more user-friendly way to create a menu. The drawermenu property is used in CoordinatePage

DrawerMenuItem

Go into the DrawerMenu component and define the id, text, image properties.

<DrawerMenu>
	<DrawerMenuItem
		text=""
		image=""
		id=""
	/>
</DrawerMenu>

Video Example

https://github.com/user-attachments/assets/91232486-11bb-4f71-a2dd-f0fd3be67bb2

new features will be added little by little