React Native: Navegação por categorias

No desenvolvimento de aplicações móveis, especialmente aquelas que servem como plataformas de e-commerce ou delivery, a capacidade de navegar eficientemente por categorias de produtos ou serviços é fundamental para uma experiência do usuário satisfatória. O React Native, oferece componentes flexíveis como FlatList e SectionList para criar interfaces de usuário ricas e interativas. Vamos explora a implementação de um sistema de navegação por categorias usando React Native, demonstrando como tal funcionalidade pode ser implementada para melhorar significativamente a usabilidade de um aplicativo.

Fundamentação Técnica

A estrutura de um aplicativo que suporta navegação eficiente por categorias envolve a renderização de duas listas principais: uma FlatList para exibir as categorias de forma horizontal na parte superior da tela e uma SectionList para exibir os itens correspondentes a essas categorias abaixo.

Este arranjo permite aos usuários selecionar uma categoria e ver instantaneamente os itens relacionados a essa categoria, melhorando a navegação geral do aplicativo.

Componentes Utilizados

• FlatList: Um componente de lista simples e eficiente para renderizar uma lista horizontal de categorias. Sua propriedade horizontal é utilizada para orientar a lista horizontalmente.
• SectionList: Um componente de lista mais complexo que suporta seções. Cada seção pode representar uma categoria, com os itens dessa categoria sendo renderizados sob ela.
• Pressable: Um componente wrapper para tornar quase qualquer componente tocável, utilizado aqui para selecionar categorias.

Você consegue ter acesso a todo o código nesse link: https://github.com/orodrigogo/section-list-scroll

Implementação

Primeiro passo é definir a estrutura de dados:

const PRODUCTS = [
  {
    title: "Ofertas",
    data: Array.from({ length: 3 }, (_, index) => String(index)),
  },
  {
    title: "Petiscos",
    data: Array.from({ length: 10 }, (_, index) => String(index)),
  },
  {
    title: "Pratos",
    data: Array.from({ length: 10 }, (_, index) => String(index)),
  },
  {
    title: "Sobremesas",
    data: Array.from({ length: 7 }, (_, index) => String(index)),
  },
  {
    title: "Bebidas",
    data: Array.from({ length: 5 }, (_, index) => String(index)),
  },
]

const CATEGORIES = PRODUCTS.map((item) => item.title)

export { PRODUCTS, CATEGORIES }

Agora, o próximo passo é a preparação dos dados e a configuração inicial dos componentes. Aqui está um esboço inicial:

Para os que não sabem como estados funcionam no React sugiro a leitura desse conteúdo:

import { CATEGORIES, PRODUCTS } from "@/utils/data"

export funcion Home() {
	const [category, setCategory] = useState(CATEGORIES[0])
	return (
		<View style={styles.container}>
		  {/* Componentes aqui */}
		</View>
	)
} 

Renderizando Categorias com FlatList

<FlatList
  showHorizontlScrollIndicator={false}
  horizontal
  data={CATEGORIES}
  keyExtractor={(item) => item}
  renderItem={({ item }) => item(
    <Category 
	    titile={item} 
	    isSelected={item===category}
	    onPress={() => setCategory(item)}
	    />
  )}
  style={styles.categories}
  contentContainerStyle={{
	  gap: 12,
	  paddingHorizontal: 32,
	}}
/>

Itens e Categorias com SectionList

<SectionList
  sections={PRODUCTS}
  keyExtractor={(item) => item}
  stickySectionHeadersEnabled={false}
  showVericalScrollIndicator={false}
  contentContainerStyle={styles.sectionContainer}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  )}
/>

Resultado:

A navegação por categorias em aplicativos móveis é uma funcionalidade crucial para manter os usuários engajados e melhorar a acessibilidade dos produtos ou serviços oferecidos. Utilizando FlatList e SectionList do React Native, desenvolvedores podem implementar essa funcionalidade de forma eficiente, proporcionando uma experiência de usuário suave e intuitiva. Este estudo de caso demonstra que, com um pouco de criatividade e conhecimento das ferramentas disponíveis, é possível criar interfaces de usuário que não apenas atendem às necessidades dos usuários, mas também as superam.