Search code examples
androidreact-nativelimitreact-native-component

Android 7 React Native number of components limit?

I've been making my first React Native app, for now without redux, just RN. The case is on Android 7 it doesn't show a lot of components, but it does on more recent versions of Android and works perfectly on iOs.

Here are screenshots of my problem, on Android you can see a lot of blank space, but on iOs it is filled with data:

Android 7: enter image description here enter image description here enter image description here

iOS: enter image description here enter image description here

Here is the structure and CSS:

<ScrollView contentContainerStyle={mainView}>
  <View style={sectionStyle}>...</View>
  <View style={sectionStyle}>...</View>
  ...
  <View style={sectionStyle}>...</View>
</ScrollView>

  mainView: {
    backgroundColor: colors.backgroundGray,
    justifyContent: 'flex-start'
  },
  sectionStyle: {
    paddingTop: 15,
    paddingBottom: 15,
    backgroundColor: colors.mainWhite,
    margin: 5,
    borderWidth: 1,
    borderColor: colors.borderGray,
    borderRadius: 5,
    shadowOpacity: 0.5,
    shadowRadius: 2,
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowColor: colors.shadowColor,
    elevation: 5
}

What may cause that issue and what can be done to fix this?

UPD: After a few days of debugging i found that problem may be caused by Android 7 limitations of number of components rendered on screen, because there are a lot of them on that page, like 10-15 screens at least with icons, comments, sliders and dropdowns. If i render just dummy text instead of them - everything is rendered, and so does if i render almost all of them by exception of, for example, dropdowns. Any ideas?

Solution

  • Well once again i'm answering my own question, it feels like a meditative monolgue service :D

    I've solved this problem. That page has really huge amount of complex components on it, like ~30 complex Views grouped by other Views (this is because that part of a page should be same for all products so it's hardcoded) + massive FlatList of same structured Views (this is because products have their unique structure, so it's dynamic), and all of it is inside of a ScrollView to enable scrolling (otherwise it makes no sense to have 20+ screens long page without ability to scroll it). So i put those static hardcoded components into array, merged with dynamic components array, and rendered only one FlatList, replacing the whole ScrollView with it.