[IlllI]

#javascript #react #reactnative

Pomozcie Mirki jak według was robią te profile na social mediach typu TikTok Instagram? Na gorze ekranu macie info o userze z klikalnymi linkami a pod spodem zaczyna się widok z tabami a w nich prawdopodobnie są flatlisty kontentem. Gdy zaczynamy skrollowac kontent to info o userze się chowa ponad viewport i zostają taby z kontentem. Próbowałem headerlistcomponent albo padding górny w innercontainerstyle ale wtedy albo info o userze jest nieklikalne bo jest jakby pod flatlista albo jak dam zindex ponad to nie da się po tym scrollowac listy

[lobo]

@IlllI: Jakbyś to lepiej opisał bo niezbyt rozumiem

[IlllI]

@lobo: Ogólnie chodzi chyba o flatliste z postami znajdująca się w komponencie tabview a całość jest w scrollview :D

[lobo]

@IlllI: dalej niewiele to tłumaczy co byś chciał osiągnąć.

[lobo]

@IlllI: odpaliłem https://www.instagram.com/ i zupełnie nic nie widzę co mogłoby być problemem

[IlllI]

@lobo: Chcialbym odtworzyć widok profilu w taki sposób jak ma to Instagram czyli 30% ekranu to component z informacja o profilu a 70% to taby z konentem zawierające flatlisty. Gdy zaczynam przewijać ekran najpierw ucieka to info o profilu poza viewport a taby z flatlistami porywaja 100% ekranu i zaczynamy scrollowac te listy

[IlllI]

@lobo: Chodzi o react native i widok profilu mówimy o apce Sorki może niepotrzebnie dałem sam tag react

[lobo]

@IlllI: na react native się nie znam ale coś takiego? https://stormotion.io/blog/how-to-create-collapsing-tab-header-using-react-native/

[IlllI]

@lobo: Tak to dokładnie ten przypadek tylko wtedy albo to info profilowe jest nieklikalne i jest jakby pod ta lista albo jest nad ale wtedy nie możemy skrollowac listy po tym komponencie z info o profilu tak jak to ma Instagram czy TikTok stad właśnie moje pytanie czy ktoś nad tym pracował albo ma jakiś pomyl

[lobo]

@IlllI: No w tym linku jest przykład + nazewnictwo tego Collapsing Tab Header więc możesz poszukać pod tym hasłem

[lobo]

@IlllI: https://medium.com/@linjunghsuan/implementing-a-collapsible-header-with-react-native-tab-view-24f15a685e07

[IlllI]

@lobo: Tak tez dzisiaj przewaliłem pol dnia w pracy bo się na ten scroll uparłem :D