How to create custom React Native components with child nodes

Question

I want to create a React Native component in pure JavaScript, composed of other components such as TouchableOpacity and Text. I have a couple of buttons in my app that are composed of that two components so I thought it would be nice to learn how to create my own components for better code reuse.

The finished component should look more or less like this:

<Button>
  Tap me!
</Button>

And this is the code I made for the component so far:

class Button extends Component {
  render () {
    <TouchableOpacity style={styles.button}>
      <Text style={styles.textButton}>
      </Text>
    </TouchableOpacity>
  }
};

However, I don't know how I can use the Tap me! inner child text in my component and I don't really get how I can make my component to accept custom props and the TouchableOpacity and Text props.

PS: I know there are some React Native components like this out there, but I prefer to create my own in order to learn how I can build this kind of custom components. Also, React Native is awesome but I cannot find how to build things like this in their docs and I think it's a really interesting exercise for people starting in React.

Answer 1

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.

Answer 2

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.