¿Qué es Vue native? - Primeros Pasos

 Esta guía, te ofrece una introducción a Vue native, que recuerda que esta deprecated y por lo tanto, es netamente informativo.

¿Qué es Vue nativo? 

Vue Native es un framework que nos permite crear aplicaciones móviles nativas multiplataforma usando JavaScript y sus principales características podemos decir en 3 puntos

1. Bondad del ecosistema Vue
2. Construir para reaccionar de forma nativa
3. Reaccionar la integridad del ecosistema nativo

Crea aplicaciones nativas para Android e iOS usando React

Vue Native combina las mejores partes del desarrollo nativo utilizando elementos típicos de React Native; Vue Native utiliza el núcleo de esto para poder traducir todo nuestro código Vue a finalmente una aplicación nativa que se ejecuta en Android o iOS.

Escrito en JavaScript - renderizado con código nativo

Los elementos nativos se representan en la interfaz de usuario de la plataforma nativa, lo que significa que su aplicación utiliza las mismas API de la plataforma nativa.

Desarrollo nativo para todos

Con Vue Native podemos crear aplicaciones nativas para no deteriorar la experiencia del usuario con interfaces deficientes renderizadas con tecnologías web.

Proporciona un conjunto básico de componentes nativos independientes de la plataforma.

Cómo Ver, Texto e Imagen, que se asignan directamente a los componentes básicos de la interfaz de usuario nativa de la plataforma; Por tanto, podremos utilizarlos independientemente del sistema operativo para el que queramos crear la aplicación.

Los componentes de React Native (que Vue Native utiliza internamente) envuelven el código nativo existente e interactúan con las API nativas.

Actualización rápida/recarga en caliente

Vea sus cambios tan pronto como los guarde. Con el poder de JavaScript, Vue Native te permite iterar a la velocidad del rayo. Ya no tendrás que esperar a que finalicen las compilaciones nativas. Guarda, mira, repite.

Creando tus primera aplicación con Vue Native Router

Vamos a explicar cómo podemos crear el esquema de ruteo para nuestra aplicación en Vue Native; de tal manera, que esta es una característica indispensable para crear prácticamente cualquier tipo de aplicación ya que en la mayoría de los casos necesitamos navegar entre varias pantallas:

Y con este paquete, lo podemos lograr fácilmente.

Aquí lo primero que tienes que tener en cuenta, es que en Vue Native NO tenemos un main.js o index.js o en pocas palabras… 

El archivo que se encarga de crear la instancia de Vue y cargar componentes como hacíamos con Vue Router; aquí nuestro archivo de arranque viene siendo el llamado App.vue, por lo tanto aquí definimos nuestro esquema de navegación.

Siguiendo la documentación oficial, necesitamos instalar algunos paquetes de manera global, a mi en particular NO me funcionó la instalación global y también necesite algunos paquetes adicionales de react para que funcione correctamente, cosa que explicaba en otra entrada que mencionaba el error que me ocurría de Unable to resolve module 'react-native-screen'.

Así que, en mi proyecto:

npm install react-native-screens react-native-reanimated react-native-gesture-handler react-native-paper
npm install vue-native-router

Ya con esto, podemos crear nuestras páginas o screen para navegar: vamos a crear un par en una carpeta que vamos a llamar como screens:

screens/IndexScreen.vue:

<template>
    <view>
        <text>Index</text>
    </view>
</template>

screens/DetailScreen.vue: 

<template>
    <view>
        <text>Detail</text>
    </view>
</template>

Y lucen del a siguiente manera:

Y nuestro App.vue:

Aquí te dejo el proyecto completo de Ruteo en Vue Native:

<template>
  <app-navigator></app-navigator>
</template>
<script>
import {
  createAppContainer,
  createStackNavigator,
} from "vue-native-router";
import IndexScreen from "./screens/IndexScreen.vue";
import DetailScreen from "./screens/DetailScreen.vue";
const StackNavigator = createStackNavigator(
  {
    Index: IndexScreen,
    Detail: DetailScreen
  },
  {
    initialRouteName: 'Detail',
  }
);
const AppNavigator = createAppContainer(StackNavigator);
export default {
  components: { AppNavigator },
}
</script>

React native, empleado de manera interna por Vue native

Vue native interna emplea React native para cada uno de sus componentes, entre ella la navegación, que como puedes ver, se asemeja mucho a lo que hacemos con Vue Router, en el cual tenemos un componente para referenciar los componentes y sus rutas (StackNavigator) y otro para establecer a nivel de la app (createAppContainer), ambas funciones cargadas del paquete react-native.

 Estilo global en Vue Native y React Native

Si haz tomado mi curso sobre Vue Native, o haz desarrollado en esta plataforma o la de React, sabes que nosotros solamente podemos enlazar estilos mediante JavaScript y NO con CSS, en otras palabras NO podemos establecer CSS o una hoja de estilos.

Para nosotros, los desarrolladores esto es algo molesto ya que nos ENCANTA tener nuestra hoja de estilo para tener una estructura clara de nuestro sitio; es más NO podemos emplear tecnologías como Bootstrap o Tailwind CSS en React o Vue Native.

En esta publicación, abordaré el problema de implementar un estilo global en una aplicación React Native.

Aquí hay tres formas de aplicar un estilo global a una aplicación React Native o Vue:

Método 1: Componentes personalizados

Dado que tanto Vue cómo React se basan en componentes, la forma más intuitiva es crear componentes personalizados (por ejemplo, campos de texto personalizados, botones personalizados, etc.), definir los estilos dentro de cada componente y reutilizar estos componentes en toda la aplicación.

Por ejemplo, para usar un color de fuente específico en toda la aplicación:

import React from 'react';
import { Text, StyleSheet } from 'react-native';
const BlueText = props => {
 return(
   <Text style={{ ...styles.blueText, ...props.style }}>{props.children}</Text>
 );
};
const styles = StyleSheet.create({
 blueText: {
   color: 'blue'
 }
});
export default BlueText;

Método 2: hoja de estilo global

Podemos crear un archivo de ayuda GLOBAL a la app en donde definamos el estilo:

// https://github.com/libredesarrollo/vue-native-estilo-03/blob/main/helpers/style.js:
import { StyleSheet } from "react-native";
module.exports.style = StyleSheet.create({
   container: {
       width: "80%",
       padding: 10,
       borderWidth: 1,
       borderColor: "gray",
       borderRadius: 15,
       marginLeft: "auto",
       marginRight: "auto",
       marginTop: 15,
   },
   h1: {
       fontSize: 30,
       marginBottom: 10,
   },
   h1: {
       fontSize: 30,
       marginBottom: 10
   },
   h2: {
       fontSize: 25,
   },
   h3: {
       fontSize: 18,
   },
});

Metodo 3: Hoja de estilo global

Por supuesto, puedes combinar varios estilos para UN solo componente:

<text :style="[style.h1, , { backgroundColor: bg }, {borderColor:'yellow'}, {borderWidth: 10 }]">Index</text>

Con esto, nosotros podemos tener todo tipo de estilos y personalizar los mismos sutilmente de un componente a otro.

Extra: Estilo por componente en Vue Native

También podemos definir a nivel de componente, un estilo local al mismo:

<style>
.image {
 width: 100%;
 height: 200px;
 border-radius: 5px;
 margin-bottom: 10px;
}
</style>

Esto viene siendo lo clásico, si empleas Vue, los 3 elementos de template, script y style lo puede seguir empleando, la única diferencia es que el estilo es siempre LOCAL al componente.

Botones de tipo Flotantes FAB en Vue o Vue Native

Vamos a crear un botón de tipo flotante en Vue Native o Vue, los famosos botones llamados como Float Action Button por sus siglas en inglés FAB son unos componentes que forman parte del Material Design y que por supuesto, podemos replicar en nuestras aplicaciones; te muestro como puedes crear uno de manera básica:

Componente: HTML y JS

<template>
  <touchable-opacity :style="style.fab_extended_base" :on-press="callback">
    <text :style="{ color: '#FFF' }"> {{ label }} </text>
  </touchable-opacity>
</template>
<script>
import { style } from "../helpers/styles"
export default {
  data() {
    return {
      style
    }
  },
  props: {
    label: {
      type: String,
      requerid: true,
    },
    callback: {
      type: Function,
      requerid: true,
    },
  },
};
</script>

Como puedes ver, creamos un componentes, con cualquier nombre, y le asociamos unos props para personalizarlos; puedes pasarle tantos como necesites, por ejemplo, para variar el color, en este caso es para el callback o función que se ejecuta cuando le pegamos un clic (puedes emplear un evento también) y el label.

Es importante notar, que el código anterior lo puedes emplear perfectamente en un proyecto en Vue, claro que no existirá el touchable-opacity, pero en ese caso lo sustituyes por cualquier elemento HTML y el evento click.

Estilo

Para el estilo, lo puedes definir directamente en el componente o puedes colocarlo de manera global en un archivo de ayuda para que pueda ser usado en cualquier componente; estas son algunas de las formas que tenemos para definir los estilos:

helpers/style.js

import { StyleSheet } from "react-native"
module.exports.style = StyleSheet.create({
    h1: {
        fontSize: 30,
        marginBottom: 8,
        textAlign: 'center',
        color: "#70227E"
    },
    container: {
        marginTop: 5,
        marginLeft: "auto",
        marginRight: "auto",
        width: "90%",
        minHeight : "100%"
    },
    hr: {
        backgroundColor: "#8f04a8",
        width: "80%",
        height: 2,
        marginLeft: "auto",
        marginRight: "auto",
        marginBottom: 5,
    }
})

...Y con NativeBase

NativeBase es una libreria para dispositivos móviles componentes para React nativo y web que nos ayuda a construir una interfaz de usuario consistente en Android, iOS y Web.

También, existen paquetes que podemos emplear para usar este tipo de componentes, entre muchos, NativeBase, nos permite usar fácilmente este tipo de componentes, e inclusive definiéndolo de tipo extendido, para mostrar un árbol de botones de acciones:

<nb-fab
          :active="false"
          direction="up"
          position="bottomRight"
          :style="{ backgroundColor: 'green' }"
        >
          <nb-icon-nb name="close"></nb-icon-nb>
        </nb-fab>

Y extendido:

<nb-fab
          :active="false"
          direction="up"
          position="bottomRight"
          :style="{ backgroundColor: 'green' }"
        >
          <nb-icon-nb name="close"></nb-icon-nb>
          <nb-button :style="{ elevation: 500, backgroundColor: 'green' }">
            <nb-icon-nb name="logo-twitter"></nb-icon-nb>
          </nb-button>
          <nb-button :style="{ elevation: 500, backgroundColor: 'blue' }">
            <nb-icon-nb name="logo-facebook"></nb-icon-nb>
          </nb-button>
          <nb-button
            :on-press="
              () => {
                console.log('google');
              }
            "
            :style="{
              elevation: 500,
              backgroundColor: 'red',
            }"
          >
            <nb-icon-nb name="logo-google"></nb-icon-nb>
          </nb-button>
        </nb-fab>

Así que, ya con esto, conoces dos formas en las cuales puedes crear un botón de tipo flotante para tus apps en Vue Native, el cual es un componente de lo más flexible y adaptable que puedes usar en tus apps web y Android; ya que recuerda que no sería consistente emplear elementos del Material Design para tus apps en iOS.

Botones de tipo Flotantes FAB en Vue o Vue Native

Vamos a crear un botón de tipo flotante en Vue Native o Vue, los famosos botones llamados como Float Action Button por sus siglas en inglés FAB son unos componentes que forman parte del Material Design y que por supuesto, podemos replicar en nuestras aplicaciones; te muestro como puedes crear uno de manera básica:

Componente: HTML y JS

<template>
  <touchable-opacity :style="style.fab_extended_base" :on-press="callback">
    <text :style="{ color: '#FFF' }"> {{ label }} </text>
  </touchable-opacity>
</template>
<script>
import { style } from "../helpers/styles"
export default {
  data() {
    return {
      style
    }
  },
  props: {
    label: {
      type: String,
      requerid: true,
    },
    callback: {
      type: Function,
      requerid: true,
    },
  },
};
</script>

Como puedes ver, creamos un componentes, con cualquier nombre, y le asociamos unos props para personalizarlos; puedes pasarle tantos como necesites, por ejemplo, para variar el color, en este caso es para el callback o función que se ejecuta cuando le pegamos un clic (puedes emplear un evento también) y el label.

Es importante notar, que el código anterior lo puedes emplear perfectamente en un proyecto en Vue, claro que no existirá el touchable-opacity, pero en ese caso lo sustituyes por cualquier elemento HTML y el evento click.

Estilo

Para el estilo, lo puedes definir directamente en el componente o puedes colocarlo de manera global en un archivo de ayuda para que pueda ser usado en cualquier componente; estas son algunas de las formas que tenemos para definir los estilos:

helpers/style.js

import { StyleSheet } from "react-native"
module.exports.style = StyleSheet.create({
    h1: {
        fontSize: 30,
        marginBottom: 8,
        textAlign: 'center',
        color: "#70227E"
    },
    container: {
        marginTop: 5,
        marginLeft: "auto",
        marginRight: "auto",
        width: "90%",
        minHeight : "100%"
    },
    hr: {
        backgroundColor: "#8f04a8",
        width: "80%",
        height: 2,
        marginLeft: "auto",
        marginRight: "auto",
        marginBottom: 5,
    }
})

...Y con NativeBase

NativeBase es una librería para dispositivos móviles componentes para React nativo y web que nos ayuda a construir una interfaz de usuario consistente en Android, iOS y Web.

También, existen paquetes que podemos emplear para usar este tipo de componentes, entre muchos, NativeBase, nos permite usar fácilmente este tipo de componentes, e inclusive definiéndolo de tipo extendido, para mostrar un árbol de botones de acciones:

<nb-fab
          :active="false"
          direction="up"
          position="bottomRight"
          :style="{ backgroundColor: 'green' }"
        >
          <nb-icon-nb name="close"></nb-icon-nb>
        </nb-fab>

Y extendido:

<nb-fab
          :active="false"
          direction="up"
          position="bottomRight"
          :style="{ backgroundColor: 'green' }"
        >
          <nb-icon-nb name="close"></nb-icon-nb>
          <nb-button :style="{ elevation: 500, backgroundColor: 'green' }">
            <nb-icon-nb name="logo-twitter"></nb-icon-nb>
          </nb-button>
          <nb-button :style="{ elevation: 500, backgroundColor: 'blue' }">
            <nb-icon-nb name="logo-facebook"></nb-icon-nb>
          </nb-button>
          <nb-button
            :on-press="
              () => {
                console.log('google');
              }
            "
            :style="{
              elevation: 500,
              backgroundColor: 'red',
            }"
          >
            <nb-icon-nb name="logo-google"></nb-icon-nb>
          </nb-button>
        </nb-fab>

Así que, ya con esto, conoces dos formas en las cuales puedes crear un botón de tipo flotante para tus apps en Vue Native, el cual es un componente de lo más flexible y adaptable que puedes usar en tus apps web y Android; ya que recuerda que no sería consistente emplear elementos del Material Design para tus apps en iOS.

Creando un sencillo listado con opciones tipo CRUD en Vue Native

Vamos a aprender a generar un listado en Vue Native sencillo, en el cual vamos a usar dos componentes principales, el scrollview, para que nuestra pantalla permita esta funcionalidad, y la de un ítem, que en este ejemplo, viene siendo un view.

Es importante notar antes de comenzar, que NO necesitamos emplear ningún complemento, o plugin para hacer funcionar algún elemento adicional, solamente los componentes que tenemos de gratis en Vue Native.

Usaremos el componente del scrollview para colocar nuestros elementos de lista; este contenedor es excelente para colocar aquel contenido que puede que se le tenga que aplicar scroll para poder visualizarlo o puede que no; su estructura es simple, le definimos que ocupe el tamaño máximo:

<scroll-view :style="{ minHeight: '100%' }">

Y de una nuestros elementos o items que están comprendidos en un view con su texto y nuestras opciones tipo CRUD, la de eliminar y editar (por ejemplo):

     <view v-for="c in cites" v-bind:key="c.id">
       <text :style="{ fontSize: 18 }"> {{ c.name }} {{ c.surname }} </text>
       <view :style="{ flexDirection: 'row-reverse' }">
         <touchable-opacity :on-press="() => remove(c)">
           <text> Eliminar </text>
         </touchable-opacity>
         <touchable-opacity :on-press="() => edit(c)">
           <text> Editar </text>
         </touchable-opacity>
       </view>
     </view>

Aquí empleamos dos funciones al desencadenar el evento click o on-press de llamar a remover el ítem o editarlo.

Finalmente el código completo del template:

<template>
 <view class="container">
  <FlashMessage position="top" />
   <scroll-view :style="{ minHeight: '100%' }">
     <view v-for="c in cites" v-bind:key="c.id">
       <text :style="{ fontSize: 18 }"> {{ c.name }} {{ c.surname }} </text>
       <view :style="{ flexDirection: 'row-reverse' }">
         <touchable-opacity :on-press="() => remove(c)">
           <text> Eliminar </text>
         </touchable-opacity>
         <touchable-opacity :on-press="() => edit(c)">
           <text> Editar </text>
         </touchable-opacity>
       </view>
     </view>
   </scroll-view>
   <FABExtended
     :style="style.fab_dowm"
     label="Crear"
     :callback="() => navigation.navigate('Form')"
   />
 </view>
</template>

Y por supuesto, nuestro v-for, para iterar los elementos o items.

En cuanto al Script, lo típico, cargamos componentes, por ejemplo el del estilo mediante JavaScrip y el del botón de tipo flotante y las funciones tipo CRUD para eliminar y editar los registros, que permiten, eliminar un ítem bajo un diálogo de confirmación y mandar a otro componente para la edición, respectivamente:

<script>
import { Alert } from "react-native";
import FlashMessage from "react-native-flash-message";
import { showMessage } from "react-native-flash-message";
import {
 storeGetCites,
 storeSetCite,
 storeDeleteCite,
} from "../helpers/storage";
import { style } from "../helpers/styles";
import FABExtended from "../components/FABExtended";
export default {
 async mounted() {
   this.cites = await storeGetCites();
   // TEMPORAL
   if (this.cites.length == 0) {
     await storeSetCite({
       name: "Andres",
       surname: "Cruz",
       age: "30",
       description: "Hola Mundo",
       state: "Soltero",
       sex: true,
     });
     await storeSetCite({
       name: "Maria",
       surname: "Lopez",
       age: "22",
       description: "Hola Mundo 2",
       state: "Soltero",
       sex: false,
     });
     await storeSetCite({
       name: "Juan",
       surname: "Mendoza",
       age: "24",
       description: "Otro",
       state: "Soltero",
       sex: true,
     });
     this.cites = await storeGetCites();
   }
   // FINAL TEMP
   this.navigation.addListener("didFocus", async () => {
     //alert(this.navigation.state.params)
     // this.cites = []
     this.cites = await storeGetCites();
   });
 },
 data() {
   return {
     cites: [],
     style,
   };
 },
 components: {
   FABExtended,
   FlashMessage,
 },
 props: {
   navigation: {
     Object,
   },
 },
 methods: {
   edit(cite) {
     this.navigation.navigate("Form", cite);
     console.log(cite);
   },
   async remove(cite) {
     return Alert.alert(
       "Eliminar",
       "¿Seguro que desea eliminar la cita seleccionada?",
       [
         {
           text: "Si",
           onPress: async () => {
              await storeDeleteCite(cite);
             showMessage({
               message: "Cita eliminada exitosamente.",
               type: "danger",
             });
             this.cites = await storeGetCites();
           },
         },
         {
           text: "No"
         }
       ]
     );
   },
 },
};
</script>
<style>
.container {
 width: 90%;
 margin-top: 15px;
 margin-right: auto;
 margin-left: auto;
}
</style>

Aunado a lo anterior, tenemos un par de componentes más:

• El componente de Alert, para preguntar confirmación en la eliminación
• El componente llamado FlashMessage, que es un componente de un tercero y que por ende instalamos mediante Node de manera externa, y nos permite mostrar un mensaje tipo flash.

Botones responsive o adaptativos en Vue Native

En esta entrada quería hablarte sobre algunos temas interesantes que puedes aplicar para hacer elementos adaptativos o responsive, y es empleando ya sea clases o en este caso la directiva de style que ya vimos con anterioridad; para eso vamos a tomar como caso de estudio un elemento de Vue Native, pero que perfectamente puedes aplicar a Vue básico.

El elemento de Vue Native viene siendo el llamado touchable opacity, pero puede ser cualquier elemento que quieras hacer adaptativo que funcione para Vue básico.

Validar el props

Lo interesante, es que estamos aplicando una sencillas condiciones con un prop, para indicar si queremos que ocupe toda la pantalla o solo una sección:

 props: {
   type: {
     type: String,
     default: "sm",
     validator: function (value) {
       // El valor debe coincidir con una de estas cadenas de texto
       return ["sm", "normal", ].indexOf(value) !== -1;
     },
   },
 },

Es un props el que estamos empleando para indicar el tipo, colocamos modo sm (siguiendo un poco el panorama que nos ofrece frameworks como Bootstrap o Tailwind para indicar elementos pequeños que colocamos en pantallas reducidas -o no, todo depende de nuestro diseño-) o normal, para variar el estilo según alguna regla que queramos definir.

Aquí el props con valores fijos es fundamental ya que no queremos que nuestro usuario nos envíe cualquier cosa, sino valores específicos que nosotros podamos realizar comprobaciones y variar nuestro diseño a antojo.

Los condicionales, el factor clave

Como puedes suponer, el uso de los condicionales es el factor clave en todo esto para indicar cuándo quieres mostrar una opción a otra; supongamos que tienes tu interfaz costa de un menú lateral y un listado:

• Si la pantalla es pequeña (ej 640px o menos), el menú lateral está oculto.
• Si la pantalla es mayor a estas dimensiones, lo muestran junto al listado.

En nuestro caso, vamos un poco más atrás, y desde este componente, mediante un props, definimos que diseñó mostramos de los (por ejemplo) dos permitidos aqui (sm y normal) y verificamos mediante condiciones:

<template>
 <view :style="[type == 'sm' ? { alignSelf: 'center' } : {}]">
   <TouchableOpacity
     :style="[type == 'sm' ? { alignSelf: 'flex-start' } : {}]"
     :onPress="
       () => {
         console.log('Hola MUndo');
       }
     "
     class="buttonContainer"
   >
     <Text class="buttonText">asas sm</Text>
   </TouchableOpacity>
 </view>
</template>

Validar el props

Los props, podemos pasar tantos como necesitemos, en este caso como para el tipo, solamente vamos a aceptar que sean de dos tipos; y esto lo hacemos con el validator:

<script>
export default {
 props: {
   type: {
     type: String,
     default: "sm",
     validator: function (value) {
       // El valor debe coincidir con una de estas cadenas de texto
       return ["sm", "normal", ].indexOf(value) !== -1;
     },
   },
 },
};
</script>

Para los estilos, puedes adaptarlo como necesites para que tu diseño funcione como necesites: por ejemplo, para nuestro caso unos sencillos botones con estilos fijos.

Las variaciones las puedes hacer tanto a nivel de clases como a nivel del props de style:

<style scoped>
.buttonContainer {
 elevation: 8;
 background-color: blue;
 border-radius: 10;
 padding-vertical: 10;
 padding-horizontal: 12;
}
.buttonText {
 font-size: 18;
 color: #fff;
 color: #9105a7;
 letter-spacing: 1;
 font-weight: bold;
 align-self: center;
 text-transform: uppercase;
}
</style>
<ButtonModern  type="sm"/>

Si le pasas un valor al props que no corresponda, te dará el siguiente error:

<ButtonModern  type="otro"/>
[Vue warn]: Invalid prop: custom validator check failed for prop "type".
found in

Finalmente, nuestro botones quedas así; para este par de ejemplos:

<ButtonModern />
<ButtonModern type="normal" :style="{marginTop:15}"/>

Creando nuestra primera animación en Vue Native

Para entender las animaciones en Vue Native tenemos que tener clara algunas reglas:

1. Solamente podemos animar un componente, el llamado animated:view, no podemos animar botones, textos... y demás componentes de Vue Native o React Native, solamente el mencionado anteriormente.
2. Las animaciones en Vue Native siguen los mismos lineamientos que en React Native, y esto es lógico, ya que al emplear Vue Native internamente React Native, al final tenemos un uso muy similar.
3. Animamos propiedades, con sus valores, no componentes directamente, para animar por ejemplo un tamaño de un componente, tenemos que emplear una propiedad para variar valores numéricos, colores... entre otros aceptados, y son estos que se los establecemos a las componentes animables.
4. Las animaciones se realizan mediante una sencilla función en la cual especificamos los parámetros a animar, como la duración, propiedad a animar entre otras características:

timing(this.popiedadAAnimar, {
             toValue: 400,
             duration: 5000,
             easing: Easing.linear
             }

toValue: Nos permite indicar cual va a ser el valor que va a alcanzar la propiedad asignada a esta animación, el tope máximo o mínimo.
duration: indicamos la duración de la animación en milisegundos, en este caso 400 milésimas de segundo.
easing: Especificamos la curva de animación.

Y esto, se lo asignamos a un componente en nuestro template:

<animated:view
     class="estatica"
     :style="{
       height: popiedadAAnimar,
       width: popiedadAAnimar,
       borderRadius: popiedadAAnimar,
     }"
   />

popiedadAAnimar es la propiedad que vamos a animar:

 data() {
   return {
     popiedadAAnimar: 0,
   };
 },

La cual inicializamos:

this.popiedadAAnimar = new Animated.Value(10)

Viene siendo el equivalente de:

this.popiedadAAnimar =10

Pero con el new Animated.Value es el que tenemos que emplear para las animaciones.

Volviendo al inicio, tenemos la función clave en todo esto, que es la que nos permite a animar nuestro componente que luce como la siguiente:

crecerAnimacion: function () {
     Animated.timing(
       this.popiedadAAnimar,
       {
         toValue: 400,
         duration: 5000,
         easing: Easing.linear,
       },
       {
         toValue: 400,
         friction: 1,
       }
     ).start(() => {
       this.popiedadAAnimar = new Animated.Value(10);
       this.crecerAnimacion();
     });
   },

La función start se ejecuta al terminar la animación, es un callback, que podemos aprovechar para crear un ciclo infinito para las animaciones.

Código completo

El siguiente código forma parte de mi curso completo en Vue Native que puedes revisar desde la sección de cursos:

<template>
 <view class="center">
   <animated:view
     class="estatica"
     :style="{
       height: popiedadAAnimar,
       width: popiedadAAnimar,
       borderRadius: popiedadAAnimar,
     }"
   />
 </view>
</template>
<script>
import {Animated, Easing} from 'react-native'
export default {
 data() {
   return {
     popiedadAAnimar: 0,
   };
 },
 methods: {
     crecerAnimacion: function () {
     Animated.timing(
       this.popiedadAAnimar,
       {
         toValue: 400,
         duration: 5000,
         easing: Easing.linear,
       },
       {
         toValue: 400,
         friction: 1,
       }
     ).start(() => {
       this.popiedadAAnimar = new Animated.Value(10);
       this.crecerAnimacion();
     });
   },
 },
 created() {
     this.popiedadAAnimar = new Animated.Value(0)
 },
 mounted() {
     this.crecerAnimacion()
 },
};
</script>
<style>
.estatica {
 background-color: red;
 align-self: center;
}
.container {
 justify-content: center;
 flex: 1;
}
</style>

A la final, temeos algo como lo siguiente:

Por supuesto, hay muchísimo más que ver sobre las animaciones en Vue Native:

1. Interpolaciones
2. Curvas
3. Animar colores

Esto con mucho más, forma parte de mi curso completo de Vue Native; puedes encontrar más información tambien en la documentación oficial.
Puedes ver la introducción de la sección de mi curso en la cual tratamos las animaciones más en detalle:

Componente de imagen en Vue Native

El componente de imagen en Vue Native presenta las variantes que puedes esperar; puedes referenciar imágenes desde una URL:

<image class="image" :source="{uri:'https://cdn.pixabay.com/photo/2021/02/10/22/13/lake-6003727_960_720.jpg'}" />

Puedes especificar localmente en el proyecto:

<image :style="{width:200, height:150, marginTop:50}" :source="require('../assets/lake.webp')" />

Y puedes indicar estilos para personalizar su aspecto mediante CSS; ejemplo completo:

<template>
   <view class="container">
       <image class="image" :source="{uri:'https://cdn.pixabay.com/photo/2021/02/10/22/13/lake-6003727_960_720.jpg'}" />
       <image :style="{width:50, height:50}" :source="require('../assets/favicon.png')" />
       <image :style="{width:200, height:150, marginTop:50}" :source="require('../assets/lake.webp')" />
   </view>
</template>
<style>
.container {
   margin: 5px;
}
.image {
   width: 100%;
   height: 200px;
   margin-bottom: 10px;
   border-radius: 15px;
}
</style>

Este código forma parte de mi curso completo en Vue Native que puedes ver desde la sección de cursos:

https://github.com/libredesarrollo/vue-native-componentes-02/blob/main/components/ImageComponent.vue

No se puede resolver el módulo 'react-native-screen' en Vue Native

Un error que te puede ocurrir al momento de desarrollar tus aplicaciones en Vue Native e intentes trabajar con las rutas, puede ser que te de un error como el siguiente al momento de instalar vue-native-router o el esquema de rutas que nos ofrece Vue Native:

El error: Unable to resolve module 'react-native-screen'

Aunque en la documentación oficial nos indica que se debe de instalar algunos paquetes de react de manera global:

npm install -g react-native-reanimated react-native-gesture-handler react-native-paper

Puede que se requieran algunos adicionales: estos son los paquetes que instale para que funcione correctamente Vue Native Route:

npm install react-native-screens react-native-reanimated react-native-gesture-handler react-native-paper
npm install vue-native-router

Tal cual mencionamos en la entrada que creamos el esquema de Vue Native Router