[Bug] App: redémarrage de l'app lors de la rotation de l'écran

[Kgeek33]

Description du bug

J'ai installé l'app sur ma tablette et lorsque je tourne l'écran, l'app plante

Étapes à reproduire

1. Ouvrir Papillon
2. Tourner l'écran

Comportement attendu

Que ça ne plante pas

Appareil

Redmi Pad SE

Version du système d`exploitation

Android 14 (HyperOS 1.0)

Version

7.2

Environnement

Application native Android

Source de l'application

Github

Service scolaire

🦋 Pronote

Captures d'écran / vidéo

Screenrecorder-2024-10-29-15-06-52-714.mp4

Contexte supplémentaire

Avant, sur les versions < 7.3 :
Xiaomi à généré les logs suivants lors du plantage, si ça peut aider :

[NathxnAzuur]

je crois que c'est parce que papillon a été développé pour etre en mode portrait mais pas en mode paysage donc ça ne marche pas

[Kgeek33]

En fait, ça marche en mode paysage. C'est au moment où je fais la rotation que l'app plante
Je vais (re)faire la vidéo

[Kgeek33]

Screenrecorder-2024-10-02-17-16-34-780.mp4

[Kgeek33]

Papillon ressemble à ça en mode paysage :

[NathxnAzuur]

aaaaah ook
je savais pas qu'ils avaient design une interface pour tablette

[NathxnAzuur]

Papillon ressemble à ça en mode paysage :

il faudrait qu'ils fassent la meme interface en mode portrait pour le mode paysage

[Kgeek33]

Papillon ressemble à ça en mode paysage :

il faudrait qu'ils fassent la meme interface en mode portrait pour le mode paysage

Oui vrmt

[ecnivtwelve]

Papillon ressemble à ça en mode paysage

Oula étrange, il doit normalement y avoir le mode "écran large" avec la navigation complète sur le coté :
(cf. les screenshots App Store)

[Gabriel29306]

On voit bien la configuration "écran large" en mode portrait, et en mode paysage c'est pas bon. Faudrait voir pk

[Kgeek33]

On voit bien la configuration "écran large" en mode portrait, et en mode paysage c'est pas bon. Faudrait voir pk

Je pense que le mode paysage est appliqué en mode portrait et inversement...
À vérifier

[LeGeek01]

Le crash report que tu as mentionné arrive quand l'appli est restaurée d'un état d'arrêt en arrière plan, c'est à dire quand l'appli est ouverte alors qu'elle n'a pas été fermée dans le gestionnaire d'activité et que l'économiseur d'android la ferme

J'ai tenté un fix sur le play store qui n'a pas marché, il faut que je regardes plus en profondeur

[LeGeek01]

Papillon ressemble à ça en mode paysage

Oula étrange, il doit normalement y avoir le mode "écran large" avec la navigation complète sur le coté :
(cf. les screenshots App Store)

Ouais, tu parles d'un iPad, la il te parle d'une tablette Android 🤡

[LeGeek01]

le bug décrit dans la stack trace j'ai tenté un fix sur la version que j'ai publiée sur le play store, s'il fonctionne je ferais une pr

[Kgeek33]

J'ai plus le plantage mais ça redémarre l'app sur "Bienvenue sur Papillon !"

[LeGeek01]

avec le choix du compte ?

[Kgeek33]

Oui c'est ça

[LeGeek01]

Ça ?

[Kgeek33]

Oui

[Gabriel29306]

Donc déjà c'est "moins pire", t'as pas besoin de redémarrer l'app

[Kgeek33]

Oui, c'est plus un plantage, c'est déjà ça
Maintenant, quand on tourne l'écran d'une tablette, il faut que ça reste sur la page où on est :)

[Kgeek33]

Vidéo :

Screenrecorder-2024-10-29-15-06-52-714.mp4

[Gabriel29306]

C'est bizarre car en mode portrait il y a une "présentation paysage" (avec la nav bar sur le côté) et en paysage, on a une "présentation portarait" (avec la nav en bas)

[Kgeek33]

Oui, je vais tout refaire sur les moyens de détecter les tablettes
En ce moment, ça détecte que t'es une tablette quand une largeur de l'écran > 600...

[Gabriel29306]

Tu peux utiliser Device.deviceType de la lib expo-device (déjà utilisée dans Papillon).

import * as Device from 'expo-device';

const isTablet = Device.deviceType == "TABLET";

[Kgeek33]

Ah super merci, je n'y avais pas pensé
J'allais calculer la diagonale de l'écran et tout ça 😂

[LeGeek01]

Tu peux utiliser Device.deviceType de la lib expo-device (déjà utilisée dans Papillon).

import * as Device from 'expo-device';

const isTablet = Device.deviceType == "TABLET";

ça marche quand t'es en orientation portrait ? parce que le but est d'inverser ce qu'il se passe et non de faire un affichage paysage en permanence

[Gabriel29306]

Ah super merci, je n'y avais pas pensé
J'allais calculer la diagonale de l'écran et tout ça 😂

Alors...
Moi j'ai essayé de calculer le rayon des coins de l'écran des appareils.
J'ai réussi à trouver la taille de l'écran mais pas la taille sans les coins

[Kgeek33]

Moi, sans utiliser la bibliothèque, je détecte le mode paysage comme ceci :

const dims = Dimensions.get("screen");
const tabletWidth = dims.width;
const tabletHeight = dims.height;
const tabletDiagl = (tabletWidth / tabletHeight) * 10;
const tablet = tabletDiagl >= 6.9;

[Gabriel29306]

Ah, moi chatgpt m'a fait utilisé le DPI (Dimensions.get renvoie des données en pixels)

import { Dimensions, PixelRatio } from 'react-native';

const { width: screenWidth, height: screenHeight } = Dimensions.get('screen');
const pixelDensity = PixelRatio.get();

const screenDiagonalInInches = Math.sqrt(screenWidth ** 2 + screenHeight ** 2) / dpi;

[Kgeek33]

Alors... 😂
Les 2 premières lignes, ça va
La 3ème ligne, ça commence à devenir flou
La dernière ligne, ohlala j'suis perdu 😂😂

[Gabriel29306]

Alors... 😂
Les 2 premières lignes, ça va
La 3ème ligne, ça commence à devenir flou
La dernière ligne, ohlala j'suis perdu 😂😂

Alors la 3 eme retourne la densité de l'écran.
Et la dernière c'est le théorème de Pythagore avec la densité.

[Kgeek33]

Ah oui d'accord, là je comprends mieux
Je vais tester tout à l'heure les codes proposées et je vous dis qui est le plus favorable
J'en profiterai d'ailleurs pour annuler le rewrite de la page d'accueil qui est complètement buggé

[Kgeek33]

Alors après test, tes codes @Gabriel29306 fonctionnent, mais ne permettent pas de différencier entre le mode portrait et paysage

Mais le code que je vous ai envoyé permet bien de différencier entre les différentes orientations

[Gabriel29306]

Pour le mode paysage, tu cherches un peu loin,
Juste vérifier si la largeur est supérieure à la hauteur:

import { Dimensions } from 'react-native';

const dims = Dimensions.get("screen");
const tabletWidth = dims.width;
const tabletHeight = dims.height;

const landscape = tabletWidth > tabletHeight;

[Kgeek33]

Pour le mode paysage, tu cherches un peu loin, Juste vérifier si la largeur est supérieure à la hauteur:

import { Dimensions } from 'react-native';

const dims = Dimensions.get("screen");
const tabletWidth = dims.width;
const tabletHeight = dims.height;

const landscape = tabletWidth > tabletHeight;

Ah oui ça peut être intéressant ! Merci du conseil