@scrinfo/scr-ui-react-native

Une bibliothèque de composants UI moderne et complète pour React Native, conçue pour offrir une expérience de développement fluide avec des composants réutilisables et personnalisables.

🚀 Installation

npm install @scrinfo/scr-ui-react-native
# ou
yarn add @scrinfo/scr-ui-react-native
# ou
pnpm add @scrinfo/scr-ui-react-native

Dépendances requises

Cette bibliothèque nécessite les dépendances suivantes :

npm install @gorhom/bottom-sheet react-native-gesture-handler date-fns @react-native-picker/picker react-native-calendars react-native-svg lucide-react-native react-native-reanimated react-native-tab-view react-native-pager-view react-hook-form @hookform/resolvers zod react-native-toast-message

📦 Configuration

1. Configuration du Provider

Enveloppez votre application avec le ScrUiProvider pour activer le système de thème et les fonctionnalités de la bibliothèque :

import { ScrUiProvider } from '@scrinfo/scr-ui-react-native';

const lightColors = {
  text: '#000000',
  background: '#ffffff',
  primary: '#007AFF',
  primaryText: '#ffffff',
  error: '#FF3B30',
  errorText: '#ffffff',
  muted: '#F2F2F7',
  mutedText: '#8E8E93',
};

const darkColors = {
  text: '#ffffff',
  background: '#000000',
  primary: '#0A84FF',
  primaryText: '#ffffff',
  error: '#FF453A',
  errorText: '#ffffff',
  muted: '#1C1C1E',
  mutedText: '#8E8E93',
};

export default function App() {
  return (
    <ScrUiProvider value={{ colors: { light: lightColors, dark: darkColors } }}>
      {/* Votre application */}
    </ScrUiProvider>
  );
}

2. Configuration des dépendances natives

Assurez-vous d'avoir configuré les dépendances natives requises selon la documentation de chaque package.

🎨 Composants UI

Boutons

Button

Composant de bouton avec plusieurs variantes et tailles.

import { Button } from '@scrinfo/scr-ui-react-native';

// Bouton primaire
<Button title="Confirmer" onPress={() => {}} />

// Bouton avec icône
<Button 
  title="Sauvegarder" 
  icon="save" 
  variant="secondary" 
  size="large" 
  onPress={() => {}} 
/>

// Bouton de chargement
<Button title="Chargement..." loading onPress={() => {}} />

// Bouton arrondi
<Button title="Action" rounded onPress={() => {}} />

Props :

• title (string) : Texte du bouton
• variant : 'primary' | 'secondary' | 'error' | 'muted' (défaut: 'primary')
• size : 'large' | 'medium' | 'small' (défaut: 'medium')
• icon : Icône Lucide à afficher
• loading : État de chargement
• disabled : État désactivé
• rounded : Style arrondi
• reverse : Inverser l'ordre icône/texte
• spaced : Justification space-between

IconButton

Bouton avec uniquement une icône.

import { IconButton } from '@scrinfo/scr-ui-react-native';

<IconButton icon="heart" onPress={() => {}} />

Formulaires

Input

Champ de saisie de base avec support des icônes.

import { Input } from '@scrinfo/scr-ui-react-native';

<Input 
  placeholder="Votre nom" 
  icon="user" 
  value={value} 
  onChangeText={setValue} 
/>

PasswordInput

Champ de saisie pour les mots de passe avec bouton de visibilité.

import { PasswordInput } from '@scrinfo/scr-ui-react-native';

<PasswordInput 
  placeholder="Mot de passe" 
  value={password} 
  onChangeText={setPassword} 
/>

SearchInput

Champ de recherche avec icône de recherche.

import { SearchInput } from '@scrinfo/scr-ui-react-native';

<SearchInput 
  placeholder="Rechercher..." 
  value={query} 
  onChangeText={setQuery} 
/>

NumberInput

Champ de saisie numérique avec contrôles +/-.

import { NumberInput } from '@scrinfo/scr-ui-react-native';

<NumberInput 
  value={count} 
  onChange={setCount} 
  min={0} 
  max={100} 
/>

Select

Sélecteur avec options personnalisables.

import { Select } from '@scrinfo/scr-ui-react-native';

<Select
  items={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
  value={selectedValue}
  onValueChange={setSelectedValue}
  placeholder="Sélectionner une option"
/>

Sélection

Checkbox

Case à cocher avec label.

import { Checkbox } from '@scrinfo/scr-ui-react-native';

<Checkbox 
  label="Accepter les conditions" 
  checked={accepted} 
  onCheckedChange={setAccepted} 
/>

Radio & RadioGroup

Boutons radio pour la sélection unique.

import { RadioGroup, Radio } from '@scrinfo/scr-ui-react-native';

<RadioGroup value={selected} onValueChange={setSelected}>
  <Radio value="option1" label="Option 1" />
  <Radio value="option2" label="Option 2" />
</RadioGroup>

Switch

Interrupteur pour les valeurs booléennes.

import { Switch } from '@scrinfo/scr-ui-react-native';

<Switch 
  value={enabled} 
  onValueChange={setEnabled} 
  label="Activer les notifications" 
/>

Navigation

Tabs

Système d'onglets avec indicateur.

import { Tabs } from '@scrinfo/scr-ui-react-native';

<Tabs
  tabs={[
    { key: 'tab1', title: 'Onglet 1' },
    { key: 'tab2', title: 'Onglet 2' },
  ]}
  activeTab={activeTab}
  onTabChange={setActiveTab}
/>

TabBar

Barre d'onglets pour la navigation.

import { TabBar } from '@scrinfo/scr-ui-react-native';

<TabBar
  tabs={tabs}
  activeTab={activeTab}
  onTabChange={setActiveTab}
/>

Affichage

Avatar

Composant d'avatar avec image ou initiales.

import { Avatar } from '@scrinfo/scr-ui-react-native';

<Avatar 
  source={{ uri: 'https://example.com/avatar.jpg' }} 
  size={50} 
/>

<Avatar 
  name="John Doe" 
  size={50} 
/>

Badge

Badge pour afficher des informations ou des compteurs.

import { Badge } from '@scrinfo/scr-ui-react-native';

<Badge text="Nouveau" variant="primary" />
<Badge text="5" variant="error" />

Tag

Étiquette pour catégoriser du contenu.

import { Tag } from '@scrinfo/scr-ui-react-native';

<Tag text="React Native" color="#61DAFB" />
<Tag text="TypeScript" color="#3178C6" />

Calendrier et Dates

Calendar

Composant de calendrier interactif.

import { Calendar } from '@scrinfo/scr-ui-react-native';

<Calendar
  selectedDate={selectedDate}
  onDateSelect={setSelectedDate}
  minDate={new Date()}
  maxDate={new Date(2025, 11, 31)}
/>

DateTimePicker

Sélecteur de date et heure.

import { DateTimePicker } from '@scrinfo/scr-ui-react-native';

<DateTimePicker
  value={date}
  onChange={setDate}
  mode="datetime"
  placeholder="Sélectionner une date"
/>

Couleurs

ColorPicker

Sélecteur de couleurs personnalisé.

import { ColorPicker } from '@scrinfo/scr-ui-react-native';

<ColorPicker
  value={selectedColor}
  onChange={setSelectedColor}
  colors={['#FF0000', '#00FF00', '#0000FF']}
/>

Menus et Dialogs

DropdownMenu

Menu déroulant avec options.

import { DropdownMenu } from '@scrinfo/scr-ui-react-native';

<DropdownMenu
  trigger={<Button title="Menu" />}
  items={[
    { label: 'Option 1', onPress: () => {} },
    { label: 'Option 2', onPress: () => {} },
  ]}
/>

Menu

Menu contextuel.

import { Menu } from '@scrinfo/scr-ui-react-native';

<Menu
  items={menuItems}
  onItemPress={handleItemPress}
/>

ConfirmationDialog

Dialog de confirmation.

import { ConfirmationDialog } from '@scrinfo/scr-ui-react-native';

<ConfirmationDialog
  visible={showDialog}
  title="Confirmer l'action"
  message="Êtes-vous sûr de vouloir continuer ?"
  onConfirm={handleConfirm}
  onCancel={handleCancel}
/>

Utilitaires

Collapsible

Conteneur pliable.

import { Collapsible } from '@scrinfo/scr-ui-react-native';

<Collapsible title="Section pliable">
  <Text>Contenu caché</Text>
</Collapsible>

Toast

Notifications toast.

import { Toast } from '@scrinfo/scr-ui-react-native';

// Utilisation via le contexte (automatique avec ScrUiProvider)
Toast.show({
  type: 'success',
  text1: 'Succès',
  text2: 'Opération réussie'
});

ThemedText & ThemedView

Composants avec support du thème.

import { ThemedText, ThemedView } from '@scrinfo/scr-ui-react-native';

<ThemedView>
  <ThemedText type="title">Titre</ThemedText>
  <ThemedText type="body">Texte normal</ThemedText>
  <ThemedText type="caption">Texte petit</ThemedText>
</ThemedView>

📝 Formulaires avec React Hook Form

Composants de formulaire

La bibliothèque inclut des composants de formulaire qui s'intègrent parfaitement avec React Hook Form :

import { Form, InputFormField, Button } from '@scrinfo/scr-ui-react-native';
import { useForm } from 'react-hook-form';

function MyForm() {
  const form = useForm();

  return (
    <Form {...form}>
      <InputFormField
        name="email"
        label="Email"
        placeholder="[email protected]"
        icon="mail"
      />
      <Button title="Soumettre" onPress={form.handleSubmit(onSubmit)} />
    </Form>
  );
}

AutoForm

Génération automatique de formulaires basée sur un schéma Zod :

import { AutoForm } from '@scrinfo/scr-ui-react-native';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1, 'Le nom est requis'),
  email: z.string().email('Email invalide'),
  age: z.number().min(18, 'Age minimum 18 ans'),
  newsletter: z.boolean(),
});

function MyAutoForm() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={(data) => console.log(data)}
      submitButtonTitle="Créer le compte"
    />
  );
}

🎨 Système de thème

Couleurs personnalisées

Définissez vos propres couleurs en respectant l'interface Color :

const customColors = {
  text: '#1a1a1a',
  background: '#ffffff',
  primary: '#your-primary-color',
  primaryText: '#ffffff',
  error: '#your-error-color',
  errorText: '#ffffff',
  muted: '#your-muted-color',
  mutedText: '#your-muted-text-color',
};

Support du mode sombre

Le système de thème supporte automatiquement le mode sombre basé sur les préférences système :

<ScrUiProvider 
  value={{ 
    colors: { 
      light: lightColors, 
      dark: darkColors 
    } 
  }}
>
  {/* Votre application */}
</ScrUiProvider>

🔧 Hooks

useScrUi

Hook pour accéder au contexte ScrUi :

import { useScrUi } from '@scrinfo/scr-ui-react-native';

function MyComponent() {
  const { colors, lightColors, darkColors } = useScrUi();
  
  return (
    <View style={{ backgroundColor: colors.primary }}>
      {/* Votre contenu */}
    </View>
  );
}

📱 Icônes

La bibliothèque utilise Lucide React Native pour les icônes. Toutes les icônes disponibles sont accessibles via le composant Icon :

import { Icon } from '@scrinfo/scr-ui-react-native';

<Icon name="heart" size={24} color="#FF0000" />

🚀 Exemples d'utilisation

Exemple complet d'application

import React from 'react';
import { View, ScrollView } from 'react-native';
import { 
  ScrUiProvider, 
  Button, 
  Input, 
  Checkbox, 
  Switch,
  Tabs,
  lightColors,
  darkColors 
} from '@scrinfo/scr-ui-react-native';

export default function App() {
  return (
    <ScrUiProvider value={{ colors: { light: lightColors, dark: darkColors } }}>
      <ScrollView style={{ flex: 1, padding: 20 }}>
        <Button title="Bouton principal" onPress={() => {}} />
        <Input placeholder="Saisir du texte" icon="search" />
        <Checkbox label="Accepter les conditions" />
        <Switch label="Activer les notifications" />
        <Tabs
          tabs={[
            { key: 'home', title: 'Accueil' },
            { key: 'profile', title: 'Profil' },
          ]}
          activeTab="home"
          onTabChange={(tab) => console.log(tab)}
        />
      </ScrollView>
    </ScrUiProvider>
  );
}

📄 Licence

ISC

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.

📞 Support

Pour toute question ou problème, veuillez ouvrir une issue sur le repository GitHub.