Wrapper SafeAreaView, patterns ScrollView, KeyboardAvoidingView et conventions de padding d'écran.

Mise en page d'écran

ScaleRocket Mobile utilise un composant ScreenLayout qui gère les zones sûres, le défilement et l'évitement du clavier pour que vous puissiez vous concentrer sur le contenu de l'écran.

Écran de base

import { ScreenLayout } from "@/components/ui/ScreenLayout";

export default function ProfileScreen() {
  return (
    <ScreenLayout>
      <Text>Profile content goes here</Text>
    </ScreenLayout>
  );
}

Cela enveloppe votre contenu dans un SafeAreaView avec un padding horizontal cohérent (16px) et une couleur de fond.

SafeAreaView

Chaque écran doit respecter la zone sûre de l'appareil (encoche, barre d'état, indicateur home) :

import { SafeAreaView } from "react-native-safe-area-context";

export default function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Le contenu évite l'encoche et l'indicateur home */}
    </SafeAreaView>
  );
}

Le composant ScreenLayout gère cela automatiquement. Si vous construisez un écran personnalisé, utilisez toujours react-native-safe-area-context au lieu du SafeAreaView intégré de React Native.

Pattern ScrollView

Pour les écrans dont le contenu peut déborder, ScreenLayout utilise ScrollView :

<ScreenLayout scroll>
  <Text>Section 1</Text>
  <Text>Section 2</Text>
  <Text>Section 3</Text>
  {/* Le contenu défile quand il dépasse la hauteur de l'écran */}
</ScreenLayout>

Implémentation manuelle :

import { ScrollView } from "react-native";

<SafeAreaView style={{ flex: 1 }}>
  <ScrollView
    contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
    showsVerticalScrollIndicator={false}
    keyboardShouldPersistTaps="handled"
  >
    {children}
  </ScrollView>
</SafeAreaView>

Astuce : Définissez toujours keyboardShouldPersistTaps="handled" pour que le tap sur un bouton fonctionne au premier appui quand le clavier est ouvert.

KeyboardAvoidingView

Pour les écrans avec des formulaires, le clavier peut couvrir les champs. Utilisez KeyboardAvoidingView :

import { KeyboardAvoidingView, Platform } from "react-native";

<ScreenLayout>
  <KeyboardAvoidingView
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    style={{ flex: 1 }}
  >
    <Input label="Email" value={email} onChangeText={setEmail} />
    <Input label="Password" secureTextEntry value={pw} onChangeText={setPw} />
    <Button title="Sign In" onPress={handleSignIn} />
  </KeyboardAvoidingView>
</ScreenLayout>

Plateforme	Comportement	Pourquoi
iOS	`"padding"`	Ajoute du padding pour pousser le contenu vers le haut
Android	`"height"`	Redimensionne la hauteur de la vue

Conventions de padding

ScaleRocket Mobile utilise un espacement cohérent :

const SPACING = {
  screenPadding: 16,    // Padding horizontal de l'écran
  sectionGap: 24,       // Espace entre les sections
  cardPadding: 16,      // Padding intérieur des cartes
  inputGap: 16,         // Espace entre les champs de formulaire
  bottomSafe: 32,       // Padding supplémentaire en bas des scroll views
};

Écrans avec FlatList

Pour les écrans avec des listes, utilisez FlatList au lieu de ScrollView :

import { FlatList } from "react-native";

<SafeAreaView style={{ flex: 1 }}>
  <FlatList
    data={items}
    renderItem={({ item }) => <ItemCard item={item} />}
    keyExtractor={(item) => item.id}
    contentContainerStyle={{ padding: 16 }}
    ItemSeparatorComponent={() => <View style={{ height: 12 }} />}
  />
</SafeAreaView>

Important : Ne jamais imbriquer un FlatList dans un ScrollView. Utilisez ListHeaderComponent et ListFooterComponent à la place.

Props du composant

Prop	Type	Défaut	Description
`scroll`	`boolean`	`true`	Activer le ScrollView
`padding`	`number`	`16`	Padding horizontal
`safeArea`	`boolean`	`true`	Envelopper dans SafeAreaView
`backgroundColor`	`string`	bg du thème	Couleur de fond de l'écran
`children`	`ReactNode`	—	Contenu de l'écran

Mise en page d'écran

On this page