React Native Scrolling of list not working within scrollable view for Android

Question

My React Native app has a long view and the view shows scrollable lists.

  const TOTAL_LISTS = 20;
  const lists = [];
  for (let i = 0; i < TOTAL_LISTS; i++) {
    lists.push(
      <ScrollView style={{ height: 50, margin: 10 }}>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
        <Text>4</Text>
        <Text>5</Text>
      </ScrollView>
    );
  }

  return (
    <ScrollView scrollEventThrottle={10}>
      <Text>Before Text</Text>
      <Text>Before Text2</Text>
      {lists}
      <Text>After Text</Text>
      <Text>After Text2</Text>
    </ScrollView>
  );

If the main view does not go beyond screen view (eg. TOTAL_LISTS = 2) then the lists are still scrollable for Android. However, if the main view goes beyond the screen (eg. TOTAL_LISTS = 20) the lists are not scrollable because it only scrolls the main view. This does not happen to IoS devices.

I am using Xiaomi Android 10.

Is there any way to fix the issue?

Answer 1

https://stackoverflow.com/a/51934761/5733033

<ScrollView {...parentProps}>
  <ScrollView {...childProps} nestedScrollEnabled={true}>
  </ScrollView>
</ScrollView>