react native typing animation

Características

• Movimiento suave

• Personalizable

• Sin dependencias

• Rápido, ligero y sin imágenes.

• Utiliza requestAnimationFrame

• Funciona con React Native Web

Instalación

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

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

Ejemplo

 importar React desde "react"; importar { TypingAnimation } desde "react-native-typing-animation"; el ejemplo de clase extiende React.Component {
  render() {return <TypingAnimation />;
  }}

Ejemplo avanzado

 importar React desde "react"; importar { TypingAnimation } desde "react-native-typing-animation"; el ejemplo de clase extiende React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

Accesorios

• style (Objeto) - Estilos de contenedor; el valor predeterminado es {}

• dotColor (Cadena) - Color de punto; el valor predeterminado es #000 (negro)

• dotStyles (Objeto): estilos de puntos; el valor predeterminado es {}

• dotRadius (Entero) - Radio del punto; el valor predeterminado es 2.5

• dotMargin (Entero) - Margen de puntos, el espacio entre puntos; el valor predeterminado es 3

• dotAmplitude (Entero) - Amplitud del punto; el valor predeterminado es 3

• dotSpeed ​​(Entero) : velocidad del punto, la velocidad de toda la vista de animación; el valor predeterminado es 0.15

• dotY (Entero) - Punto y, la coordenada y inicial; el valor predeterminado es 6

• dotX (Entero) - Punto x, la coordenada x del punto central; el valor predeterminado es 12

• show (booleano) : visibilidad, si se muestra o no la vista completa de la animación; el valor predeterminado es true

Reaccionar web nativa

La biblioteca funciona con React Native Web. Puede ver un ejemplo funcional aquí y el código fuente está disponible aquí. Si está utilizando create-react-app, puede que valga la pena copiar los archivos fuente de la biblioteca en su aplicación en lugar de instalarlos como una dependencia para evitar problemas de alias nativos de reacción. Consulte el directorio /example-rn-web para saber lo que quiero decir.

Licencia

• MIT

Autor

¡No dudes en hacerme preguntas en Twitter @icookandcode!

Créditos

El trabajo se basa en el sorprendente artículo "Cómo se puede utilizar la trigonometría simple para crear mejores cargadores" de Nash Vail.

Colaboradores

• Dennis Murage

Envía un PR para contribuir :)

Hoja de ruta

• Pasar de requestAnimationFrame a Animated con useNativeDriver (se aceptan relaciones públicas)

• Integrar con Gifted Chat

• Pruebas unitarias (RP bienvenidos)

Liberar

Usamos release-it , para liberar hacemos lo siguiente:

yarn run release:dry
yarn run release

Registro de cambios

• Permitir que la velocidad de la animación sea configurable

• Permitir que la visibilidad de la vista sea configurable #22