0.0.3 • Published 4 years ago

llamytasonboarding v0.0.3

Weekly downloads
20
License
-
Repository
-
Last release
4 years ago

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

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;

View1

View2

View3

Documentation

Functions

NameDescriptionType
onPressFinalFinal Step Function (navigate To)Func
onPressDismissDissmiss Steps (Navigate Directly To)Func

OnBoarding Info

NameDescriptionType
titleDescribe screen Titlestring
textSecondary screen textstring
ImgImage Screenstring
colorFondoBackgroun color, Right button text color, left button Backgroun colorstring
textBotonPrevText for Left Buttonstring
textBotonNextText for Right Buttonstring
colorRight button bk color, left button border and text color, text and title colorstring
iconoNextMaterial Icons name for the iconstring
iconoPrevMaterial Icons name for the iconstring

Versioning

0.0.3

Authors

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