How to create custom React Native components with child nodes

you can checkout this repo from github: https://github.com/future-challenger/react-native-tabs

some code here:

<View style={[styles.tabbarView, this.props.style, this.state.keyboardUp && styles.hidden]}>
    {React.Children.map(this.props.children.filter(c=>c),(el)=>
    <TouchableOpacity key={el.props.name + "touch"}
        testID={el.props.testID}
        style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
        onPress={()=>!self.props.locked && self.onSelect(el)}
        onLongPress={()=>self.onSelect(el)}
        activeOpacity={el.props.pressOpacity}>
            {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el}
    </TouchableOpacity>
)}

React.Children.map(this.props.children.filter...) is the key to deal with children components.

You can access the inner text via this.props.children and you can pass properties either manually (via this.props) or using ... operator. More of this is described in react.js documentation (note - not React Native docs!). The most relevant parts of the documentation are:

• http://facebook.github.io/react/docs/multiple-components.html
• https://facebook.github.io/react/docs/components-and-props.html

It's general approach of React Native documentation that rather than describing all react concepts, they described only the React Native parts and the actual concept is described in the web/original version of React.