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>
Ejemplo 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
Página de inicio
- Menú
Menú
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!