StyleSheet — qu'est-ce que c'est, création de styles dans React Native

Qu'est-ce que StyleSheet ?

StyleSheet — une API intégrée de React Native pour définir les styles de composants. Contrairement au CSS dans le développement web, RN utilise des objets JavaScript pour décrire les styles. StyleSheet.create — la méthode clé — accepte un objet de style et retourne un objet avec des identifiants numériques.

StyleSheet fait partie du noyau de React Native et ne nécessite pas l'installation de paquets supplémentaires. Selon Meta (2026), 95% des projets React Native utilisent StyleSheet.create pour les styles statiques. Alternatives : styled-components, Emotion, NativeWind (Tailwind pour RN) — mais le StyleSheet intégré reste la norme pour le noyau.

Histoire et évolution

Dans les premières versions de React Native (2015), les styles étaient définis exclusivement comme des objets inline. StyleSheet.create est apparu dans RN 0.4 comme une optimisation. Le concept est issu du CSS : séparez les styles de la logique pour la lisibilité et les performances. Au fil des ans, l'API s'est étendue : absoluteFill, hairlineWidth, flatten ont été ajoutés.

StyleSheet.create vs styles inline

La différence entre StyleSheet.create et les styles inline est cruciale pour les performances. Un style inline est un objet JavaScript ordinaire créé à chaque rendu du composant. StyleSheet.create — un objet créé une fois lors du chargement du module et converti en un ID numérique.

Lors du passage d'un style inline, React Native envoie l'objet entier via le pont JavaScript-Native à chaque fois. Pour un composant avec des styles complexes, cela signifie des dizaines de propriétés transférées à chaque rendu. StyleSheet.create ne passe qu'un identifiant numérique, réduisant la charge du pont.

// StyleSheet.create — approche optimisée
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Style inline — crée un nouvel objet à chaque rendu
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Quand utiliser inline : pour les styles dynamiques qui dépendent de l'état (pressé, sélectionné, actif). Pour les styles statiques, utilisez toujours StyleSheet.create. Règle : statique → create, dynamique → fonction inline.

Mise en page Flexbox avec StyleSheet

Flexbox — le seul mécanisme de mise en page dans React Native (CSS Grid n'est pas supporté, float est absent). StyleSheet.create est utilisé pour décrire les conteneurs flex et leurs éléments enfants. Propriétés principales : flex (coefficient de remplissage), flexDirection (row | column), justifyContent, alignItems.

Par défaut, flexDirection dans React Native est column (dans CSS — row). C'est la première chose à retenir lors du passage du développement web. Tous les composants View sont des conteneurs flex par défaut. Pour centrer un élément, utilisez alignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Important : dans React Native, toutes les tailles sont spécifiées sans unités (juste un nombre). Les pourcentages fonctionnent mais seulement pour la largeur et la hauteur relatives au parent. margin et padding acceptent des nombres. Pour la réactivité, utilisez flex au lieu de pourcentages — c'est plus fiable sur différents écrans.

API StyleSheet : create, flatten, hairlineWidth, absoluteFill

StyleSheet API inclut plusieurs méthodes en plus de create. StyleSheet.flatten fusionne un tableau de styles en un seul objet — utile pour la composition et le passage de styles à des composants tiers. StyleSheet.hairlineWidth retourne la largeur de ligne minimale visible sur l'appareil.

StyleSheet.absoluteFill — un style prédéfini { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Utilisé pour les couches de superposition, les fenêtres modales et le positionnement absolu sur tout l'écran. StyleSheet.absoluteFillObject — la même chose mais sous forme d'objet pour extension.

// flatten — fusionner les styles
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — ligne minimale
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth est utile pour les séparateurs et les bordures — il ressemble toujours à 1 pixel physique quelle que soit la densité de l'écran. Sur les écrans Retina, cela représente 0,5 point logique, sur les écrans normaux — 1 point. N'utilisez pas hairlineWidth pour les éléments qui doivent avoir une taille strictement spécifique.

Mise en page responsive avec Dimensions API

Dimensions API est utilisée avec StyleSheet pour une mise en page responsive sur différentes tailles d'écran. Dimensions.get('window') retourne la largeur et la hauteur de la fenêtre. Pour les mises à jour réactives lors de la rotation de l'écran, utilisez le hook useWindowDimensions de React Native.

Bien que StyleSheet.create ne supporte pas les media queries comme CSS, vous pouvez calculer des valeurs basées sur Dimensions dans create ou utiliser des styles dynamiques via une fonction. Pour les points de rupture, créez des styles séparés pour différentes plages de largeur.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions se met automatiquement à jour lors de la rotation de l'écran et du redimensionnement de la fenêtre sur les tablettes avec Split View. Pour SSR (React Native Web), assurez-vous que Dimensions.get est appelé après le montage du composant pour éviter les divergences entre le serveur et le client.

Organisation des styles dans un projet

L'organisation StyleSheet dans un projet affecte la maintenabilité et la réutilisation du code. Trois approches : styles locaux dans le composant (styles.js à côté du composant), styles globaux (theme.js avec des constantes de couleur, d'espacement, de typographie) et styles modulaires via composition.

Structure recommandée : theme.js avec des constantes de couleur, taille et typographie ; Component.styles.js à côté de chaque composant pour ses styles spécifiques ; StyleSheet.flatten pour combiner les styles de base et spécifiques. Pour les grands projets, utilisez un Design System avec génération de thème.

// theme.js — constantes globales
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Avantages de l'organisation modulaire : source unique de vérité pour les couleurs et les espacements, refactoring simplifié (changez primary — tous les boutons se mettent à jour), réutilisation des styles via flatten, lisibilité et prévisibilité du code. Pour les projets TypeScript, ajoutez des types pour le thème via declare module.