React-Native problème avec flex et affichage

As-tu regardé le dossier + la vidéo que je t'ai envoyé ? :)

Ils vont vraiment d'aider, surtout la vidéo ;)

Sinon, remplace ton View racine par une ScrollView, là on ne peut pas scroller sur ta listview : https://snack.expo.io/SkJjl6kNZ

Pour l'affichage des tags à côté de ton image, il faut juste réorganiser tes éléments et jouer avec les flexbox ;)

Salut,

Les propriétés d'alignement des éléments doivent se trouver sur ton conteneur et non sur tes items ;)
Regarde ce guide et cette excellentre conférence sur le sujet (ça s'applique à CSS, mais les règles sont sensiblement les mêmes avec les stylesheets de react-native).
Il faudrait également que tu donnes une largeur fixe à ton container (la largeur de ta card). Joue avec le flex-wrap sur le container, et le align-self sur les items.
Je ne sais pas si react-native gère dynamiquement le placement d'éléments, peut-être devras-tu créer un layout un peu plus complexe en fonction du nombre et de la dimension de tes items.

@betaWeb merci de ta réponse ! j'ai réussi effectivement merci de tes conseils ! par contre comme tu l'avais prédis il m'a fallu un layout bien plus complexe que celui auparavant.

Seul problème maintenant ayant refait 15x mon layout : https://snack.expo.io/ByQDd3yVZ celui-ci rend pas mal sauf que je souhaiterais afficher les tags à coté de l'avatar et en dessous de la ville. mais je suis un peu perdu entre tous ces flex row column et cie du coup je vois plus comment faire :/

Effectivement j'ai oublié de regardé le dossier et la vidéo, je vais le faire ce soir ! merci des liens !

Ouai, la c'est un proto ou je me concentre surtout sur le visuel que le fonctionnel du coup j'ai vu qu'on pouvait pas scroll mais c'est pas important.

Finalement j'avais juste à mettre ma view tags dans ma colonne du dessus... C'était pas compliqué j'avais déjà tout réorganisé xD. Du coup ça fonctionne nickel !! https://snack.expo.io/Bk7jzaJNW

Merci de ton temps et ton aide !

Pas de soucis, ravi d'avoir pu t'aider :)
Ca rend plutôt bien en tout cas !
Petite question en passant : tu dev sur quel env ? Car j'ai des petits problèmes de perf au niveau de l'émulation et du hot reload de mon côté (Ubuntu, Android Studio, Expo). Si tu as des conseils je suis prenneur :)

Ouai je galère niveau perf mais j'ai compris le soucis... J'ai essayé Ubuntu ça merde, W10 ça merde en faite ce qui fout le bordel c'est Android-Studio, il faut avoir un PC de combat pour le faire tourner correctement (et encore je dev sur le Xiaomi Mi Notebook qui est quand même assez Balèze).

Enfin niveau émulation avec Android souvent j'ai l'émulateur qui se ferme ou autre bug avec npm (j'utilise pas expo)... Du coup les solutions que j'ai trouvé :

• Développer sur un mac sous iOS (ça tourne impec et beaucoup plus rapide que Android... :/),
• Emuler l'application directement sur mon smartphone en le branchant à l'ordi.

C'est à ma connaissance les seuls choses qui fonctionnent. J'ai essayé plusieurs emulateurs en dehors d'android studio (genymotion et cie) mais ça revient à peu près au même.

Beh ça me rassure de ne pas être le seul à avoir ces soucis, c'est clair que c'est juste imbitable !
J'ai effectivement vu des prez' React native avec un emulateur iOS tournant sous xCode et c'était ultra fluide !
Malheureusement je n'ai pas vraiment les finances pour acheter un macbook ou autre, et mon PC, même s'il tient la route (core i5 3570k, 8 Go de RAM et SSD) je sens que ça commence à faire juste.. donc oui effectivement Android Studio mange à mort !
J'ai pensé à émuler directement sur mon smartphone, j'essayerai ça ce soir tiens :)

Petite question : comment lances-tu l'émulation sans passer par Expo ? :)

Alors au pire ce que tu peux faire si tu veux vraiment essayer sous iOS tu peux installer Hackintosh normalement avec t'as Xcode donc tu peux développer :D.

Bah tout simplement tu lances android-studio, ton -émulateur et dans ton projet t'as juste à faire : react-native run-android

Je trouve plus simple de ne pas passer par Expo.

J'ai tout de prêt pour un Hackintosh en plus, me manque un 3eme SSD pour l'OS ^^ mais c'est à envisager :)

Ah beh c'est ce que je fais, mais pas moyen de le faire démarrer sur l'émulateur : il faut que l'émulateur soit lancé c'est ça ? Comment fait-il le pont entre l'app et l'émulateur ?

Oui il faut que tu lances avant l'emulateur ensuite tu dupliques ton terminal dans un tu lance npm start et dans l'autre react-native run-android les deux à la racine de ton projet.

Il fait le pont automatiquement entre l'émulateur et l'app.

Si ça fonctionne pas essaie de créer un projet de zéro pour faire le test mais moi j'ai jamais eu de soucis pour le faire démarrer mise à part les erreurs de build xD.

Perso, je continue tout de même à dev sur mon windows 10 mais j'envisage de plus en plus de ressortir mon vieux mac de 2011 pour développer mon app dessus... Quand je vois les vidéos en anglais sur youtube et la vitesse des app... La sur mon app j'ai créé l'authentification via Facebook. Sur mon tel en moins de 5sec en cliquant sur le bouton je suis connecté, sur l'émulateur 1minute chrono... c'est long quand on fait un débug xD.

Sinon vous n'êtes pas obligé de lancer Android-Studio, vous n'avez besoin que de l'AVD déjà moins gourmand en ressources.

@Jordan Effairesse comment lancer uniquement l'AVD ? Il est en standalone ?

Tu peux lancer ton emulateur et ensuite fermer Android-Studio. Mais je n'ai pas vu de changement niveau perf en le faisant.

@fital j'ai suivi ta méthode npm start && react-native run-android + juste lancer l'émulateur à côté, ça marche du feu de Dieu ! C'est super fluide, merci ! :)
Je vais ENFIN pouvoir dev pour mobile :)

@betaWeb ah bah super ! finalement chez toi c'était Expo le problème ^^.

J'en reviens à mon problème initial qui avait été résolu. Sauf qu'en rentrant chez moi et en essayant mon code, c'est le drame... Il me met une erreur comme quoi le alignContent n'existe pas sous ReactNative (Gné?).

Je comprends pas trop, du coup si vraiment il existe quoi, il est remplacé par quoi ?

Oui c'était Expo le problème au final ! Et je ne comprends pas vraiment pourquoi @Grafikart est passé par ça (mis à part pour le débug et pour le HR). Bref.

C'est quand même étonnant, ton élément a-t-il la propriété flex: 1 ? Tu as essayer de rebuild le projet ? Des fois il suffit de faire ça.
Quelle est l'erreur exacte ?

Edit

Je viens de tomber sur la bibliothèque de composants NativeBase, faudra que j'essaye ça ce soir ! :)

En faite j'ai trouvé le soucis, j'étais sur react-native 0.42 et apparemment alignContent n'était pas ajouté avant la 0.43 je crois. Du coup, j'ai fait l'update et ca fonctionne !

Oui je connais NativeBase mais jamais essayé. Fait nous un retour si t'as un peu de temps :)

Yes pas de souci je ferai un retour ;)

Il y a une commande pour update facilement une version de React-native sur un projet ?

Perso j'utilise la commande react-native init MyAwesomeProject --version=xxxx pour initier mes projets.

Ouai y'a une commande mais j'ai passé 3 heures hier pour réussir... C'est vraiment un bon framework mais j'ai l'impression qu'il est aussi stable que ma table basse à qui il manque un pied...

Tu peux faire un upgrade avec react-native-git-upgrade, peut-être pour toi ça fonctionnera du premier coup xD. En tout cas je le referai plus moi je pense... (heureusement j'avais fait un backup de mon app avant l'upgrade) car j'ai du reprendre mon backup 4 fois. Après l'upgrade j'ai du avoir 10 messages d'erreurs différents (clear cache npm, supprimer node_module, réinstaller tout pour qu'au final ça change rien^^).

D'ailleurs j'ai toujours des messages d'erreurs avec build failed. ma compilation c'est la roulette russe... 1 fois sur 4 j'ai un build success -.-'

C'est quand même bizarre, il n'y aurait pas des soucis de permissions ?

Perso les permissions sont toutes pétées sur mon env de dev (Ubuntu 16.04), il faudrait que je formate pour repartir sur des bases saines, mais la flemme ^^' Du coup il arrive également qu'il y ait des soucis.

Tu utilises quel package manager : NPM ou Yarn ?

Non je suis sous Windows 10 et je lance mes cmd en admin du coup il devrait pas avoir de soucis de permissions. Avant j'utilisais yarn parce que je supporte pas la v5 de npm mais j'ai rétrogradé npm en v4 du coup je le reutilise ^^