add support for nested array children

[sound2gd]

add support for this:

    <CarouselPager
            ref={ref => this.horizontalCarousel = ref}
            pageStyle={{
              backgroundColor: '#fff',
              padding: 30,
            }}
          >
          {horizontalPages}
          
          <View
            key={111}
            style={{
              flex: 1,
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 30,
              borderRadius: 2,
            }}>
            <Text style={{color: '#666', fontSize: 60, fontWeight: 'bold'}}>Some Other Components</Text>
          </View>
    </CarouselPager>

and this is effect:

[jpapillon]

@sound2gd Wouldn't this work?

horizontalPages.push(
  <View
    key={111}
    style={{
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      padding: 30,
      borderRadius: 2,
    }}>
    <Text style={{color: '#666', fontSize: 60, fontWeight: 'bold'}}>Some Other Components</Text>
  </View>
);

return (
  <CarouselPager
    ref={ref => this.horizontalCarousel = ref}
    pageStyle={{
      backgroundColor: '#fff',
      padding: 30,
    }}
  >
    {horizontalPages}
  </CarouselPager>
);

[sound2gd]

@jpapillon yes, this worked.

In react's philosophy, view is a function of data. consider this data:

const data = 
[{name: 'foo', addr: 'bar'},
 {name: 'foo2', addr: 'bar2'}];

this data could represent a list of Person Contract Card.

<CarouselPager
    ref={ref => this.horizontalCarousel = ref}
    pageStyle={{
      backgroundColor: '#fff',
      padding: 30,
    }}
  >
    {data.map(it => (
      ....some awesome card view
    ))}
 </CarouselPager>

now we need "AddOperationCard" at end of the list, if we push a different data like

data.push({_this_is_an_add_card_not_contract: true});

and control it during map fuction will work, but each time a new ui comes, a different control branch logic need to be write and your data is "pollute" if there is only one children supported.

...
data.map(it => {
  if (it._this_is_an_add_card_not_contract) {
    return (....some different ui);
 }
 // else return normal contract ui
return (...awesome card view);
});
...

would it be better and cleaner to be

<CarouselPager
    ref={ref => this.horizontalCarousel = ref}
    pageStyle={{
      backgroundColor: '#fff',
      padding: 30,
    }}
  >
    {data.map(it => (
      ....some awesome card view
    ))}
   
    <View>
       ....add card view different from other list item
    </View>
 </CarouselPager>

as time flies, there is more and more “add cards views" that may "pollute" your codebase, so I think a support for nested array child is necessary.