expo-otp

expo-otp est un composant React Native Expo simple et personnalisable pour la gestion d'entrée de code OTP (One-Time Password) avec prise en charge du collage depuis le presse-papier.

Installation

Vous pouvez installer ce package via npm ou yarn :

npm i expo-otp-component

ou

yarn add expo-otp-component

Utilisation

Voici un exemple simple d'utilisation du composant OtpInput :

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import OtpInput from 'expo-otp';

const App = () => {
  const [otp, setOtp] = useState('');

  const handleOtpChange = (otp) => {
    setOtp(otp);
    console.log('OTP:', otp);
  };

  return (
    <View>
      <Text>Entrez le code OTP :</Text>
      <OtpInput length={6} onOtpChange={handleOtpChange} />
      <Text>Votre code OTP est : {otp}</Text>
    </View>
  );
};

export default App;

Props

• length (nombre) : Nombre de cases OTP (ex: 4, 6). Requis.
• onOtpChange (fonction) : Callback qui retourne le code OTP complet lorsque tous les champs sont remplis. Requis.

Fonctions et Comportements

• Focus Automatique : Chaque champ se concentre automatiquement sur le suivant lorsque l'utilisateur saisit un chiffre.
• Suppression avec la Touche Backspace : La touche Backspace revient au champ précédent si celui-ci est vide.
• Collage à partir du Presse-papier : L'utilisateur peut coller un code complet depuis le presse-papier en appuyant sur le bouton "Paste OTP".

Personnalisation

Vous pouvez personnaliser le style du composant OtpInput en modifiant les styles par défaut dans le fichier styles.

Exemple de Style

Voici un exemple de structure de style utilisée dans le composant :

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginVertical: 20,
  },
  inputsWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  inputContainer: {
    marginHorizontal: 5,
  },
  input: {
    width: 45,
    height: 45,
    borderWidth: 1,
    borderColor: '#fff',
    backgroundColor: '#F5F6FA',
    textAlign: 'center',
    fontSize: 18,
    borderRadius: 10,
    padding: 0,
  },
  pasteButton: {
    marginBottom: 10,
    backgroundColor: '#4CAF50',
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 5,
  },
  pasteButtonText: {
    color: '#fff',
    fontSize: 16,
  },
});

License

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.