From bdab98bd9edec0be665f26c014247cacbd10d1b8 Mon Sep 17 00:00:00 2001 From: TRProjects98 Date: Sat, 28 Dec 2024 15:47:47 +0000 Subject: [PATCH 1/2] Welcome page with carroussel --- assets/Swipe_Icon.png | Bin 0 -> 1863 bytes src/index.css | 23 +++++- src/pages/WelcomePage.js | 156 +++++++++++++++++++++++++-------------- 3 files changed, 124 insertions(+), 55 deletions(-) create mode 100644 assets/Swipe_Icon.png diff --git a/assets/Swipe_Icon.png b/assets/Swipe_Icon.png new file mode 100644 index 0000000000000000000000000000000000000000..c6dc151b8e92bd0f0faef4943c7cd9863fa32e0b GIT binary patch literal 1863 zcmV-N2e|l&P)VPuxs&Rp_jVfy6V!=R`pZ?-REY``{H~pK9<_qB(IHu@Kq~)WvjS2UHQY zQFYW&{ci)wla7kId&KR;bHrN;y$kU}qL)f`B4!eUAiZpj;Rq^wDvju&M_YU18jZFq zP=iR;80-Ng57|S1uxD>5`dA7BVM**swAIibgZ6oN2313A;x$Ek2UG)WPOcad68VMa?-15rARVI5lQXk&ucfc8)s=h(T8usM3J;N$J3G&mgpBaDX1 zu#B_~f>3f;q=%cMZ0u81V|_FhOf_UPxlmA0#FddDGht#PerdKYN2B`iAZ~*c18hBR z3j<&U$$Ns^dtJC^8D~u!s+`?ld1*QP~7WV*)$bO@5FP1g9E*lg9NFb zXDh^f;*XHF&KUU_Q&W>lo=l7l7W>+o1;KTM@XudEh=Ic7g$5JCa~YpZ@yqTlfG+_kXW7lWNh- zT20;rWj1LFxS@7yu7Gz(=lX!KUzt$hE8dM1AU^aG`G9I--s} zqii!~WMBS#azY5#`}zz~_T>o!a6sDtH!`*g^~}xqAWEa=_S#rP_4BUjqDZU+Au!?+x~?*uQ;^BVygTr5xbkHC|s z|B7X6tNK_pe~ehJU8@#0hRvgi%<rj3mxd*6ZV08G-Ci*+1o&Jfk90bbsFwANO$)%L#|lkdym2 zud9lo3?16pqK|twSsbTXUln6hh+9}8>3BMlQqpOq`nc3*tbE+(|z}_hfFY@dFNXPC{NK49T;$TQ= zAFlk7gB4*rVQjqFL@fbptQ2$^`x7yd*bfyu3Onht#M=jw@d%IFgQDU`FeZviN|mBo z=h}=7A%4LMY$x)YJ_HNrjuLk*71*nb(}x+lWZBO!Ci3#{Da9P6pgCvR9Rb^)P1(|v zaxe_7Y@6~*=E;cYION>CtJdf;EoE#D8w36eqOqFBP}q|%3!0v_lXaoXebfwPm_2hi zjwOa+s<)S#e(B0>Fa`ucz}|#YvY4tgRGYCZ(pe&m;bXtS#Oa}YSCYY|!@5;|pv()y z2KN?q4sC5=41`DSMs~$Iy-BlP+tM|KxLy{THn9ZdoV34>q-Cn|rDOi>`><)z7>43c z+Pz%eXHbBZF)^Fi4yue#hPFlWJds6B6QW~TSvitZFJf!VZ(=&<)J6UD+@OI448_^= zSK&2c5$+Zg%PMv<&e42M*NV=Be3e=P>29GC^x47K3k9fXBP*v(`UHz9nXc{>I6!&C%z06`k*yXJbMS&I zDt-1!wgIpZjfJ#9h*`_I3t9LjHU;%9%;Dm!|Bce=vzZt-WhH{cVwB#zLL5lk10#c3 z#?CSPG{Ca_*zJL8*}o { - if (currentStep < steps.length - 1) { - setCurrentStep(currentStep + 1); - } else { - navigation.replace("Login"); - } - }; + const handleNextStep = () => { + if (currentStep < steps.length - 1) { + setCurrentStep(currentStep + 1); + } else { + navigation.replace("Login"); + } + }; - // Configuração do PanResponder para capturar gestos - const panResponder = PanResponder.create({ - onMoveShouldSetPanResponder: (_, gestureState) => { - // Detecta se o movimento horizontal é significativo - return Math.abs(gestureState.dx) > 20 && Math.abs(gestureState.dy) < 20; - }, - onPanResponderRelease: (_, gestureState) => { - if (gestureState.dx < -50) { - // Movimento de deslizar para a esquerda - handleNextStep(); - } - }, - }); + // Configuração do PanResponder para capturar gestos + const panResponder = PanResponder.create({ + onMoveShouldSetPanResponder: (_, gestureState) => { + // Detecta se o movimento horizontal é significativo + return Math.abs(gestureState.dx) > 20 && Math.abs(gestureState.dy) < 20; + }, + onPanResponderRelease: (_, gestureState) => { + if (gestureState.dx < -50) { + // Movimento de deslizar para a esquerda + handleNextStep(); + } + }, + }); - return ( - - {/* Texto principal */} - {steps[currentStep].text} - - {/* Imagem */} - + return ( + + {/* Texto principal */} + + {/* Renderizar os textos */} + ( + <> + + + + {item.text} + + + {/* Imagem */} + + + + + + )} + horizontal + showsHorizontalScrollIndicator + pagingEnabled + keyExtractor={(item) => item.id} + /> + - {/* Barra de progresso */} - - {[...Array(steps.length + 1)].map((_, index) => ( - - ))} - + + {/* Barra de progresso */} + + {[...Array(steps.length + 1)].map((_, index) => ( + + ))} + - {/* Texto fixo indicando para deslizar */} - - Desliza - - + {/* Texto fixo indicando para deslizar */} + + + Desliza - ); + + + ); } From 8d192299b20054b1ed886e067a54b2404c6fbe1a Mon Sep 17 00:00:00 2001 From: TRProjects98 Date: Sat, 28 Dec 2024 16:59:23 +0000 Subject: [PATCH 2/2] Carroussel Navigation and Stylezation updated --- src/index.css | 3 ++ src/pages/WelcomePage.js | 95 +++++++++++++++++----------------------- 2 files changed, 42 insertions(+), 56 deletions(-) diff --git a/src/index.css b/src/index.css index 72e2e78..0e7519f 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,9 @@ /* Animação do icon de swipe */ +.dont_swipe{ + animation: none; +} .swipe_anime{ animation-name: swipe_icon_animation; animation-duration: 2.5s; diff --git a/src/pages/WelcomePage.js b/src/pages/WelcomePage.js index f3a138b..725d97e 100644 --- a/src/pages/WelcomePage.js +++ b/src/pages/WelcomePage.js @@ -1,91 +1,73 @@ -import React, { useState } from "react"; +import React, { useState, useRef } from "react"; import { View, Text, Image, - PanResponder, Animated, FlatList, + Dimensions, } from "react-native"; +const { width: SCREEN_WIDTH } = Dimensions.get("window"); + export default function WelcomePage({ navigation }) { const [currentStep, setCurrentStep] = useState(0); const steps = [ - { - id: 0, - text: "Olá! Bem-vindo ao LUMICHECK!", - }, - { - id: 1, - text: "Eu sou a Lumi. É um prazer poder conhecer-te!", - }, - { - id: 2, - text: "Vamos começar?", - }, + { id: 0, text: "Olá! Bem-vindo ao LUMICHECK!" }, + { id: 1, text: "Eu sou a Lumi. É um prazer poder conhecer-te!" }, + { id: 2, text: "Vamos começar?" }, + { id: 3, text: " " }, ]; - const handleNextStep = () => { - if (currentStep < steps.length - 1) { - setCurrentStep(currentStep + 1); - } else { + const flatListRef = useRef(null); + + const handleScroll = (event) => { + const offsetX = event.nativeEvent.contentOffset.x; + const currentIndex = Math.round(offsetX / SCREEN_WIDTH); + setCurrentStep(currentIndex); + if (currentStep === steps.length - 1) { navigation.replace("Login"); } }; - // Configuração do PanResponder para capturar gestos - const panResponder = PanResponder.create({ - onMoveShouldSetPanResponder: (_, gestureState) => { - // Detecta se o movimento horizontal é significativo - return Math.abs(gestureState.dx) > 20 && Math.abs(gestureState.dy) < 20; - }, - onPanResponderRelease: (_, gestureState) => { - if (gestureState.dx < -50) { - // Movimento de deslizar para a esquerda - handleNextStep(); - } - }, - }); - return ( - + {/* Texto principal */} - {/* Renderizar os textos */} ( - <> - - - - {item.text} - - - {/* Imagem */} - - - + + + + {item.text} + + + {/* Imagem */} + + - + )} horizontal - showsHorizontalScrollIndicator + showsHorizontalScrollIndicator={false} pagingEnabled - keyExtractor={(item) => item.id} + onScroll={handleScroll} + keyExtractor={(item) => item.id.toString()} + scrollEventThrottle={16} // Optimize scroll updates /> + {/* Barra de progresso */} - {/* Barra de progresso */} - {[...Array(steps.length + 1)].map((_, index) => ( + {steps.map((_, index) => ( Desliza