O Foco deste artigo é te auxiliar a criar uma página com componente com scroll horizontal no estilo snap e um header que reflete as alterações entre as etapas.
Essa estrutura é muito útil para se construir wizard forms. Ele é um tipo de formulário muito útil, onde o usuário é guiado a preencher o formulário através de etapas.
Stacks
Neste projeto vamos utilizar as tecnologias:
- Expo - Para a criação e compartilhamento da aplicação, rodando nativamente em Android e iOS.
- React Native Responsive Font Size - Para a padronização do tamanho das fontes em dispositivos Android e iOS.
Estrutura
Como o intuito deste artigo é a construção de um conteúdo com scroll horizontal do tipo snap e com etapas, não vou focar na parte de estilização dos outros componentes.
A estrutura inicial foi dividida em 2 partes:
- Header
- Content Container
Header
Responsável por indicar quais etapas foram concluídas e quais restam finalizar.
Content Container
Responsável em ter o conteúdo dividido em etapas, botões de navegação entre etapas e scroll horizontal snap.
OBS: Para a padronização do tamanho das fontes em diversos dispositivos utilizaremos a lib react-native-fontsize.
Criei um arquivo utils que tem a lógica para padronizar o tamanho das fontes.
// src/utils/normalize-font.ts
import { Dimensions } from "react-native";
import { RFValue } from "react-native-responsive-fontsize";
export const normalizeFont = (value: number) => {
const { height } = Dimensions.get("window");
const valueNormalized = RFValue(value, height);
return valueNormalized;
};
Estrutura inicial
// src/app/index.tsx
import { View, Text } from "react-native";
import { normalizeFont } from "../utils/normalize-font";
export default function Home() {
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "2d0381",
}}
>
{/* Header */}
<View
style={{
backgroundColor: "#f0000099",
alignItems: "center",
justifyContent: "center",
padding: 40,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Header
</Text>
</View>
{/* Content Container */}
<View
style={{
backgroundColor: "green",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
width: "100%",
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Content
</Text>
</View>
</View>
</View>
);
}
Construindo o Content Container
Vamos deixar o Header por último já que seu comportamento depende da ação do usuário no content container.
Próximas etapas são:
- Alterar o View do Content Container para ScrollView, pois precisamos do scroll horizontal e adicionar o conteúdo dentro do Content Container.
- Ajustar width das etapas dentro do Content Container.
- Habilitar paging enabled.
- Navegação entre as etapas.
Alterando View do Content Container para ScrollView
// src/app/index.tsx
import { View, Text, ScrollView } from "react-native";
import { normalizeFont } from "../utils/normalize-font";
export default function Home() {
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "2d0381",
}}
>
{/* Header */}
<View
style={{
backgroundColor: "#f0000099",
alignItems: "center",
justifyContent: "center",
padding: 40,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Header
</Text>
</View>
{/* Content Container */}
<ScrollView
style={{
flexGrow: 0,
alignContent: "center",
}}
contentContainerStyle={{
flexGrow: 1,
position: "relative",
}}
horizontal
>
<View
style={{
width: "100%",
backgroundColor: "gray",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Welcome (Step 1)
</Text>
</View>
<View
style={{
width: "100%",
backgroundColor: "green",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Account Information (Step 2)
</Text>
</View>
<View
style={{
width: "100%",
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Personal Information (Step 3)
</Text>
</View>
<View
style={{
width: "100%",
backgroundColor: "red",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Complete (Step 4)
</Text>
</View>
</ScrollView>
</View>
</View>
);
}
Com a estrutura acima ainda não é possível navegar horizontalmente pois todas as etapas estão com width = 100%, pegando todo o espaço disponível, atrapalhando o scroll. Para que o scroll funcione precisamos deixar o width das etapas igual ao espaço disponível do content container, mas sem utilizar o width 100%, exemplo:
Se o content container tem width = 370px, então todas as etapas dentro dele precisam também ter esse width.
Ajustando o width das etapas dentro do content container
Para que as etapas do content container tenham um width dinâmico vamos atribuir ao width de cada etapa, o tamanho da tela do dispositivo, menos qualquer gap, padding ou margin horizontal que exista.
Para pegar o width do dispositivo vamos utilizar o Dimensions, método que vem do react-native.
Vamos também atribuir a variável screenPadding o padding da tela, que é de 20.
Na variável stepFormWidth atribuímos o resultado do cálculo do width da tela menos padding da tela. Como o padding da tela é de 20 para o lado esquerdo e 20 para o lado direito, podemos multiplicar a variável screenPadding por 2
import { Dimensions } from "react-native";
const { width } = Dimensions.get("window");
const screenPadding = 20;
const stepFormWidth = width - screenPadding * 2;
Ficando no arquivo assim:
// src/app/index.tsx
import { View, Text, Dimensions, ScrollView } from "react-native";
import { normalizeFont } from "../utils/normalize-font";
const { width } = Dimensions.get("window");
export default function Home() {
const screenPadding = 20;
const stepFormWidth = width - screenPadding * 2;
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "2d0381",
}}
>
{/* Header */}
<View
style={{
backgroundColor: "#f0000099",
alignItems: "center",
justifyContent: "center",
padding: 40,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Header
</Text>
</View>
{/* Content Container */}
<ScrollView
style={{
flexGrow: 0,
alignContent: "center",
}}
contentContainerStyle={{
flexGrow: 1,
position: "relative",
}}
horizontal
>
<View
style={{
width: stepFormWidth,
backgroundColor: "gray",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Welcome (Step 1)
</Text>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "green",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Account Information (Step 2)
</Text>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Personal Information (Step 3)
</Text>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "red",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Complete (Step 4)
</Text>
</View>
</ScrollView>
</View>
</View>
);
}
Agora que os Steps já possuem um tamanho específico, conseguimos fazer o scroll horizontal.
Habilitando Paging Enabled
A maneira que o scroll horizontal se comporta não é a mais ideal para se utilizar em um componente do tipo wizard form, por isso faremos com que o scroll tenha um comportamento no estilo snap, no qual ao "scrollar" só um pouco, ele já irá para o centro da próxima etapa.
O ScrollView tem a propriedade pagingEnabled que permite habilitar este comportamento no estilo Snap.
// ...
<ScrollView
// ...
pagingEnabled
>
// ...
Navegação entre as etapas.
Adicionando os botões para navegação entre as etapas.
Agora dentro de cada etapa, adicionaremos os botões que permite prosseguir ou retornar entre as etapas.
// src/app/index.tsx
import { View, Text, Dimensions, Button, ScrollView } from "react-native";
import { normalizeFont } from "../utils/normalize-font";
const { width } = Dimensions.get("window");
export default function Home() {
const screenPadding = 20;
const stepFormWidth = width - screenPadding * 2;
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "2d0381",
}}
>
{/* Header */}
<View
style={{
backgroundColor: "#f0000099",
alignItems: "center",
justifyContent: "center",
padding: 40,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Header
</Text>
</View>
{/* Content Container */}
<ScrollView
style={{
flexGrow: 0,
alignContent: "center",
}}
contentContainerStyle={{
flexGrow: 1,
position: "relative",
}}
horizontal
pagingEnabled
>
<View
style={{
width: stepFormWidth,
backgroundColor: "gray",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Welcome (Step 1)
</Text>
<Button
title="continue"
color="#000"
onPress={() => {
console.log("go to next step");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "green",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Button
title="previous step"
color="#000"
onPress={() => {
console.log("go to previous step");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Account Information (Step 2)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
console.log("go to next step");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Button
title="previous step"
color="#000"
onPress={() => {
console.log("go to previous step");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Personal Information (Step 3)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
console.log("go to next step");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "red",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Complete (Step 4)
</Text>
</View>
</ScrollView>
</View>
</View>
);
}
- Welcome (Step 1) só tem a possibilidade de prosseguir para próxima etapa.
- Account Information (Step 2) tem a possibilidade de prosseguir e retornar.
- Personal Information (Step 3) tem a possibilidade de prosseguir e retornar.
- Complete (Step 4) será a tela de finalização, então não tem como prosseguir e nem retornar.
Lógica para navegação entre as etapas.
Criando a Ref
Para ter a navegação entre os steps, precisamos ter a referência do ScrollView e através dela utilizar o método scrollTo, onde nos permite fazer o scroll até um ponto X ou Y.
import { useRef } from "react";
const scrollRef = useRef<ScrollView>(null);
// ...
<ScrollView
ref={scrollRef}
// ...
>
// ...
Com a referência do componente scrollview, conseguimos utilizar o scrollTo para navegar horizontalmente para o lado esquerdo ou direito.
Navegar para próxima etapa
Para navegar para a próxima etapa, precisamos dizer para nosso componente scrollview navegar pelo eixo X até um valor específico e como nossos steps possuem um tamanho igual ao do dispositivo, diminuindo apenas espaçamento de padding, conseguimos fazer uso dessa informação para navegar.
Começamos criando um método para que sejam utilizados nos botões para prosseguir.
Vamos chamá-la de handlePressNextStep que recebe como parâmetro o próximo passo que deseja ir (nextStep).
Dentro dele criamos um objeto que será responsável por ter como chave o nome das etapas e como valor o ponto no eixo X que esse componente está presente. Como o pagingEnabled está ativado no scrollView, assim que scrollar para dentro do próximo step, o scrollview irá centralizar o scroll para dentro deste step.
Como os componentes possuem o width do mesmo tamanho da tela do dispositivo, podemos dizer que o segundo step está presente no eixo X no valor de width da tela - padding horizontal e o step 3 está presente no valor do step 2 * 2.
Etapas:
1ª - Welcome (Step 1) - inicia em x: 0.
2ª - Account Information (Step 2) - inicia em x: (width da tela - padding horizontal).
3ª - Personal Information (Step 3) - inicia em x: (width da tela - padding horizontal) * 2.
4ª - Complete (Step 4) - inicia em x: (width da tela - padding horizontal) * 3
exemplo: Meu dispositivo tem width 390px, e adicionei 20px de padding horizontal, logo o tamanho dos meus steps serão de 370px:
valor dos steps: 390px - 20px = 370x
Então Welcome (Step 1) se encontra no eixo X: 0.
Account Information (Step 2) se encontra no eixo X: 370px.
Personal Information (Step 3) se encontra no eixo X: 370px * 2 = 740px.
Complete (Step 4) se encontra no eixo X: 370px * 3 = 1110px.
Com essas informações montamos o método abaixo:
const handlePressNextStep = (nextStep: string) => {
const formSteps = {
account: stepFormWidth,
personal: stepFormWidth * 2,
complete: stepFormWidth * 3,
};
scrollRef?.current?.scrollTo({
x: formSteps[nextStep as keyof typeof formSteps],
});
};
Como já iniciamos no step Welcome podemos deixá-la de fora.
Navegar para etapa anterior
Assim como na navegação para próxima etapa, criamos um método para fazer scroll para etapa anterior, vamos chamá-la de handlePressBackButton e que recebe como parâmetro a etapa anterior que deseja ir (previousStep).
const handlePressBackButton = (previousStep: string) => {
const formSteps = {
welcome: 0,
account: stepFormWidth,
};
scrollRef?.current?.scrollTo({
x: formSteps[previousStep as keyof typeof formSteps],
});
};
Utilizando a navegação
// src/app/index.tsx
import { useRef } from "react";
import { View, Text, Dimensions, Button, ScrollView } from "react-native";
import { normalizeFont } from "../utils/normalize-font";
const { width } = Dimensions.get("window");
export default function Home() {
const scrollRef = useRef<ScrollView>(null);
const screenPadding = 20;
const stepFormWidth = width - screenPadding * 2;
const handlePressNextStep = (nextStep: string) => {
const formSteps = {
account: stepFormWidth,
personal: stepFormWidth * 2,
complete: stepFormWidth * 3,
};
scrollRef?.current?.scrollTo({
x: formSteps[nextStep as keyof typeof formSteps],
});
};
const handlePressBackButton = (previousStep: string) => {
const formSteps = {
welcome: 0,
account: stepFormWidth,
};
scrollRef?.current?.scrollTo({
x: formSteps[previousStep as keyof typeof formSteps],
});
};
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "2d0381",
}}
>
{/* Header */}
<View
style={{
backgroundColor: "#f0000099",
alignItems: "center",
justifyContent: "center",
padding: 40,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Header
</Text>
</View>
{/* Content Container */}
<ScrollView
style={{
flexGrow: 0,
alignContent: "center",
}}
contentContainerStyle={{
flexGrow: 1,
position: "relative",
}}
horizontal
pagingEnabled
ref={scrollRef}
>
<View
style={{
width: stepFormWidth,
backgroundColor: "gray",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Welcome (Step 1)
</Text>
<Button
title="continue"
color="#000"
onPress={() => {
handlePressNextStep("account");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "green",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Button
title="previous step"
color="#000"
onPress={() => {
handlePressBackButton("welcome");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Account Information (Step 2)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
handlePressNextStep("personal");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Button
title="previous step"
color="#000"
onPress={() => {
handlePressBackButton("account");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Personal Information (Step 3)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
handlePressNextStep("complete");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "red",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Complete (Step 4)
</Text>
</View>
</ScrollView>
</View>
</View>
);
}
Desativando o scroll
Agora que já está funcionando o seu scroll através do pressionar dos botões, é necessário desativar o scroll para que o usuário consiga navegar apenas pelos botões.
Para isso é muito simples, o ScrollView tem a propriedade scrollEnabled que é responsável por habilitar ou não o scroll dele. Então atribuímos o seu valor para false scrollEnabled={false} e assim não será mais possível scrollar, apenas navegar pelos botões.
Construindo o Header
Agora que temos a parte do content container com as etapas e navegação entre eles através dos botões, vamos criar o Header.
No Header teremos algumas labels indicando qual etapa que o usuário está e quantas faltam para finalizar o preenchimento do formulário.
// src/app/index.tsx
import { Dimensions, Text, View } from "react-native";
import { normalizeFont } from "../utils/normalize-font";
export default function Home() {
// ...
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "#2d0381",
}}
>
{/* Header */}
<View
style={{
gap: 20,
padding: 20,
}}
>
<Text
style={{
fontSize: normalizeFont(20),
color: "#FAF9F6",
textTransform: "capitalize",
}}
>
Create account steps
</Text>
{/* Steps Indicator Container */}
<View
style={{
position: "relative",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
{/* StepIndicator Line */}
<View
style={{
position: "absolute",
height: 1,
width: "100%",
backgroundColor: "#FAF9F6",
}}
/>
{/* StepIndicator Label Wrapper - Welcome */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Welcome Step
</Text>
</View>
{/* StepIndicator Label Wrapper - Account Information */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Account Information
</Text>
</View>
{/* StepIndicator Label Wrapper - Personal Information */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Personal Information
</Text>
</View>
{/* Divisor */}
<View
style={{
position: "absolute",
bottom: -20,
height: 1,
width: "100%",
backgroundColor: "#9ca3af",
}}
/>
</View>
</View>
{/* Content Container */}
{/* ... */}
</View>
</View>
);
}
Lógica para indicar se a etapa foi finalizada
Com as labels já presentes no header, conseguimos implementar uma lógica que altere o estilo da label, caso a etapa tenha sido finalizada.
E como saberemos se ela foi finalizada?
No content container, ao navegar para a próxima etapa vamos considerar que ela foi finalizada e será refletido uma mudança no estilo da label correspondente a ela, caso ela retorna para a etapa anterior, ela deve voltar a ser incompleta.
Para isso, vamos criar um estado que será responsável por armazenar a lista de etapas concluídas:
const [stepsCompleted, setStepsCompleted] = useState<string[]>([]);
E então nas funções handlePressNextStep e handlePressBackButton fazemos a lógica para adicionar/remover a etapa concluída da lista de etapas.
A função handlePressNextStep receberá mais um parâmetro, que será o currentStep e para ficar melhor ordenado os parâmetros, vamos colocá-lo como o primeiro parâmetro da função, ficando assim:
const handlePressNextStep = (currentStep: string, nextStep: string) => {
setStepsCompleted((prevState) =>
prevState.includes(currentStep) ? prevState : [...prevState, currentStep],
);
const formSteps = {
account: stepFormWidth,
personal: stepFormWidth * 2,
complete: stepFormWidth * 3,
};
scrollRef?.current?.scrollTo({
x: formSteps[nextStep as keyof typeof formSteps],
});
};
É necessário antes de alterar o estado, verificar se a etapa atual já está na lista, para que não seja adicionado dado duplicado na lista.
Agora vamos adicionar o currentStep como primeiro parâmetro também na função handlePressBackButton:
const handlePressBackButton = (currentStep: string, previousStep: string) => {
setStepsCompleted((prevState) =>
// Validação adicionada para que retorne somente as etapas que sejam diferentes da atual e da anterior, deixando na lista apenas as etapas que já foram avançadas.
prevState.filter((step) => step !== currentStep && step !== previousStep),
);
const formSteps = {
welcome: 0,
account: stepFormWidth,
};
scrollRef?.current?.scrollTo({
x: formSteps[previousStep as keyof typeof formSteps],
});
};
Os botões de ação no content container ficaram assim:
<ScrollView>
<View
//...
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Welcome (Step 1)
</Text>
<Button
title="continue"
color="#000"
onPress={() => {
handlePressNextStep("welcome", "account");
}}
/>
</View>
<View
//...
>
<Button
title="previous step"
color="#000"
onPress={() => {
handlePressBackButton("account", "welcome");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Account Information (Step 2)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
handlePressNextStep("account", "personal");
}}
/>
</View>
<View
//...
>
<Button
title="previous step"
color="#000"
onPress={() => {
handlePressBackButton("personal", "account");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Personal Information (Step 3)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
handlePressNextStep("personal", "complete");
}}
/>
</View>
<View
//...
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Complete (Step 4)
</Text>
</View>
</ScrollView>
Agora ao navegar para a próxima etapa, adicionamos a etapa atual na lista e ao retornar uma etapa removemos ela da lista, exemplo:
Etamos na etapa de Account Information, logo a lista de etapas será ['welcome'].
Passei para a etapa Personal Information, a lista será ['welcome', 'account'].
Retornei para etapa Account Information, a lista retorna para ['welcome'].
Alterando estilo da label ao concluir a etapa
Agora que já temos um estado com a lista de etapas concluídas, vamos utilizá-la para saber se a etapa "X" está presente na lista, se estiver, o background-color do StepIndicator Label Wrapper será "#22c55e", caso contrário será "#9ca3af".
// src/app/index.tsx
import { useState } from "react";
//...
export default function Home() {
const [stepsCompleted, setStepsCompleted] = useState<string[]>([]);
// ...
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "2d0381",
}}
>
{/* Header */}
<View
style={{
gap: 20,
padding: 20,
}}
>
<Text
style={{
fontSize: normalizeFont(20),
color: "#FAF9F6",
textTransform: "capitalize",
}}
>
Create account steps
</Text>
{/* Steps Indicator Container */}
<View
style={{
position: "relative",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
{/* StepIndicator Line */}
<View
style={{
position: "absolute",
height: 1,
width: "100%",
backgroundColor: "#FAF9F6",
}}
/>
{/* StepIndicator Label Wrapper - Welcome */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: stepsCompleted.includes("welcome")
? "#22c55e"
: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Welcome Step
</Text>
</View>
{/* StepIndicator Label Wrapper - Account Information */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: stepsCompleted.includes("account")
? "#22c55e"
: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Account Information
</Text>
</View>
{/* StepIndicator Label Wrapper - Personal Information */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: stepsCompleted.includes("personal")
? "#22c55e"
: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Personal Information
</Text>
</View>
{/* Divisor */}
<View
style={{
position: "absolute",
bottom: -20,
height: 1,
width: "100%",
backgroundColor: "#9ca3af",
}}
/>
</View>
</View>
{/* Content Container */}
{/* ... */}
</View>
</View>
);
}
Código finalizado
E assim temos o codigo finalizado com todas as lógicas.
// src/app/index.tsx
import { useRef, useState } from "react";
import { Button, Dimensions, ScrollView, Text, View } from "react-native";
import { normalizeFont } from "../utils/normalize-font";
const { width } = Dimensions.get("window");
export default function Home() {
const [stepsCompleted, setStepsCompleted] = useState<string[]>([]);
const scrollRef = useRef<ScrollView>(null);
const screenPadding = 20;
const stepFormWidth = width - screenPadding * 2;
const handlePressNextStep = (currentStep: string, nextStep: string) => {
setStepsCompleted((prevState) =>
prevState.includes(currentStep) ? prevState : [...prevState, currentStep],
);
const formSteps = {
account: stepFormWidth,
personal: stepFormWidth * 2,
complete: stepFormWidth * 3,
};
scrollRef?.current?.scrollTo({
x: formSteps[nextStep as keyof typeof formSteps],
});
};
const handlePressBackButton = (currentStep: string, previousStep: string) => {
setStepsCompleted((prevState) =>
prevState.filter((step) => step !== currentStep && step !== previousStep),
);
const formSteps = {
welcome: 0,
account: stepFormWidth,
};
scrollRef?.current?.scrollTo({
x: formSteps[previousStep as keyof typeof formSteps],
});
};
return (
// Screen Container
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
padding: 20,
}}
>
{/* Sign Up Container */}
<View
style={{
width: "100%",
borderRadius: 2,
backgroundColor: "#2d0381",
}}
>
{/* Header */}
<View
style={{
gap: 20,
padding: 20,
}}
>
<Text
style={{
fontSize: normalizeFont(20),
color: "#FAF9F6",
textTransform: "capitalize",
}}
>
Create account steps
</Text>
{/* Steps Indicator Container */}
<View
style={{
position: "relative",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
{/* StepIndicator Line */}
<View
style={{
position: "absolute",
height: 1,
width: "100%",
backgroundColor: "#FAF9F6",
}}
/>
{/* StepIndicator Label Wrapper - Welcome */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: stepsCompleted.includes("welcome")
? "#22c55e"
: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Welcome Step
</Text>
</View>
{/* StepIndicator Label Wrapper - Account Information */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: stepsCompleted.includes("account")
? "#22c55e"
: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Account Information
</Text>
</View>
{/* StepIndicator Label Wrapper - Personal Information */}
<View
style={{
maxWidth: 100,
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
paddingVertical: 4,
paddingHorizontal: 8,
backgroundColor: stepsCompleted.includes("personal")
? "#22c55e"
: "#9ca3af",
}}
>
<Text
style={{
fontSize: normalizeFont(12),
color: "#FAF9F6",
fontWeight: "bold",
}}
>
Personal Information
</Text>
</View>
{/* Divisor */}
<View
style={{
position: "absolute",
bottom: -20,
height: 1,
width: "100%",
backgroundColor: "#9ca3af",
}}
/>
</View>
</View>
{/* Content Container */}
<ScrollView
style={{
flexGrow: 0,
alignContent: "center",
}}
contentContainerStyle={{
flexGrow: 1,
position: "relative",
}}
horizontal
pagingEnabled
scrollEnabled={false}
ref={scrollRef}
>
<View
style={{
width: stepFormWidth,
backgroundColor: "gray",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Welcome (Step 1)
</Text>
<Button
title="continue"
color="#000"
onPress={() => {
handlePressNextStep("welcome", "account");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "green",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Button
title="previous step"
color="#000"
onPress={() => {
handlePressBackButton("account", "welcome");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Account Information (Step 2)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
handlePressNextStep("account", "personal");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Button
title="previous step"
color="#000"
onPress={() => {
handlePressBackButton("personal", "account");
}}
/>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Personal Information (Step 3)
</Text>
<Button
title="next step"
color="#000"
onPress={() => {
handlePressNextStep("personal", "complete");
}}
/>
</View>
<View
style={{
width: stepFormWidth,
backgroundColor: "red",
alignItems: "center",
justifyContent: "center",
paddingVertical: 160,
}}
>
<Text style={{ color: "white", fontSize: normalizeFont(30) }}>
Complete (Step 4)
</Text>
</View>
</ScrollView>
</View>
</View>
);
}
Há diversas melhorias para implementar neste projetinho, mas como o foco deste artigo é a construção de um scroll horizontal tipo snap e com etapas, deixamos as melhorias e refatorações para outro artigo.
Caso tenha interesse, pode acompanhar as melhorias do projeto através do repositório clicando aqui
Top comments (0)