Shoutem - Modifying extensions

Question

He, I tried to modify the shoutem.places extension. My custom screen looks like this:

import { screens } from 'shoutem.places';

export default class FixedMediumPlaceDetails extends 
screens.MediumPlaceDetails {    
  render() {    
    const { place } = this.props;
    const { location = {} } = place;
    return (
      <Screen>
        <NavigationBar />
        <ScrollView>
          {this.renderLeadImage(place)}
        </ScrollView>
      </Screen>
    );
  }
}

I am just overriding the render() method, and inside this method I would like to call the renderLeadImage() method from the superclass.

With this implementation I get: this.renderLeadImage() is not a function. So how do I correctly inherit the class and call a superclass' method? Anyhow, is inheritance the preferred way here? Facebook recommends composition over inheritance.

Answer 1

screens.MediumPlaceDetails isn't a React Component class, but rather a redux and shoutem.theme decorated class, this is why when you're extending you don't have access to any of renderLeadImage()'s methods.

So you'll have to change your import:

import { MediumPlaceDetails } from 'shoutem.places/screens/MediumPlaceDetails';

EDIT: Fixed copy-paste error.