ScrollView disappears in this scenario

[Tiagoperes]

The following works:

<ScreenComponent title="Products" state={products}>
      <Lifecycle onInit={onInit}>
        <Column style={styles.wrapper}>
          <Loading isLoading={products.get('isLoading')}>
            <ScrollView direction="vertical">
              <ForEach items={products.get('data')} iteratorName="product">
                {product => (
                  <Row>
                    <ProductItem
                      image={product.get('image')}
                      title={product.get('title')}
                      price={product.get('price')}
                      inCart={contains(cart, product)}
                      onPressBuy={log({ message: '', level: 'Info' })}
                    />
                  </Row>
                )}
              </ForEach>
            </ScrollView>
          </Loading>
        </Column>
      </Lifecycle>
    </ScreenComponent>

Simply by changing the location of ScrollView, it breaks. The ScrollView and its contents are not rendering in the following code:

<ScreenComponent title="Products" state={products}>
      <Lifecycle onInit={onInit}>
        <ScrollView direction="vertical">
          <Column style={styles.wrapper}>
            <Loading isLoading={products.get('isLoading')}>
              <ForEach items={products.get('data')} iteratorName="product">
                {product => (
                  <Row>
                    <ProductItem
                      image={product.get('image')}
                      title={product.get('title')}
                      price={product.get('price')}
                      inCart={contains(cart, product)}
                      onPressBuy={log({ message: '', level: 'Info' })}
                    />
                  </Row>
                )}
              </ForEach>
            </Loading>
          </Column>
        </ScrollView>
      </Lifecycle>
    </ScreenComponent>

[Tiagoperes]

Just found another example:

Works:

    <ScreenComponent title="Product details">
      <Column style={styles.wrapper}>
        <ScrollView>
          <Text style={styles.title}>{product.get('title')}</Text>
          <Column style={styles.content}>
            <RemoteImage url={product.get('image').toString()} style={styles.image} />
            <Text style={styles.price}>{formatPrice(product.get('price'), 'BRL')}</Text>
            <If condition={contains(cart, product)}>
              <Then>
                <Text style={styles.inCart}>In cart ✓</Text>
              </Then>
              <Else>
                <Button onPress={cart.set(insert(cart, product))}>Add to cart</Button>
              </Else>
            </If>
          </Column>
          <Text style={styles.description}>{product.get('description')}</Text>
        </ScrollView>
      </Column>
    </ScreenComponent>

Doesn't work:

<ScreenComponent title="Product details">
      <ScrollView>
        <Column style={styles.wrapper}>
          <Text style={styles.title}>{product.get('title')}</Text>
          <Column style={styles.content}>
            <RemoteImage url={product.get('image').toString()} style={styles.image} />
            <Text style={styles.price}>{formatPrice(product.get('price'), 'BRL')}</Text>
            <If condition={contains(cart, product)}>
              <Then>
                <Text style={styles.inCart}>In cart ✓</Text>
              </Then>
              <Else>
                <Button onPress={cart.set(insert(cart, product))}>Add to cart</Button>
              </Else>
            </If>
          </Column>
          <Text style={styles.description}>{product.get('description')}</Text>
        </Column>
      </ScrollView>
    </ScreenComponent>