FlatList React Native Lagging - reactjs

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?

Related

How to make Twitter style profile screen in React Native?

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?

Performance issue of flatList in Ext JS

I am facing a issue while trying to update scroll fast in my application. Screen became blank while scrolling fast.
I have added video link.Issue Video
I was trying to make smooth render on contact list but adding 50 per conacts scroll blank space was coming.

Integrating react locomotive scroll while using framer-motion's scroll trigger animations is buggy

I have a few framer-motion scroll trigger animations, nothing too complicated, in my current application and I wanted to integrate locomotive scroll using https://www.npmjs.com/package/react-locomotive-scroll.
However, when I add it and start scrolling, the app flickers like crazy when scrolling to bottom and I noticed 2 scrollbars.
Anyone dealt with this and found a solution? Maybe I don't use this library but I couldn't find an alternative.

Need help triggering scrolling when interacting with absolutely positioned element on top of scrollview

Image showing problem triggering scrollview when touching absolute component outside
Please see above photo which describes the issue.
I'm newish to React Native layout and specifically ScrollView.
How can I make it possible for user to touch and drag anywhere on screen to initiate scroll INCLUDING touching on top of this absolute component which is outside of the scrollview?

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?

Resources