65 add avatar component

[johan-bouguermouh]

Documentation du composant Avatar

Props

• uriImage (string) : L'URL de l'image à afficher dans l'avatar.
• isPressable (bool) : Indique si l'avatar est cliquable ou non.
• onPressHandler (function) : La fonction à appeler lorsque l'avatar est cliqué (nécessaire si isPressable est true).
• size (number) : La taille de l'avatar (largeur et hauteur).

Exemple d'utilisation

import React from 'react';
import { View } from 'react-native';
import Avatar from './Avatar';

export default function App() {
  const handlePress = () => {
    console.log('Avatar cliqué!');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* Avatar cliquable */}
      <Avatar
        uriImage="https://example.com/image.jpg"
        isPressable={true}
        onPressHandler={handlePress}
        size={50}
      />

      {/* Avatar non cliquable */}
      <Avatar
        uriImage="https://example.com/image.jpg"
        isPressable={false}
        size={50}
      />
    </View>
  );
}

Explication du code

• Le composant Avatar utilise les props pour déterminer l'apparence et le comportement de l'avatar.
• Si isPressable est true, l'avatar est rendu à l'intérieur d'un TouchableOpacity pour gérer les clics.
• La taille de l'avatar est déterminée par la prop size, et la bordure est calculée proportionnellement à cette taille.
• Le composant utilise des styles pour s'assurer que l'avatar est centré et a une bordure arrondie.

En incluant cette documentation dans votre Merge Request, vous aiderez les autres développeurs à comprendre comment utiliser votre composant Avatar et à l'intégrer correctement dans leur code.