LlamytasOnBoarding

Disenio onBoarding para la materia de PDM

Prerequisites

Instalar las siguientes librerias:

npm install react-native-vector-icons

react-native link react-native-vector-icons

npm install react-native-elements

Installing

Dentro de un proyecto de React Native

Instalar la libreria

npm i llamytasonboarding

En caso de que los iconos no esten instalados de manera correcta

npx react-native link

Ejecutar el proyecto

npx react-native run-android

Icons

Se puede utilizar cualquier icono de la libreria de Vector Icons disponibles en https://materialdesignicons.com

Built With

• React Native - El framework
• MaterialIcons - Iconos

Example

import React from 'react';
import Onboarding from 'llamytasonboarding/src';
import Imagenes from './images'


const onPressFinal = () => {
  console.log("Funcion Final");
};


const onPressDismiss = () => {
  console.log("Dissmiss");
};


const data = [
  {
    title: 'Descubre lugares cerca',
    text: 'Tendras todo al alcance de tu mano',
    Img:Imagenes.IMG,
    color: '#fff',
    textoBotonPrev: 'Skip',
    textoBotonNext: 'Next',
    colorFondo: '#1196BA',
    iconoNext:'arrow-right',
    iconoPrev:'close-circle'

  },
  {
    title: 'Selecciona tu comida',
    text: 'Desde la comodidad de tu hogar',
    Img:Imagenes.IMG,
    color: '#1196BA',
    textoBotonPrev: 'Back',
    textoBotonNext: 'Next',
    colorFondo: '#fff',
    iconoNext:'arrow-right',
    iconoPrev:'arrow-left',

  },
  {
    title: 'Pide comida mas rapido',
    text: 'Desde la comodidad de tu hogar',
    Img:Imagenes.IMG,
    color: '#fff',
    textoBotonPrev: 'Back',
    textoBotonNext: 'Done',
    colorFondo: '#1196BA',
    iconoPrev:'arrow-left',
    iconoNext:'check'
  },

];


const App= () => {
  return (
    <>
      <Onboarding data={data} onPressFinal={onPressFinal} onPressDismiss={onPressDismiss} />
    </>
  );
};

export default App;

Documentation

Functions

| Name | Description | Type | | :---: | :---: | :---: | | onPressFinal | Final Step Function (navigate To) | Func | | onPressDismiss | Dissmiss Steps (Navigate Directly To) | Func |

OnBoarding Info

| Name | Description | Type | | :---: | :---: | :---: | | title | Describe screen Title | string | | text | Secondary screen text | string | | Img | Image Screen | string | | colorFondo | Backgroun color, Right button text color, left button Backgroun color | string | | textBotonPrev | Text for Left Button | string | | textBotonNext | Text for Right Button | string | | color | Right button bk color, left button border and text color, text and title color | string | | iconoNext | Material Icons name for the icon | string | | iconoPrev | Material Icons name for the icon | string |

Versioning

0.0.3

Authors

• Bernarda Serrano - Llamyta

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Hat tip to anyone whose code was used
• Inspiration
• etc