DEV Community: Christopher Alves

Guia Passo a Passo: Implementando Scroll Horizontal Snap no React Native

Christopher Alves — Wed, 21 Feb 2024 21:14:57 +0000

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

Step-by-Step Guide: Implementing Snap Horizontal Scroll in React Native

Christopher Alves — Wed, 21 Feb 2024 13:47:41 +0000

The focus of this article is to assist you in creating a page with a horizontally scrollable component in snap style and a header that reflects the changes between the steps.

This structure is very useful for building wizard forms. It's a very useful form type where the user is guided to fill out the form through steps.

Article in Portuguese(🇧🇷) by clicking here

Stacks

In this project, we will use the following technologies:

React Native and Expo - For creating and sharing the application, running natively on Android and iOS.
React Native Responsive Font Size - For standardizing font sizes on Android and iOS devices.

Structure

Since the purpose of this article is to build content with horizontally scrollable snap-style steps, I won't focus on styling other components.

The initial structure has been divided into 2 parts:

Header
Content Container

Header

Responsible for indicating which steps have been completed and which ones are yet to be finished.

Content Container

Responsible for wrapping up all the content steps and horizontal snap scrolling.

Note: For standardizing font sizes on various devices, we will use the react-native-fontsize library.

I created a utils file that contains the logic for standardizing font sizes.



// 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;
};

Initial Structure



// 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>
  );
}

Building the Content Container

Let's leave the Header for last since its behavior depends on the user's action in the content container.

Next steps are:

Change the View of the Content Container to ScrollView, as we need horizontal scroll and add steps inside the Content Container.
Adjust the width of the steps inside the Content Container.
Enable paging.
Navigation between steps.

Changing View of the Content Container to 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>
  );
}

With the above structure, it's not possible to navigate horizontally because all steps have width = 100%, taking up all available space, hindering scrolling. To enable scrolling, we need to set the width of the steps equal to the available space of the content container, but without using 100% width, for example:

If the content container has a width = 370px, then all steps inside it must also have this width.

Adjusting the width of steps inside the content container

To have dynamic width for the steps of the content container, we will assign to each step's width the size of the device screen, minus any horizontal gap, padding, or margin that exists.

To get the device's width, we will use Dimensions, a method that comes from react-native.

We will also assign the variable screenPadding the screen's padding, which is 20.
In the variable stepFormWidth, we assign the result of the calculation of the screen's width minus the screen's padding. Since the screen's padding is 20 for the left side and 20 for the right side, we can multiply the variable screenPadding by 2.



import { Dimensions } from "react-native";

const { width } = Dimensions.get("window");

const screenPadding = 20;
const stepFormWidth = width - screenPadding * 2;

Thus, the file looks like this:



// 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>
  );
}

Now that the Steps already have a specific size, we can make horizontal scrolling.

Enabling Paging

The way the horizontal scroll behaves is not the most ideal to use in a wizard form component, so we will make the scroll behave in a snap style, where scrolling just a little will move it to the center of the next step.

The ScrollView has the pagingEnabled property that allows enabling this snap-style behavior.



// ...
  <ScrollView
  // ...
    pagingEnabled
  >
// ...

Navigation between steps.

Adding buttons for navigation between steps.

Now, within each step, we'll add buttons that allow moving forward or backward between steps.



// 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) only has the possibility to proceed to the next step.
Account Information (Step 2) has the possibility to proceed and return.
Personal Information (Step 3) has the possibility to proceed and return.
Complete (Step 4) will be the completion screen, so there's no way to proceed or return.

Logic for navigation between steps.

Creating the Ref

To have navigation between steps, we need a reference to the ScrollView and use the scrollTo method, which allows us to scroll to a specific point on the X or Y axis.



import { useRef } from "react";

const scrollRef = useRef<ScrollView>(null);

// ...

<ScrollView
  ref={scrollRef}
  // ...
>
// ...

With the reference to the scrollview component, we can use scrollTo to navigate horizontally to the left or right.

Navigate to the next step

To navigate to the next step, we need to tell our scrollview component to navigate along the X axis to a specific value, and since our steps have a size equal to the device's screen, reducing only the horizontal padding, we can use this information to navigate.
We start by creating a method to be used in the buttons to proceed.
Let's call it handlePressNextStep which takes as a parameter the next step you want to go to (nextStep).

Inside it, we create an object that will be responsible for having the step names as keys and the X-axis point that this component is present as values. Since pagingEnabled is activated in the scrollView, as soon as it scrolls into the next step, the scrollView will center the scroll inside this step.

As the components have the width the same size as the device screen, we can say that the second step is present on the X-axis at the value of screen width - horizontal padding and step 3 is present at the value of step 2 * 2.

Steps:

1st - Welcome (Step 1) - starts at x: 0.

2nd - Account Information (Step 2) - starts at x: (screen width - horizontal padding).

3rd - Personal Information (Step 3) - starts at x: (screen width - horizontal padding) * 2.

4th - Complete (Step 4) - starts at x: (screen width - horizontal padding) * 3.

example: My device has a width of 390px, and I added 20px of horizontal padding, so the size of my steps will be 370px:

steps values: 390px - 20px = 370px

So Welcome (Step 1) is at x-axis: 0.
Account Information (Step 2) is at x-axis: 370px.
Personal Information (Step 3) is at x-axis: 370px * 2 = 740px.
Complete (Step 4) is at x-axis: 370px * 3 = 1110px.

With this information, we create the method below:



const handlePressNextStep = (nextStep: string) => {
  const formSteps = {
    account: stepFormWidth,
    personal: stepFormWidth * 2,
    complete: stepFormWidth * 3,
  };

  scrollRef?.current?.scrollTo({
    x: formSteps[nextStep as keyof typeof formSteps],
  });
};

Since we already started at the Welcome step, we can leave it out.

Navigate to the previous step

Just like in navigating to the next step, we create a method to scroll to the previous step, let's call it handlePressBackButton and it takes as a parameter the previous step you want to go to (previousStep).



const handlePressBackButton = (previousStep: string) => {
  const formSteps = {
    welcome: 0,
    account: stepFormWidth,
  };

  scrollRef?.current?.scrollTo({
    x: formSteps[previousStep as keyof typeof formSteps],
  });
};

Using navigation



// 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>
  );
}

Disabling scroll

Now that your scroll is working through button presses, it's necessary to disable scrolling so that the user can navigate solely through the buttons.

To do this, it's very simple. The ScrollView has the scrollEnabled property, which is responsible for enabling or disabling its scroll. So, we set its value to false scrollEnabled={false}, and thus scrolling will no longer be possible, only navigation through the buttons.

Building the Header

Now that we have the content container part with the steps and navigation between them via buttons, let's create the Header.

In the Header, we'll have some labels indicating which step the user is on and how many steps are left to complete the form.



// 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>
  );
}

Logic to indicate if the step is completed

With the labels already present in the header, we can implement logic to change the style of the label if the step has been completed.

And how do we know if it has been completed?

In the content container, when navigating to the next step, we'll consider it completed, and a change in the style of the corresponding label will be reflected. If it returns to the previous step, it should become incomplete again.

To do this, let's create a state that will store the list of completed steps:



const [stepsCompleted, setStepsCompleted] = useState<string[]>([]);

And then, in the handlePressNextStep and handlePressBackButton functions, we implement the logic to add/remove the completed step from the list of steps.

The handlePressNextStep function will receive one more parameter, which will be the currentStep, and to better organize the parameters, let's put it as the first parameter of the function:



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],
  });
};

It's necessary to check before changing the state whether the current step is already in the list to avoid adding duplicate data to the list.

Now let's also add currentStep as the first parameter in the handlePressBackButton function:



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],
  });
};

The action buttons in the content container will look like this:



<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>

Now when navigating to the next step, we add the current step to the list, and when returning a step, we remove it from the list, for example:

We are in the Account Information step, so the steps list will be ['welcome'].

I moved to the Personal Information step, and the list will be ['welcome', 'account'].

I returned to the Account Information step, and the list returned to ['welcome'].

Changing the label style when completing the step

Now that we have a state with the list of completed steps, let's use it to determine if step "X" is present in the list. If it is, the background-color of the StepIndicator Label Wrapper will be "#22c55e", otherwise, it will be "#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>
  );
}

Finished Code

And thus, we have the finished code with all the logic.



// 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>
  );
}

There are several improvements to implement in this little project, but since the focus of this article is on building a horizontal snap scroll with steps, we'll leave the improvements and refactorings for another article.

If you're interested, you can follow the project's improvements through the repository by clicking here.