It is a framework to develop android and ios applications in a more organized way with tabrisjs
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
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.
execute command
npm i voir-nativeIt 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.
addView function adds views to the CoordinatePage
| parameter types |
|---|
| ...Array<tabris.Action | tabris.Page> |
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 />);| parameter types |
|---|
| Array<MenuItemOption> |
interface MenuItemOption {
id: string;
text: string;
image?: string;
}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)
);displays as a popup element in the user interface
show popup message with duration time
| method | parameter types |
|---|---|
| constructor | string, number |
| static makeText | string, number |
| show |
import { Toast } from "voir-native";
Toast.makeText("hello", 2000).show();static methods: SHORT | MEDIUM | LONG
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 |
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();Add new preference data
| parameter types |
|---|
| string |
| any |
Recover the value of preference
| parameter types | return |
|---|---|
| string | any |
comprueba si existe la preferencia
| parameter types | return |
|---|---|
| string | boolean |
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 |
create preference page
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;
}| property | type |
|---|---|
| title | string |
| summary | string |
| onSelect | (event: any)=> any |
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" }]
})
)
);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" />);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
Go into the DrawerMenu component and define the id, text, image properties.
<DrawerMenu>
<DrawerMenuItem
text=""
image=""
id=""
/>
</DrawerMenu>Screenrecorder-2024-07-29-12-21-06-418.mp4
new features will be added little by little