Bug: After add 6th level of nesting the placeholder stops to be visible (iOS only)

[jbinda]

Describe the bug
Apps seems stops to render items properly when you nested too many levels of Group block.

To Reproduce
Steps to reproduce the behaviour:

1. Add Group Block
2. Click on AppenderButton and add another Group inside
3. Keep nesting empty Group block inside until you see placeholder disappears

Expected behavior
You should be able to nest Group without described situation happens (see screenshots)

Screenshots

Deep nested Group when placeholder disappears

GIF to preset crash on Simulator

XCode issue when run production app from Wordpress-iOS

Smartphone (please complete the following information):

• Device: iPhoneX
• OS: iOS 13.3, 12.3
• Version TBD

Additional context
In demo App on Simulator after add 9th level app turns off and device go to home screen.

Discovered during regression testing for Release 1.23.0

Tested with build number: 22912. IPA is available here

[jbinda]

I have also noticed that in Column block feature (see column PR ) We hit this limit faster because Column that is child of Columns is also an InnerBlock

[lukewalczak]

After initial investigation I was suspecting the issue is related to our structure and nesting InnerBlock within other InnerBlock which under the hood is react-native FlatList component.

It was a blind shot since I replaced nested FlatLists in favour of regular View with the map over the items inside. Also I tried FlatList from the react-native-gesture-handler - effect was the same.

I went through the whole structure of nested Group blocks and removed all the Views which are used as wrappers over other components and finally I've managed to nest even 27 Group blocks. However, adding the next inner block results in app crash 💥

Well, it made me realize there is some limitation of nested views in RN. I have found reported issue which looks similarly. What's more looks like there is even some regression in numbers of nested Views between RN 0.61.5 and 0.63.3. In the reported issue on RN 0.63.3 the number is 112, but on 0.61.5 it’s 118.

I have tested it on the fresh app with RN 0.61.5 with the following code which you can paste to App.js in the init app. According to the comment within the snippet, uncommenting the innermost View will crash the app.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {View, StyleSheet} from 'react-native';

// 9 nested views plus a child
const TestComponent = ({children}) => {
  return (
    <View>
      <View>
        <View>
          <View>
            <View>
              <View>
                <View>
                  <View>
                    <View>{children}</View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

// 13 nested TestComponent instances
const App = () => {
  return (
    <TestComponent>
      <TestComponent>
        <TestComponent>
          <TestComponent>
            <TestComponent>
              <TestComponent>
                <TestComponent>
                  <TestComponent>
                    <TestComponent>
                      <TestComponent>
                        <TestComponent>
                          <TestComponent>
                            <TestComponent>
                              {/*
                                13 x TestComponent which have 9 x View inside
                                Result: 117 nested Views NO CRASH
                                        118 nested Views CRASH
                                Uncomment the <View /> below to get a crash */}
                              {/* <View /> */}
                            </TestComponent>
                          </TestComponent>
                        </TestComponent>
                      </TestComponent>
                    </TestComponent>
                  </TestComponent>
                </TestComponent>
              </TestComponent>
            </TestComponent>
          </TestComponent>
        </TestComponent>
      </TestComponent>
    </TestComponent>
  );
};

export default App;