Aller au contenu principal
Version: 0.0.5 (latest)

Personnalisation

Adaptez l'apparence de Mini-Zoe à votre charte graphique et à vos besoins.

Personnalisation des couleurs​

Couleur de bordure​

Changez la couleur de la bordure du cercle avec borderColor :

<MiniZoe borderColor="#667eea" />

Exemples de palettes :

// Palette moderne
<MiniZoe borderColor="#667eea" backgroundColor="#f0f0ff" />

// Palette nature
<MiniZoe borderColor="#43e97b" backgroundColor="#e8f5e9" />

// Palette sunset
<MiniZoe borderColor="#fa709a" backgroundColor="#fff0f3" />

// Palette dark
<MiniZoe borderColor="#00d4ff" backgroundColor="#1a1a2e" />

Couleur de fond​

Modifiez la couleur de fond du cercle avec backgroundColor :

<MiniZoe backgroundColor="#E8F5E9" />
Contraste

Assurez-vous que la couleur de fond et la couleur de bordure ont un bon contraste pour une meilleure visibilité.

Image personnalisée​

Remplacez le logo par défaut par votre propre image :

<MiniZoe customImage={require('./assets/custom-assistant.png')} />

Recommandations pour l'image​

  • Format : PNG avec transparence
  • Dimensions : 200x200 pixels minimum
  • Poids : < 50 KB pour de meilleures performances
  • Style : Simple et reconnaissable

Exemple avec image locale :

import customAvatar from './assets/avatar.png';

<MiniZoe customImage={customAvatar} />

Exemple avec image depuis une URL :

<MiniZoe
  customImage={{ uri: 'https://example.com/avatar.png' }}
/>

Positionnement​

Position verticale​

Ajustez la distance depuis le bas de l'écran :

<MiniZoe bottomOffset={40} />

Cas d'usage :

  • Navigation tab bar : Augmentez bottomOffset pour éviter la superposition
  • Floating action button : Ajustez pour éviter les conflits
  • Keyboard : Gérez la position quand le clavier est visible

Position horizontale​

Modifiez la distance depuis la droite :

<MiniZoe rightOffset={30} />

Position à gauche :

Pour positionner Mini-Zoe à gauche, vous devrez utiliser un style personnalisé (voir section avancée).

Exemples de personnalisation​

Style Material Design​

<MiniZoe
  borderColor="#6200ea"
  backgroundColor="#f3e5f5"
  bottomOffset={24}
  rightOffset={24}
  customImage={require('./assets/material-assistant.png')}
/>

Style iOS​

<MiniZoe
  borderColor="#007AFF"
  backgroundColor="#E5F1FF"
  bottomOffset={32}
  rightOffset={20}
  customImage={require('./assets/ios-assistant.png')}
/>

Style Dark Mode​

import { useColorScheme } from 'react-native';

function App() {
  const isDark = useColorScheme() === 'dark';

  return (
    <MiniZoe
      borderColor={isDark ? "#00d4ff" : "#667eea"}
      backgroundColor={isDark ? "#1a1a2e" : "#f0f0ff"}
      customImage={
        isDark
          ? require('./assets/assistant-dark.png')
          : require('./assets/assistant-light.png')
      }
    />
  );
}

Style adaptatif selon la plateforme​

import { Platform } from 'react-native';

<MiniZoe
  borderColor={Platform.select({
    ios: '#007AFF',
    android: '#6200ea',
    default: '#667eea'
  })}
  backgroundColor={Platform.select({
    ios: '#E5F1FF',
    android: '#f3e5f5',
    default: '#f0f0ff'
  })}
  bottomOffset={Platform.select({
    ios: 32,
    android: 24,
    default: 20
  })}
/>

Thèmes prédéfinis​

Créez vos propres thèmes réutilisables :

// themes.js
export const miniZoeThemes = {
  default: {
    borderColor: '#FFD700',
    backgroundColor: '#FFF9E6',
    bottomOffset: 20,
    rightOffset: 20
  },
  modern: {
    borderColor: '#667eea',
    backgroundColor: '#f0f0ff',
    bottomOffset: 24,
    rightOffset: 24
  },
  nature: {
    borderColor: '#43e97b',
    backgroundColor: '#e8f5e9',
    bottomOffset: 20,
    rightOffset: 20
  },
  sunset: {
    borderColor: '#fa709a',
    backgroundColor: '#fff0f3',
    bottomOffset: 20,
    rightOffset: 20
  }
};

// App.js
import { miniZoeThemes } from './themes';

<MiniZoe {...miniZoeThemes.modern} />

Responsive Design​

Adaptez Mini-Zoe selon la taille de l'écran :

import { Dimensions } from 'react-native';

function App() {
  const { width, height } = Dimensions.get('window');
  const isSmallScreen = width < 375;

  return (
    <MiniZoe
      bottomOffset={isSmallScreen ? 16 : 24}
      rightOffset={isSmallScreen ? 16 : 24}
    />
  );
}

Personnalisation par contexte​

Selon la page​

import { useRoute } from '@react-navigation/native';

function App() {
  const route = useRoute();

  const getThemeForRoute = (routeName) => {
    switch(routeName) {
      case 'Home':
        return { borderColor: '#667eea', backgroundColor: '#f0f0ff' };
      case 'Profile':
        return { borderColor: '#43e97b', backgroundColor: '#e8f5e9' };
      case 'Settings':
        return { borderColor: '#fa709a', backgroundColor: '#fff0f3' };
      default:
        return { borderColor: '#FFD700', backgroundColor: '#FFF9E6' };
    }
  };

  const theme = getThemeForRoute(route.name);

  return <MiniZoe {...theme} />;
}

Selon l'état de l'app​

function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [hasError, setHasError] = useState(false);

  const borderColor = hasError ? '#ff4444' : isLoading ? '#ffaa00' : '#667eea';
  const backgroundColor = hasError ? '#ffe5e5' : isLoading ? '#fff8e5' : '#f0f0ff';

  return (
    <MiniZoe
      borderColor={borderColor}
      backgroundColor={backgroundColor}
    />
  );
}

Bonnes pratiques​

À faire​

  • Testez sur différents appareils et tailles d'écran
  • Assurez un bon contraste entre bordure et fond
  • Gardez l'image simple et reconnaissable
  • Adaptez le positionnement selon votre UI

À éviter​

  • Images trop détaillées ou complexes
  • Couleurs trop similaires (mauvais contraste)
  • Positionnement qui masque du contenu important
  • Oublier de tester en dark mode

Accessibilité​

Assurez-vous que votre personnalisation reste accessible :

// ✅ Bon contraste
<MiniZoe borderColor="#0066cc" backgroundColor="#e6f2ff" />

// ❌ Mauvais contraste
<MiniZoe borderColor="#cccccc" backgroundColor="#dddddd" />

Prochaines étapes​