https://github.com/duducmt/react-native-pinterest

Recriação da tela principal do Pinterest usando React Native (Expo), Animação de Splash Screen, carregamento em Skeleton e Bottom Sheet a partir do Tab no novo Expo Router.
https://github.com/duducmt/react-native-pinterest

expo expo-router react-native reanimated typescript

Last synced: 19 days ago
JSON representation

Recriação da tela principal do Pinterest usando React Native (Expo), Animação de Splash Screen, carregamento em Skeleton e Bottom Sheet a partir do Tab no novo Expo Router.

• Host: GitHub
• URL: https://github.com/duducmt/react-native-pinterest
• Owner: duduCMT
• Created: 2024-09-02T15:58:16.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-04T16:24:23.000Z (4 months ago)
• Last Synced: 2024-11-03T07:40:28.863Z (2 months ago)
• Topics: expo, expo-router, react-native, reanimated, typescript
• Language: TypeScript
• Homepage:
• Size: 7.61 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![](.github/assets/images/logo.png)

# Pinterest UI (UI Clone) - React Native

[![](https://img.shields.io/badge/Status-Finalizado-blue)](#) 

[![](https://img.shields.io/badge/Version-1.0.0-yellow)](#)

## 📸 Preview 



  


    

  



## 📝 Descrição

Projeto simples para recriação da tela principal do Pinterest usando React Native (Expo), Animação de Splash Screen, carregamento em Skeleton e Bottom Sheet a partir do Tab no novo Expo Router.

## 🚀 Objetivo

Projeto para prática e aprendizado das libs do Expo mais recentes (2023 e 2024). A ideia é entender melhor os conceitos implementados recentemente como o Expo-Router. Também foi explorado alguns conceitos de animação usando Reanimated e Moti.

## 📚 Principais Libs Utilizadas

- [Expo Router](https://docs.expo.dev/router/introduction/)

- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)

- [React Native Bottom Sheet](https://ui.gorhom.dev/components/bottom-sheet/)

- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)

- [Moti](https://moti.fyi/)

## 🔎 Instruções para rodar o projeto

📌 **Pré requisitos:**

1. Tenha o repositório clonado em sua máquina.

2. Tenha o [NodeJS](https://nodejs.org/) instalado em sua máquina.

3. É importante configurar o seu próprio `.env` e `.env.local` baseando-se no `.env.exemple` presente no projeto (Caso tenha).

🚩 **Como Executar:**

1. Com o terminal aberto no diretório do projeto, execute o comando `npm i --force` para instalar as dependências.

2. Após a instalação, você deve rodar o projeto localmente usando o comando `npm start` e escolher as opções para execução a depender do ambiente. (Esse projeto também é compatível com o Expo Go.)

3. Caso queira executar o expo e limpar o cache, use `expo start -c` para executar e limpar o cache.

## 🗑️ Limpar Chache do EXPO - Windows

Em algumas situações, vai ser necessário limpar o cache do EXPO, para isso, execute os seguintes passos ou confira a [documentação oficial](https://docs.expo.dev/troubleshooting/clear-cache-windows/):

```bash

rm -rf node_modules // Ou apague a pasta manualmente

npm cache clean --force

npm install

watchman watch-del-all

del %localappdata%Temphaste-map-*

del %localappdata%Tempmetro-cache

npx expo start --clear

```

## 📸 Preview das Telas