Adicionar Comentários ao Seu Aplicativo React Native

Forneça ao seu agente de codificação o contexto do FastComments que ele precisa - widgets, configuração, SSO seguro, a API REST e os SDKs:

npx skills add fastcomments/skills

Funciona com Claude Code, Codex, Cursor, Copilot, Gemini e todos os outros agentes que o skills CLI suporta.

npm install fastcomments-react-native-sdk --save

Comentários encadeados ao vivo com avatares, respostas aninhadas, votos e o editor de texto rico integrado, além de um tema escuro e um preset de chat ao vivo (mostrado aqui renderizado via react-native-web):

Comentários ao Vivo

Tema Escuro

Chat ao Vivo

Editor de Texto Rico

Esta biblioteca usa react-native-enriched para edição de texto rico, que proporciona uma poderosa experiência de edição WYSIWYG. O mesmo editor alimenta iOS, Android e a web (via react-native-web), então o editor se comporta de forma consistente em todas as plataformas com uma única implementação.

O react-native-enriched requer a React Native New Architecture (Fabric) em nativo (padrão desde o RN 0.76, opcional no RN 0.72-0.75), e um bundler que resolva as condições de exports de pacotes. Este SDK é desenvolvido e testado com RN 0.81 / React 19. O mesmo editor também roda na web através do react-native-web; o build web do editor enriched ainda está marcado como experimental upstream.

Widgets

O SDK inclui três widgets, espelhando o FastComments Android SDK:

• FastCommentsLiveCommenting - comentários encadeados com votos, respostas, paginação, menções, notificações e atualizações ao vivo.
• FastCommentsLiveChat - um preset de chat sobre o mesmo motor: mensagens cronológicas com as novas na parte inferior, o editor abaixo da lista, uma faixa de cabeçalho ao vivo (ponto de conexão + contagem de usuários), histórico infinito carregado ao rolar para cima, rolagem automática para novas mensagens, sem votos ou encadeamento de respostas. Cada preset pode ser sobrescrito via config.
• FastCommentsFeed - um feed social com editor de posts, mídia, reações, seguidores e banners ao vivo de novos posts.

<FastCommentsLiveChat config=\{{ tenantId: 'demo', urlId: 'my-room' }}/>

Temas

A aparência padrão é gerada a partir de um conjunto de tokens de design semânticos (FastCommentsTheme): cores, espaçamento, raio, tamanhos de fonte, pesos de fonte e tamanhos de avatar. Passe sobrescritas parciais de tokens (tipados como FastCommentsThemeOverrides) através da prop theme em qualquer widget e toda a árvore de estilos será reestilizada de forma consistente:

<FastCommentsLiveCommenting config={config} theme=\{{ colors: { primary: '#FF5500' } }}/>

O modo escuro está a um conjunto de tokens de distância:

import { getDarkTheme } from 'fastcomments-react-native-sdk';

    <FastCommentsLiveCommenting config={config} theme={getDarkTheme()}/>

A prop styles ainda aceita uma árvore bruta IFastCommentsStyles para controle cirúrgico. Quando theme e styles são fornecidos, os estilos explícitos vencem sobre a árvore tematizada; quando apenas styles é fornecido, ele substitui totalmente os padrões (o comportamento original, então integrações e skins existentes não são afetadas). setupDarkModeSkin está obsoleto em favor da prop theme.

Opções de Configuração

Esta biblioteca visa suportar todas as opções de configuração definidas em fastcomments-typescript, assim como a implementação web.

Além dessas, o React Native adiciona algumas opções específicas do SDK via FastCommentsRNConfig:

• hideTopBar - oculta a faixa de usuário logado / sino de notificações exibida acima do editor.
• usePressToEdit - pressione e segure um comentário para abrir seu menu.
• disableDownVoting - oculta os botões de voto negativo.
• renderCommentInline - renderiza as informações do comentarista dentro do mesmo bloco HTML do conteúdo do comentário.
• renderLikesToRight - move a área de voto/curtida para a direita do comentário em vez de abaixo dele.
• renderDateBelowComment - renderiza a data abaixo do comentário.
• showLiveStatus - exibe a faixa de cabeçalho estilo chat "Live" + contagem de usuários acima dos comentários.
• useInlineSubmitButton - renderiza o botão de envio como um ícone dentro do editor.
• countAboveToggle - com useShowCommentsToggle, quantos comentários renderizam acima do botão "Show Comments".
• preserveFeedScrollPosition - o FastCommentsFeed lembra sua posição de rolagem entre desmontagem/remontagem (padrão true).

Conceitos do FastComments

Os principais conceitos para começar são tenantId e urlId. O tenantId é o identificador da sua conta FastComments.com. O urlId é onde as threads de comentários serão vinculadas. Pode ser uma URL de página, ou um id de produto, um id de artigo, etc.

Localização

Todo texto voltado ao usuário nesses widgets (rótulos de botões, placeholders, estados vazios, datas relativas como "5 minutos atrás", mensagens de erro, etc.) é controlado pelo servidor. Os componentes não têm strings em inglês fixas no código; eles renderizam as traduções que o FastComments fornece para o locale solicitado.

Para solicitar um locale, defina locale na sua configuração:

const config = {
    tenantId: 'your-tenant-id',
    urlId: 'some-page',
    locale: 'de_de', // de_de, fr_fr, ja_jp, es_es, etc.
};

Quando nenhum locale é definido, o FastComments fornece o idioma padrão do tenant.

Editando o texto: as traduções são gerenciadas no seu painel do FastComments, não neste SDK. Para alterar a redação, sobrescrever o texto padrão ou adicionar um idioma, edite as traduções da sua conta no painel - a alteração é capturada pelos widgets automaticamente, sem necessidade de lançamento do app. O SDK não inclui fallbacks em inglês, então qualquer chave que você apagar no painel renderizará vazia; mantenha as chaves preenchidas para cada locale que você suporta.

Notificações do Usuário

O FastComments suporta notificações para muitos cenários. As notificações são configuráveis, podem ser desativadas globalmente ou no nível de notificação/comentário, e suportam assinaturas no nível de página para que os usuários possam se inscrever em threads de uma página ou artigo específico.

Por exemplo, é possível usar Secure SSO para autenticar o usuário e então periodicamente consultar notificações não lidas e enviá-las ao usuário.

Veja o exemplo AppNotificationSecureSSO para saber como obter e traduzir notificações não lidas do usuário.

Navegador de Gifs

Por padrão, nenhuma seleção de imagem ou gif está habilitada. Veja example/src/AppCommentingImageSelection.tsx para saber como suportar uploads de imagens e gifs. Há um Navegador de Gifs que anonimiza buscas e imagens fornecido nesta biblioteca, você simplesmente precisa usá-lo.

Desempenho

Por favor, abra um ticket com um exemplo para reprodução, incluindo o dispositivo usado, se você identificar quaisquer problemas de desempenho. Desempenho é um cidadão de primeira classe em todas as bibliotecas do FastComments.