Comment nous avons préparé Papillon à l'iPhone Duo

L'iPhone Duo est le nouvel iPhone pliable d'Apple, sorti en septembre 2026. Fermé, c'est un iPhone classique. Ouvert, il devient presque une tablette. Et une app peut passer de l'un à l'autre en une seconde, sans même se fermer.

Ça parait anodin, mais pour la plupart des apps, c'est un vrai casse-tête. Pour Papillon, il n'y avait quasiment rien à faire le jour de la sortie.

Mais comment en est-on arrivé là ?

Une app pensée pour un seul écran

Depuis ses débuts, Papillon a été pensée pour une seule chose : un téléphone tenu à la verticale, que ce soit sur iPhone ou sur Android.

Il existait bien une version iPad, mais soyons honnêtes : elle n'était pas vraiment utilisable. L'app s'étirait sur toute la largeur de l'écran, les listes faisaient des kilomètres de large, et certains écrans se coupaient carrément au mauvais endroit. D'ailleurs, on l'avait activée, puis désactivée, puis réactivée... sans jamais vraiment prendre le temps de s'en occuper.

Le problème, c'est que chaque écran supposait qu'il connaissait la taille du téléphone. Et le jour où cette taille change, tout casse.

Juin : un workshop à Londres

Vince Linise et Lucas Lavajo

En juin, Lucas et moi avons eu la chance de participer à un workshop organisé par Apple à Londres. L'objectif était de découvrir les nouveautés d'iOS 27 et de préparer nos apps à ce qui allait arriver.

Grâce à ce workshop, on a pu apprendre de nombreuses choses, notamment sur les nouvelles interfaces d'iOS et sur la façon dont Apple imagine les apps de demain. Mais un message revenait sans arrêt : les apps doivent pouvoir changer de taille à tout moment. Plus question de supposer qu'un iPhone fait toujours la même largeur.

Alors, dès notre retour, j'ai commencé à rendre Papillon redimensionnable. La première étape était très simple : un petit outil permettant de regarder la largeur de la fenêtre, et de savoir si on est sur un « grand » écran ou non.

const useResizable = () => {
  const { width } = useWindowDimensions();
  const isLarge = width >= 600;
 
  return { isLarge };
};

Avec ça, l'accueil pouvait déjà passer sur deux colonnes quand il y a de la place. Et comme la largeur est relue en permanence, l'app s'adapte d'elle-même dès que la fenêtre change.

const { isLarge } = useResizable();
 
<FlatList
  data={widgets}
  numColumns={isLarge ? 2 : 1}
/>

Ce n'était pas encore parfait, loin de là. Mais pour la première fois, Papillon ne cassait plus quand on changeait la taille de l'écran.

Août : tout redessiner

Tom Hélière, Lucas Lavajo, Rémy Godet et Vince Linise

Une app qui ne casse pas, c'est bien. Une app qui profite vraiment d'un grand écran, c'est mieux.

En août, on s'est donc réunis avec Tom, Lucas et Rémy afin de redessiner les onglets principaux de Papillon, un par un. L'objectif était simple : rendre chaque écran redimensionnable, et enfin compatible avec l'iPad. Pour chaque écran, on s'est posé la même question : qu'est-ce qu'on ferait de toute cette place en plus ?

• Accueil : les widgets se rangent sur plusieurs colonnes, comme un tableau de bord.
• Notes : les moyennes restent à gauche, et les dernières notes s'affichent à droite au lieu d'être en dessous.
• Emploi du temps : sur grand écran, une vue de la semaine entière apparaît, avec une colonne par jour.
• Cartes et connexion : les écrans de cantine et de connexion se centrent au lieu de s'étirer.

Pour les listes, un système de colonnes « en maçonnerie » a été mis en place par Rémy, comme sur Pinterest : chaque carte prend la hauteur dont elle a besoin, et les colonnes se remplissent sans laisser de trous.

L'emploi du temps à la semaine nous a d'ailleurs réservé une petite surprise. Le samedi et le dimanche ne doivent apparaître que si tu as vraiment cours ces jours-là. Sauf que l'app ne charge que quelques semaines à la fois : en passant à la semaine suivante, le samedi disparaissait, et toutes les colonnes changeaient de largeur d'un coup. On a donc décidé qu'une fois qu'un samedi a eu cours, il garde sa colonne jusqu'à la fermeture de l'app.

Août : direction Paris

Quelques semaines après Londres, on a été invités à un nouveau workshop organisé par Apple, cette fois à Paris, avec une vue plutôt sympa sur la tour Eiffel. L'occasion parfaite pour montrer notre travail en cours, et surtout pour avoir l'avis des équipes d'Apple.

On est arrivés avec nos nouveaux écrans sous le bras, plutôt fiers. Les échanges avec les équipes d'Apple nous ont pourtant fait remarquer une chose : nos onglets et nos en-têtes, faits maison, se comportaient bien moins bien que ceux d'iOS dès que la taille de l'écran changeait.

Et c'est là qu'on a compris qu'on se battait contre iOS au lieu de le laisser nous aider.

Août : laisser iOS faire le travail

Dès le retour de Paris, on a donc fait un choix qui allait tout changer : arrêter de dessiner nous-mêmes les barres de navigation.

Jusque-là, les en-têtes et les onglets de Papillon étaient faits maison, en React Native. Ils ressemblaient à ceux d'iOS, mais ce n'étaient pas ceux d'iOS. Et à chaque changement de taille, il fallait recalculer leur position, leur hauteur, leurs marges...

On les a donc remplacés par les vrais composants d'Apple, en SwiftUI, grâce à Expo Router. Le titre et les boutons sont déclarés directement dans la page, et c'est iOS qui s'occupe de les afficher.

<Stack.Title>{t("Tab_Calendar")}</Stack.Title>
 
<Stack.Toolbar placement="left">
  <Stack.Toolbar.Button icon="calendar" onPress={toggleCalendar}>
    {dayLabel}
  </Stack.Toolbar.Button>
</Stack.Toolbar>

Résultat : Papillon a enfin le même feeling que les apps d'Apple, avec les mêmes animations et le même effet de verre. Et ça a tout changé. Et surtout, quand l'écran change de taille, c'est iOS qui redimensionne tout, automatiquement.

Dernier détail : sur un grand écran, le contenu ne doit jamais se coller aux bords ou passer sous l'encoche. Un petit outil calcule donc les marges à gauche et à droite selon l'appareil, et tous les écrans l'utilisent.

export const useSafeHorizontalPadding = (base = 16) => {
  const insets = useSafeAreaInsets();
  return {
    paddingLeft: insets.left + base,
    paddingRight: insets.right + (insets.right > 10 ? 0 : base),
  };
};

Septembre : l'iPhone Duo arrive

On n'a pas eu d'iPhone Duo entre les mains. Mais Xcode permet de le simuler, et de le plier ou le déplier à volonté. On y a donc lancé Papillon, un peu stressés je l'avoue. On l'a ouvert, fermé, rouvert...

Et ça marche !

Fermé, Papillon s'affiche comme sur n'importe quel iPhone. Ouvert, l'accueil passe sur deux colonnes, les notes se mettent côte à côte et l'emploi du temps affiche la semaine entière. Le tout sans redémarrer l'app, en plein milieu de l'utilisation.

Il a quand même fallu faire quelques ajustements :

• Le format : on a ajouté une valeur isTablet qui ne dépend pas du sens de l'écran, pour que l'app ne change pas d'avis en tournant le téléphone.
• Les fonds d'écran : la fenêtre de choix du fond d'écran calculait mal sa largeur sur certains appareils.
• Les devoirs : le sélecteur de semaine des devoirs a été revu pour profiter de toute la largeur.

Au final, quelques lignes de code, là où il aurait surement pu en falloir des milliers.

Conclusion

On aurait pu attendre d'avoir un iPhone Duo pour s'en occuper. Mais grâce au travail entamé dès cet été, l'iPhone Duo n'a presque rien demandé. Et au passage, la version iPad de Papillon est enfin devenue utilisable.

Grâce à la complémentarité de toute l'équipe, Papillon est aujourd'hui une app plus native, plus fluide et surtout prête pour les écrans de demain.

La plus grosse leçon de ce projet, c'est qu'une app ne devrait jamais supposer la taille de son écran. Les téléphones changent, et l'app doit suivre.

Papillon est open-source sur GitHub. Si tu as un iPhone Duo ou un iPad, n'hésite pas à essayer et à nous faire tes retours !