Performance issues with nested Views in ScrollView and header - Replacing with FlatLists

Question

I'm currently working on a React Native project and facing performance issues related to using nested Views within a ScrollView, along with a header. Here's an overview of the current structure:

1. A main ScrollView that contains a general header and two Views positioned next to each other in a flex-row layout.
2. Each of the two Views has a flex-column layout and contains an array of topics as child elements.

-------------------------------------------
|                General Header           |
-------------------------------------------
|            |                            |
|   View     |        View                |
|            |                            |
|   Topics   |        Topics              |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
|            |                            |
-------------------------------------------

In this representation:

• The "General Header" is a separate element at the top.
• Below the header, there are two side-by-side "Views", each containing multiple "Topics".
• The "Topics" are represented as rectangles inside each "View".
• The "Header" and the "Topics" are nested within a main "ScrollView" container.

Please note that this is a simplified ASCII representation and may not accurately reflect the actual styling and layout of the React Native components. The purpose is to give a general idea of the nested structure causing performance issues.

The primary issue is that the current setup with nested Views and a header is causing performance problems, particularly when there are many topics within the Views.

To improve performance, I'm planning to replace the nested Views with FlatList components. The goal is to have two FlatList components positioned next to each other horizontally. When I scroll one FlatList, the other one should also scroll simultaneously, creating a synchronized scrolling effect (Important Note: it's essential to consider that FlatList items may have varying heights, which can result in layout discrepancies. Careful handling of dynamic item heights will be necessary to ensure a smooth user experience.)

I want the header to be treated as an element within the FlatLists and scrolled along with the content (which works if I'm using the non-optimal method).

The current structure using nested Views within ScrollView is as follows (simplified):

<ScrollView>
  <View>
    {/* General header content */}
  </View>
  <View style={{ flexDirection: 'row' }}>
    <View style={{ flex: 1 }}>
      {/* Topics for the first column */}
    </View>
    <View style={{ flex: 1 }}>
      {/* Topics for the second column */}
    </View>
  </View>
</ScrollView>

To address the performance issues and implement synchronized scrolling, I want to update the above structure to use FlatList components instead. Additionally, I want to ensure that the header is treated as an element within the FlatLists and scrolls along with the content.

I would greatly appreciate any guidance, code examples, or relevant resources that can help me achieve this improved performance and synchronized scrolling behavior.

Thank you in advance for your help!