Explorando a API de Vibração do Celular com React Native 📳

Olá, desenvolvedores!

Hoje vamos explorar uma API nativa muito interessante e útil para melhorar a experiência do usuário em nossos aplicativos: a API de Vibração. Usar o feedback tátil (a vibração) pode fornecer confirmações importantes para o usuário, criar alertas ou simplesmente adicionar uma camada de interatividade ao seu app.

O código que analisaremos hoje cria uma interface simples para testar as diferentes funcionalidades da API Vibration do React Native, demonstrando como acionar vibrações simples, longas, com padrões personalizados e como adaptamos o código para funcionar de maneira diferente no Android e no iOS.

Visão Geral do Aplicativo

Este aplicativo é uma “bancada de testes” para a API de vibração. Ele apresenta uma série de botões, cada um acionando um tipo diferente de vibração:

1. Vibrar uma vez: Uma vibração curta e padrão.
2. Vibrar por 10 segundos: Uma vibração contínua com duração definida (disponível apenas no Android).
3. Vibrar com padrão: Vibra seguindo um padrão de pausas e vibrações.
4. Vibrar com padrão repetido: Inicia o padrão de vibração em um loop infinito.
5. Parar vibração: Interrompe qualquer vibração que esteja em andamento.

Analisando os Componentes e a Lógica

Vamos quebrar o código para entender como cada parte funciona.

Componente Separador e a API Platform

JavaScript

import { Platform, View, StyleSheet } from 'react-native';

const Separador = () => {
  return <View style={Platform.OS === 'android' ? estilos.separador : null} />;
};

Antes de entrar no app principal, temos este pequeno componente auxiliar. Sua única função é renderizar uma linha cinza para separar os botões.

A parte mais importante aqui é o uso da API Platform. Com Platform.OS, podemos verificar qual o sistema operacional ('android' ou 'ios') em que o app está rodando. Neste caso, o separador só é estilizado e exibido no Android, demonstrando uma forma simples de criar lógicas ou estilos específicos para cada plataforma.

O Componente Principal App

Constantes e Configurações

JavaScript

const UM_SEGUNDO_EM_MS = 1000;

const PADRAO_VIBRACAO = [
  1 * UM_SEGUNDO_EM_MS, // Pausa por 1s
  2 * UM_SEGUNDO_EM_MS, // Vibra por 2s
  3 * UM_SEGUNDO_EM_MS, // Pausa por 3s
];

No início do componente, definimos constantes para tornar o código mais legível.

• UM_SEGUNDO_EM_MS: Simplesmente para evitar o uso de “números mágicos” (como 1000) no código.
• PADRAO_VIBRACAO: Este é o coração da vibração customizada. É um array de números que representa um padrão de [pausa, vibração, pausa, vibração, ...], onde os valores são em milissegundos. No Android, o padrão começa com uma pausa. No iOS, ele começa com uma vibração.

Funções da API Vibration

A interface do nosso app é composta por botões, cada um chamando um método diferente do objeto Vibration:

1. Vibração Simples JavaScript<Button title="Vibrar uma vez" onPress={() => Vibration.vibrate()} /> Chamar Vibration.vibrate() sem argumentos aciona uma vibração curta e padrão do sistema. É a forma mais simples de usar a API.
2. Vibração com Duração (Apenas Android) JavaScript{Platform.OS === 'android' ? ( <Button title="Vibrar por 10 segundos" onPress={() => Vibration.vibrate(10 * UM_SEGUNDO_EM_MS)} /> ) : null} Aqui vemos o Platform.OS em ação novamente. Este botão só será renderizado se o sistema operacional for Android. Isso ocorre porque o método vibrate com um único argumento numérico para duração só funciona no Android. No iOS, passar um número não tem efeito.
3. Vibração com Padrão JavaScript<Button title="Vibrar com padrão" onPress={() => Vibration.vibrate(PADRAO_VIBRACAO)} /> Passando um array (nosso PADRAO_VIBRACAO) para o método vibrate, criamos uma sequência customizada. O aparelho irá seguir os tempos de pausa e vibração definidos no array.
4. Vibração com Padrão em Loop JavaScript<Button title="Vibrar com padrão repetido" onPress={() => Vibration.vibrate(PADRAO_VIBRACAO, true)} /> Este método aceita um segundo argumento booleano. Se for true, o padrão de vibração será repetido continuamente até que seja cancelado.
5. Cancelar Vibração JavaScript<Button title="Parar vibração" onPress={() => Vibration.cancel()} color="#FF0000" /> O método Vibration.cancel() interrompe imediatamente qualquer vibração que esteja em andamento. É essencial para dar ao usuário o controle de parar uma vibração em loop.

Estilização com StyleSheet

JavaScript

const estilos = StyleSheet.create({
  // ...
});

Como nos exemplos anteriores, o StyleSheet.create é usado para definir a aparência dos componentes. Ele centraliza os estilos em um único lugar e os otimiza para a plataforma.

Código Completo

import React from 'react';
import {
  Button,
  Platform,
  Text,
  Vibration,
  View,
  SafeAreaView,
  StyleSheet,
} from 'react-native';

const Separador = () => {
  return <View style={Platform.OS === 'android' ? estilos.separador : null} />;
};

const App = () => {
  const UM_SEGUNDO_EM_MS = 1000;

  const PADRAO_VIBRACAO = [
    1 * UM_SEGUNDO_EM_MS,
    2 * UM_SEGUNDO_EM_MS,
    3 * UM_SEGUNDO_EM_MS,
  ];

  const DESCRICAO_PADRAO =
    Platform.OS === 'android'
      ? 'espera 1s, vibra 2s, espera 3s'
      : 'espera 1s, vibra, espera 2s, vibra, espera 3s';

  return (
    <SafeAreaView style={estilos.container}>
      <Text style={[estilos.cabecalho, estilos.paragrafo]}>API de Notificação por Vibração</Text>
      <View>
        <Button title="Vibrar uma vez" onPress={() => Vibration.vibrate()} />
      </View>
      <Separador />
      {/* Botão de vibração longa - disponível apenas no Android */}
      {Platform.OS === 'android'
        ? [
            <View key="vibracao-longa">
              <Button
                title="Vibrar por 10 segundos"
                onPress={() => Vibration.vibrate(10 * UM_SEGUNDO_EM_MS)}
              />
            </View>,
            <Separador key="separador-vibracao-longa" />,
          ]
        : null}
      <Text style={estilos.paragrafo}>Padrão: {DESCRICAO_PADRAO}</Text>
      <Button
        title="Vibrar com padrão"
        onPress={() => Vibration.vibrate(PADRAO_VIBRACAO)}
      />
      <Separador />
      <Button
        title="Vibrar com padrão repetido"
        onPress={() => Vibration.vibrate(PADRAO_VIBRACAO, true)}
      />
      <Separador />
      <Button
        title="Parar vibração"
        onPress={() => Vibration.cancel()}
        color="#FF0000"
      />
    </SafeAreaView>
  );
};

const estilos = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 44,
    padding: 8,
  },
  cabecalho: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  paragrafo: {
    margin: 24,
    textAlign: 'center',
  },
  separador: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

export default App;

Conclusão

Este exemplo prático é uma excelente demonstração de como interagir com as APIs nativas do dispositivo através do React Native. Os principais aprendizados aqui são:

• Uso da API Vibration: Aprendemos a executar diferentes tipos de feedback tátil, desde uma simples vibração até padrões complexos e repetitivos.
• Desenvolvimento Multiplataforma: Vimos como a API Platform é crucial para lidar com as diferenças de comportamento e funcionalidade entre Android e iOS.
• Controle do Usuário: A importância de fornecer um método para cancelar ações contínuas, como uma vibração em loop, através do Vibration.cancel().

Com esse conhecimento, vocês podem agora adicionar um feedback tátil rico e significativo aos seus aplicativos, melhorando a usabilidade e o engajamento do usuário.