# 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
```sh
npm install react-native-deuna-library
```
o
```sh
yarn add react-native-deuna-library
```
## Paquetes Adicionales
Para el uso de la librería es necesario instalar los siguientes paquetes:
```sh
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 ](https://www.npmjs.com/package/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``
```js
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`
```js
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.
```js
const PantallaInicial = () => {
return (
);
};
```
3. Añada los componentes de las propiedades que desea modificar de la siguiente manera:
```js
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.
```js
return (
);
```
5. Añadir estilos por default al container en caso de rendererizar componentes con Scroll se recomienda usar el componente ScrollView.
```js
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
```js
import {PantallaInicial} from './pantalla inicial'
```
```js
[
{
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
| Nombre |
Tipo de dato |
Opcional |
Valores Por defecto |
|
componente
|
datos |
X |
undefined |
### `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.
```js
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:
```js
```
### `Cuenta`
Componente que genera el módulo en donde se visualiza la cuenta del usuario para llamarlo se usa la siguiente estructura:
```js
```
Los parámetros que se se deben tomar en cuenta son:
| Propiedad | Descripción |
| ------------- | ------------- |
| typeAccount?: string; | tipo de cuenta |
| numberAccount?: string; | número de cuenta |
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:
```js
```
Como parámetros utiliza el color que permite modificar el color del componente loader.
```js
color?: string;
```
Como valores por defecto toma un número en hexadecimal que puede ser modificado: ``` color = '#00ff00' ```
### `Profile`
Profile |
Componente que genera un cuadro desde donde se puede añadir el perfil de usuario junto con la última conexión.
```JS
Profile name={'Jorge Balladares'}
```
Entre las propiedades que se debe de tomar en cuenta se encuentran las siguientes:
| Propiedad | Descripcion |
| ------------- | ------------- |
| name?: string; | Nombre del usuario |
| icon?: string; | icono que se representará |
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:
``` ```
`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. |
```js
SabiasQue numResult={2}
datos={aboutUs}
```
El archivo data es un JSON que debe tener la siguiente estructura:
```js
[
{
"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:
```js
[{
"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:
| Nombre |
Tipo de dato |
Opcional |
Valores Por defecto |
|
datos
|
datos |
✅ |
undefined |
|
title
|
string |
✅ |
Noticias y promociones |
## 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](https://www.npmjs.com/package/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
```js
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.
```js
PubSub.subscribe('confirmarTransaccion', function (msg: String, { name, otro }: props) {
Alert.alert("Transaccion Realizada Correctamene",
`Desde la cuenta ${name} de $${otro}`,
[
{ text: 'Aceptar' },
],
{ cancelable: false }
)
});
```