For example, if I needed to make a "small" and a "large" version of a button that had a lot of (but not all) methods & state in mon, what would be the best way to implement this in React Native?

The issue I have with simply extending the "parent" ponent (I may be wrong about this) is that working with Props has been messy.

The way I've been implementing it has simply been to give the "parent" ponent a boolean prop (in this example, to represent "small" or "large") and then changing its features based on that boolean's value. The "child" ponents are pretty much only there for readability.

For example, if I needed to make a "small" and a "large" version of a button that had a lot of (but not all) methods & state in mon, what would be the best way to implement this in React Native?

The issue I have with simply extending the "parent" ponent (I may be wrong about this) is that working with Props has been messy.

The way I've been implementing it has simply been to give the "parent" ponent a boolean prop (in this example, to represent "small" or "large") and then changing its features based on that boolean's value. The "child" ponents are pretty much only there for readability.

• javascript
• oop
• react-native

3 Answers 3

Just extends your ponent to make a child ponent.

class Label extends React.Component{
  constructor(props){
    super(props);
    this.className='plain-label';
  }
   render(){
     return <span className={this.className}>
        {this.props.children} 
      </span>
   }
}


class SmallLabel extends Label{
  constructor(props){
    super(props);
    this.className = this.className + ' small-label';
  }
}

Then use it:

class Main extends React.Component{
    render(){
      ....
      <Label> Plain Label </Label>
      <SmallLabel> SmallLabel </SmallLabel>
    }
}

Inheritance is in most scenarios — just not good a viable solution. Because extending ponents with inheritance more or less leads to a scenario at some point, where the behaviors cannot be clubbed seamlessly. However, with Composition, its possible.

Good practice for extending/subclassing React Component, See: https://discuss.reactjs/t/best-practices-for-extending-subclassing-ponents/1820/3

If you are not going to override any methods and just going to make visual changes it is better to use props. Creating different ponents just for visual changes can create unnecessary plicated logic.

What you can do is to get use of defaultProps

Example

class CustomLabel extends React.Component{
   render(){
     const { isSmall, containerStyle, children } = this.props; 
     return (
       <span
         className={`plain-label ${(isSmall && 'small-label')}`}
         style={containerStyle}
       >
         {children} 
       </span>
     )
   }
}

CustomLabel.defaultProps = {
  isSmall: false,
  containerStyle: {},
  children: 'I need some children to display'
};

export default CustomLabel;

<CutomLabel>{'Plain label because gets the default props'}</CustomLabel>
<CustomLabel isSmall>{'Small label because prop is true'}</CustomLabel>
<CustomLabel isSmall containerStyle={{ color: 'red' }}>{'Red small label'}</CustomLabel>

As far as the sizing goes I would remend just passing the classname to the ponent, and having css styling conditional upon that classname (if you are using external stylesheets). As far as extending the class goes its hard to give an accurate answer without knowing your exact use-case.