react native typing animation

Características

• Movimento suave

• Personalizável

• Sem dependências

• Rápido, leve e sem imagens

• Usa requestAnimationFrame

• Funciona com React Native Web

Instalação

• Usando npm: npm install react-native-typing-animation --save

• Usando Yarn: yarn add react-native-typing-animation

Exemplo

 import React from "react";import { TypingAnimation } from "react-native-typing-animation";class Exemplo estende React.Component {
  render() {return <TypingAnimation />;
  }}

Exemplo Avançado

 import React from "react";import { TypingAnimation } from "react-native-typing-animation";class Exemplo estende React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

Adereços

• style (Objeto) - Estilos de contêiner; o padrão é {}

• dotColor (String) - Cor do ponto; o padrão é #000 (preto)

• dotStyles (Object) - Estilos de pontos; o padrão é {}

• dotRadius (Integer) - Raio do ponto; o padrão é 2.5

• dotMargin (Integer) - margem do ponto, o espaço entre os pontos; o padrão é 3

• dotAmplitude (Integer) - Amplitude do ponto; o padrão é 3

• dotSpeed ​​(Integer) - Velocidade do ponto, a velocidade de toda a visualização da animação; o padrão é 0.15

• dotY (Integer) - Ponto y, a coordenada y inicial; o padrão é 6

• dotX (Inteiro) - Ponto x, a coordenada x do ponto central; o padrão é 12

• show (Boolean) - Visibilidade, se toda a visualização da animação é exibida ou não; o padrão é true

Reagir Web Nativa

A biblioteca funciona com React Native Web. Você pode ver um exemplo prático aqui e o código fonte está disponível aqui. Se você estiver usando create-react-app, pode valer a pena copiar os arquivos de origem da biblioteca em seu aplicativo em vez de instalá-lo como uma dependência para evitar problemas de alias do react-native. Veja o diretório /example-rn-web para saber o que quero dizer.

Licença

• MIT

Autor

Sinta-se à vontade para me fazer perguntas no Twitter @icookandcode!

Créditos

O trabalho é baseado no incrível artigo "Como você pode usar trigonometria simples para criar carregadores melhores" de Nash Vail

Colaboradores

• Dennis Murage

Envie um PR para contribuir :)

Roteiro

• Mude de requestAnimationFrame para Animated com useNativeDriver (PRs bem-vindos)

• Integrar com bate-papo para superdotados

• Testes unitários (PRs bem-vindos)

Liberar

Usamos release-it , para liberar faça o seguinte:

yarn run release:dry
yarn run release

Registro de alterações

• Permitir que a velocidade da animação seja configurável

• Permitir que a visibilidade da visualização seja configurável #22