Interfaz De Rappi en React Native

Enero 06 de 2020

Motivación

Todos conocemos la famosa aplicación de delivery Rappi, la cual, rápidamente ha tenido un crecimiento exponencial, siendo así uno de los unicornios más representativos de Colombia y dejando por detrás a sus competidores.

Por lo cual, me aventuré a recrear parte de la interfaz de esta aplicación y en este post te contaré un poco sobre las tecnologías y librerías que utilicé para su creación.

Tecnologías

El framework de desarrollo que utilicé fue React Native por su sencillez y gran documentación disponible.

Algunas de las librerías destacadas en este proyecto fueron:

  • react-native-snap-carousel : Usada para el desarrollo del Carrousel de productos, cuenta con amplias opciones de personalización, gran comunidad y buena documentación.

Ejemplo de uso:

<View>
  <Carousel
    data={PAGES}
    renderItem={this.renderPage}
    sliderWidth={width}
    itemWidth={width}
    onSnapToItem={index => this.setState({ activeIndex: index })}
  />
  <Pagination
    dotsLength={PAGES.length}
    activeDotIndex={activeIndex}
    inactiveDotOpacity={0.4}
    dotStyle={{
      width: 10,
      height: 10,
      borderRadius: 15,
      backgroundColor: '#aaa',
    }}
  />
</View>

carrusel en react nativeEjemplo de carrusel

  • styled-components : Permite escribir los estilos de la aplicación de una forma similar a CSS, siendo más amigable el desarrollo al utilizarla.

Ejemplo de uso:

import styled from 'styled-components/native';

export const MyContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  elevation: 3;
  border: 1px solid #eee;
  margin: 10px 10px;
  border-radius: 10px;
  background-color: #fff;
`;

Resultado final

  • Página de inicio

pagina de inicio de rappiPágina de inicio

  • Menú

menu de rappiMenú

Recursos adicionales

Esta publicación está acompañada por el siguiente video explicativo en YouTube, así que, si te interesa estar atento a todo el contenido nuevo suscríbete al canal.

Código

Todo el código de este proyecto lo puedes encontrar en GitHub aquí , espero que te sea útil y te pueda servir en tus futuros proyectos.

¡Nos vemos en una próxima!

Tipos de Datos en JavaScript