expo-lockscreen

expo-lockscreen est un composant React Native qui permet de créer un écran de verrouillage avec un système de déverrouillage par code PIN ou par empreinte digitale. Ce composant utilise Expo pour l'authentification biométrique.

Aperçu

Fonctionnalités

• Authentification par empreinte digitale avec expo-local-authentication.
• Saisie d'un code PIN à 4 chiffres.
• Effet de vibration en cas de saisie incorrecte du PIN.
• Animation d'apparition du composant.
• Affichage d'un message personnalisé pour l'utilisateur connecté.

Installation

Vous pouvez installer ce composant via npm ou yarn :

npm install expo-lockscreen

ou

yarn add expo-lockscreen

Utilisation

Voici un exemple d'utilisation du composant expo-lockscreen :

import React from 'react';
import { View } from 'react-native';
import LockScreen from 'expo-lockscreen';

const App = () => {
  const handleUnlock = () => {
    console.log('App unlocked!');
  };

  const user = {
    displayName: 'John Doe',
    photoURL: 'https://example.com/johndoe.png',
  };

  return (
    <View style={{ flex: 1 }}>
      <LockScreen onUnlock={handleUnlock} user={user} />
    </View>
  );
};

export default App;

Props

• onUnlock (fonction) : Fonction callback appelée lorsque l'utilisateur déverrouille avec succès l'écran. Requis.
• user (objet) : Objet contenant les informations de l'utilisateur connecté (displayName, photoURL). Requis.

Fonctions et Comportements

• Saisie du PIN : L'utilisateur peut saisir un code PIN à 4 chiffres. Si le code est incorrect, l'interface vibre légèrement.
• Authentification biométrique : L'utilisateur peut utiliser son empreinte digitale pour déverrouiller l'écran.
• Animation d'apparition : Le composant apparaît avec une animation fluide de translation et d'opacité.

Personnalisation

Vous pouvez personnaliser le style du composant expo-lockscreen 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: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  profileContainer: {
    alignItems: 'center',
    marginBottom: 20,
  },
  image: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
    borderWidth: 2,
    borderColor: '#fff',
  },
  welcomeText: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  instructionText: {
    fontSize: 16,
    textAlign: 'center',
    color: '#666',
    paddingHorizontal: 20,
  },
  pinDisplay: {
    fontSize: 40,
    marginBottom: 30,
    letterSpacing: 15,
  },
  row: {
    flexDirection: 'row',
    marginBottom: 15,
  },
  button: {
    padding: 20,
    margin: 5,
    borderRadius: 10,
    width: 80,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: '#000',
    fontSize: 24,
  },
  forgotText: {
    color: '#007AFF',
    fontSize: 14,
    marginTop: 20,
    textAlign: 'center',
  },
});

License

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