How to make Twitter style profile screen in React Native? - reactjs

I am using the expo managed workflow with React Native. I am trying to design a profile screen that is similar to Twitter. Twitter has four categories on its profile ("Tweets", "Tweets & replies", "Media", and "Likes"). My profile has two. In order to allow the ability to horizontally scroll between categories I have a horizontal ScrollView below the top part of the profile. In the horizontal ScrollView I have two vertical FlatLists (one for each category). I have all of this in a vertical ScrollView so that the top part of the profile scrolls off the page when you scroll. This is the problem: I have a vertical FlatList in a vertical ScrollView which doesn't work for what I want. Does anyone know how I can work around this?

Related

How to implement a vertical scroll indicator progressbar in React project

Please check the red marked area of the picture. I need to implement this thing in a React project. It's a vertical scroll timeline indicator of all posts coming from the database.

Screen flickering/janking while rendering a grid of cards in react

I have an eCommerce site where there are product cards displayed in a grid. I am using react-semantic-ui grids and cards. Even when there are few cards, ex: 5-6 If I scroll too fast the screen flickers and slows down. The components disappear and when I stop scrolling they reappear but there's a visible lag. This is even more apparent on mobiles.
The page in question is here
I tried react-window and react-virtualized they don't seem to do much and overcomplicates the whole thing. What can I do to solve this?

FlatList React Native Lagging

I have a FlastList that scrolls horizontally and it works smooth. But when I add one more horizontal scrolling FlatList below this one the whole scrolling starts lagging. Any solution to this?

AppGyver steroids app - How to add scrolling to a Drawer

I implemented a drawer in my steroids application with similar styles as google+ drawer. However, I have several links on it, and when my device is in landscape mode I'm unable to see all the links, and I can't scroll the drawer.
I want to be able to scroll the drawer vertically as a normal webview, just like google+ drawer does.
Is that possible?
Can I embed a webview inside another?
I managed to fix this by adding heigh=device-height to the content meta tag. And I added overflow-x=hidden to just allow vertical scrolling.

Foundation top bar - how reveal items on small screen

I'm building webapp focused on mobile. I want to have some navigation/action items displayed on topbar, but current logic of Foundation is hiding everything into sliding menu when on small screen. It is just annoying if my topbar items are hidden, when there is 500px of space on my tablet.
Please help, how reveal items on small screen when there is enough space to show them? Twitter Bootstrap have this functionality, it is easy as "not to nest items to div.nav-collapse".
I'm using Foundation 4.2.1, CSS only, no JS.

Resources