react-native-deuna-library v0.9.24

React De Una Library

Librería de componentes de react native para elaborar un aplicativo con temática de De Una (Plataforma para realizar pagos y transacciones dentro del Banco de Pichincha)

Compatibilidad

• React Native Para la instalación es necesario importar la libreria.

Expo

✅ Puede usar esta biblioteca con Compilaciones de desarrollo. No se requiere ningún complemento de configuración.

❌ Esta biblioteca no se puede usar en la aplicación "Expo Go" porque requiere un código nativo personalizado.

Arquitectura

En el diagrama de arquitectura podemos visualizar que la aplicación hace uso de datos externos como lo es el consumo de los mismos través de APIs generadas por NodeJS y usando PostgreSQL como gestor de base de datos. NPM se instala en una aplicación de React Native desde la cual tambien recopila información del usuario necesaria para el proceso de transacciones que se maneja internamente como lo es la información de los contactos del teléfono. Finalmente con toda la información que obtiene la librería se libera interfaces englobadas en componentes personalizables.

Screenshots

Instalación

npm install react-native-deuna-library

o

yarn add react-native-deuna-library

Paquetes Adicionales

Para el uso de la librería es necesario instalar los siguientes paquetes:

npm install @react-native-community/masked-view
npm install @react-navigation/native
npm install react-native-contacts
npm install react-native-gesture-handler
npm install react-native-reanimated
npm install react-native-safe-area-context
npm install react-native-screens
npm install react-native-camare

Iconos

Para utilizar componentes que contengan íconos es necesario instalar la siguiente dependencia npm install react-native-vector-icons y configurar la libreria conforme a la documentacion de React Native Vector Icons

Importante

Para el uso de la libreria react-native-camera es necesario hacer los siguientes cambios en

node_modules/react-native-camera/src/RNCamera.js: par ello es necesario instalar la siguiente dependencia

npm install deprecated-react-native-prop-types o yarn add deprecated-react-native-prop-types

Es necesario elimianr el Viewproptype 
import {
 findNodeHandle,
 Platform,
 NativeModules,
 ViewPropTypes,
 requireNativeComponent,
 View,
 ActivityIndicator,
 } from 'react-native';

import { ViewPropTypes } from "deprecated-react-native-prop-types";

Para que los cambios se mantengan es importante instalar la libreria

npm install path-package

Despues se debe anadir el siguiente fragmento modificaciones en el package.json "postinstall": "patch-package" y ejecutar

con ello puede realizar un npm isntall o un yarn ylos cambios se van a mantener

Uso

Importe De Una Library y use cada componente como un fragmento independiente en su aplicación. Para usar los componetes siga los siguientes pasos:

1. Importar los componentes que requiere en su aplicación a traves de react-native-deuna-library

import {
  DeUnaNavigate, Cuenta
} from 'react-native-deuna-library';

2. Colocar los componentes dentro de su aplicación de React Native y las propiedades que se desea modificar de los mismos.

const PantallaInicial = () => {
  return (
    <ScrollView style={styles.container}>
      <Cuenta />
    </ScrollView>
  );
};

3. Añada los componentes de las propiedades que desea modificar de la siguiente manera:

const propiedad = [
    {
      name: 'PantallaInicial',
      component: PantallaInicial,
      icono: { name: 'home', label: 'home' },
    },
    {
      name: 'ContactosPagar',
      component: ContactosPagar,
      icono: { name: 'rocket', label: 'Pagos' },
    },
    {
      name: 'Profile',
      component: Profile,
      icono: { name: 'home', label: 'Profile' },
    },
  ];

4. Añadir los componentes a usar al componente DeUnaNavigate dentro de la funcion en la que renderizará los componentes.

  return (
    <View style={styles.container}>
      <DeUnaNavigate componentes={propiedad} />
    </View>
  );

5. Añadir estilos por default al container en caso de rendererizar componentes con Scroll se recomienda usar el componente ScrollView.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: '100%',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

6. Y finalmente puede visualizar los componentes dentro de su aplicación.

Componentes y Propiedades

TabNavigation

Permite al usuario renderizar tabsbutton permitiendo anadir componentes a la aplicacion a desarrollar dependendiendo de las necesidades del desarrollador.

Para renderizar la aplicación es necesario anadir datos del tipo componentes de la siguiente manera:

Importar el componente

import {PantallaInicial} from './pantalla inicial'

[
    {
      name: 'PantallaInicial',
      component: PantallaInicial,
      icono: { name: 'home', label: 'home' },
    }
]

Se puede observar los siguientes propiedades

name:Nombre de la ruta del componente a incrustar

componente:Componente que desea anadir a la aplicación

icono:Objeto que permite a;adir un icono a las tabs button

ContactosPagar

Permite obtener una lista de contactos que se encuentra en el dispositivo movil permitiendo bindear las personas que se encuentran registradas en el backend de el aplicativo de De Una.

Para poder usar esta libreria es necesario instalar la libreria npm de la siguiente manera.

yarn add react-native-contacts

Para poder usar la librería es necesario tener activos los permisos de la aplicación es importante que en la ruta android/src/AndroidManifiest.xml . se tenga los siguientes permisos:

<uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />

Cuenta

Componente que genera el módulo en donde se visualiza la cuenta del usuario para llamarlo se usa la siguiente estructura:

<Cuenta/>

Los parámetros que se se deben tomar en cuenta son:

Como valores por defecto el número de cuenta y de ammount aparecen en verdadero.

Loader

Componente que genera el componente del loader para llamarlo se lo hace de la siguiente manera:

<loader />

Como parámetros utiliza el color que permite modificar el color del componente loader.

color?: string;

Como valores por defecto toma un número en hexadecimal que puede ser modificado: color = '#00ff00'

Profile

Profile name={'Jorge Balladares'}

Entre las propiedades que se debe de tomar en cuenta se encuentran las siguientes:

Como valores por defecto toma el nombre como: User Default y el ícono de User de los íconos de Font Awesome.

Sabías Que

Componente que genera un slider horizontal con cards se llama de la siguiente manera:

<SabiasQue numResult={2} datos={aboutUs} />

numResult Representa el número de resultados que se visualiza en las cards

datos Representa un JSON con el contenido de las cards que se van a visualizar.

Como valores por defecto toma como número de resultados y los datos que tendran las cards por medio de un archivo JSON.

SabiasQue numResult={2} 
datos={aboutUs}

El archivo data es un JSON que debe tener la siguiente estructura:

[
 {
   "text": "Se puede hacer transacciones desde 0.01$",
   "key": 1,
   "background": "white",
   "datos": [
     {
       "title": "No cuesta nada",
       "text": "Los pagos del banco pichincha no tiene costo"
     },
     {
       "title": "No cuesta nada",
       "text": "Los pagos del banco pichincha no tiene costo"
     }
   ]
]

En el ejemplo de la parte de arriba se tienen parámetros que representan lo siguiente:

text: Informacion de la card

key: Informacion de la clave de la card

background: Informacion del color

datos: Array que contiene los datos que contiene la card. Dentro de esta se observa el título y la descripcion de la card.

Como valores por defecto unicamente toma el background de color white para el resto de valores se debe mandar un JSON con las propiedades descritas anteriormente.

Sectioncard

Permite agregar componetes cards de novedades y noticias a su proyecto en react native Para poder usar este componente es necesario agregar datos que se ejemplifican a continuación:

[{
    "titulo": "Banco Pichincha te Premia",
    "descripcion":"Con el ahorro de mas de 1000$ puedes obtener  duplicacion en tu saldo ",
    "imagen":"https://www.pichincha.com/portal/portals/0/Landings/AhorroMundialista/ImagenGanadores.png?ver=qYxFKkRP_kSdeJ92BQyt2A%3D%3D"
    
},
]

Se puede observar los siguientes campos:

titulo:Titulo de la card a agregar

nombre:Nombre de la card a agregar

imagen:URL de la imagen que necesita agregar a la card.

A continuación se describe las propiedades:

Acceso a eventos

Se va poder realizar una suscripcion a eventos que pasan dentro de la aplicación al usar el patrón Publicador - Suscriptor. Para este aplicativo se ha hecho uso de la librería PubSub-js

Para acceder a los eventos a travez de yarn o npm se debe descargar las siguientes dependencias dentro del proyecto:

yarn add pubsub-js

Luego se realiza la importación desde el componente de donde se va a llamar el evento:

import PubSub from 'pubsub-js'

Para llamarlo se lo realiza a traves de la función de PubSub.suscribe('nombre del evento a suscribir', data) aqui un breve ejemplo

  PubSub.subscribe('listener', function (msg: String ) {
   Alert.alert(msg);
 });

A traves de esta funcion nos estamos suscribiendo al evento listener que manda como data un mensaje al cual podemos acceder desde nuestra aplicación. j

Entre los eventos a los cuales se puede suscribir en la aplicación estan:

Confirmar Transaccion

Al confirmar una transaccion se puede suscribir al evento "confirmar transaccion" y acceder a la información del nombre del nombre de a quien se le hizo la transferencia y el monto.

  PubSub.subscribe('confirmarTransaccion', function (msg: String, { name, otro }: props) {

    Alert.alert("Transaccion Realizada Correctamene",
      `Desde la cuenta ${name} de $${otro}`,
      [
        { text: 'Aceptar' },
      ],
      { cancelable: false }
    )
  });