react native typing animation

Caractéristiques

• Mouvement fluide

• Personnalisable

• Aucune dépendance

• Rapide, léger et sans images

• Utilise requestAnimationFrame

• Fonctionne avec React Native Web

Installation

• Utilisation de npm : npm install react-native-typing-animation --save

• Utilisation de Yarn : yarn add react-native-typing-animation

Exemple

 import React depuis "react"; import { TypingAnimation } depuis "react-native-typing-animation"; l'exemple de classe étend React.Component {
  render() {return <TypingAnimation />;
  }}

Exemple avancé

 import React depuis "react"; import { TypingAnimation } depuis "react-native-typing-animation"; l'exemple de classe étend React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

Accessoires

• style (Objet) - Styles de conteneurs ; la valeur par défaut est {}

• dotColor (String) - Couleur des points ; la valeur par défaut est #000 (noir)

• dotStyles (Objet) - Styles de points ; la valeur par défaut est {}

• dotRadius (Integer) - Rayon du point ; la valeur par défaut est 2.5

• dotMargin (Integer) - Marge des points, l'espace entre les points ; la valeur par défaut est 3

• dotAmplitude (Integer) - Amplitude du point ; la valeur par défaut est 3

• dotSpeed ​​(Integer) - Vitesse du point, la vitesse de toute la vue d'animation ; la valeur par défaut est 0.15

• dotY (Integer) - Dot y, la coordonnée y de départ ; la valeur par défaut est 6

• dotX (Integer) - Dot x, la coordonnée x du point central ; la valeur par défaut est 12

• show (Boolean) - Visibilité, si toute la vue d'animation est affichée ou non ; la valeur par défaut est true

Réagir au Web natif

La bibliothèque fonctionne avec React Native Web. Vous pouvez voir un exemple fonctionnel ici et le code source est disponible ici. Si vous utilisez create-react-app, il peut être intéressant de copier les fichiers sources de la bibliothèque dans votre application au lieu de l'installer en tant que dépendance pour éviter les problèmes d'alias natifs de réaction. Voir le répertoire /example-rn-web pour ce que je veux dire.

Licence

• MIT

Auteur

N'hésitez pas à me poser des questions sur Twitter @icookandcode !

Crédits

Le travail est basé sur l'article étonnant "Comment utiliser la trigonométrie simple pour créer de meilleurs chargeurs" de Nash Vail.

Contributeurs

• Denis Murage

Soumettez un PR pour contribuer :)

Feuille de route

• Passer de requestAnimationFrame à Animated avec useNativeDriver (PR bienvenus)

• Intégrer avec Gifted Chat

• Tests unitaires (PR bienvenus)

Libérer

Nous utilisons release-it , pour publier, procédez comme suit :

yarn run release:dry
yarn run release

Journal des modifications

• Autoriser la vitesse d'animation à être configurable

• Permettre que la visibilité de la vue soit configurable #22