Cannot read property 'style' of undefined

[kenanchristian]

I always got this Cannot read property 'style' of undefined error. This is my code snippet

  renderModules() {
    const enabledModule = []
    const { modules, issues, banners, subscriptions, reader } = this.state
    if (modules.length > 0 && issues && banners && subscriptions && reader) {
      modules.forEach(function(module) {
        switch (module) {
        case 'spotlight_issue':
          enabledModule.push(<IssueHighlight issues={issues} key={module} />)
          break
        case 'all_issues':
          enabledModule.push(<IssueList issues={issues} key={module} />)
          break
        case 'subscription':
          enabledModule.push(<SubscribeBanner subscriptions={subscriptions} key={module} />)
          break
        case 'related_issue':
          enabledModule.push(<RelatedIssue issues={issues} key={module}/>)
          break
        case 'reader':
          enabledModule.push(<AccountBar reader={reader} key={module}/>)
          break
        }
      })
    }
    return enabledModule
  }

  renderHeaderCarouselItem({ item }) {
    return (
      <View>
        <CachedImage source={{ uri: `https://cdn.magloft.com/${item.image}` }} style={css('carousel-item')}/>
      </View>
    )
  }

  renderHeader() {
    const { banners } = this.props
    if (banners.length > 1) {
      return (
        <Carousel ref={(c) => { this._carousel = c }} layout="default" autoplay={true} loop data={banners} renderItem={this.renderHeaderCarouselItem} sliderWidth={Dimensions.get('window').width} itemWidth={Dimensions.get('window').width} inactiveSlideOpacity={1} />
      )
    } else {
      return (
        <Image source={{ uri: `https://cdn.magloft.com/${banners[0].image}` }} style={{ width: Dimensions.get('window').width }} />
      )
    }
  }

render() {
    return (
      <ParallaxScrollView
        backgroundColor="blue"
        contentBackgroundColor="pink"
        parallaxHeaderHeight={300}
        renderScrollComponent={() => this.renderModules()}
        renderForeground={() => this.renderHeader()}
        style={css('main-container')}>
        <View style={{ height: 500 }}>
          <Text>Scroll me</Text>
        </View>
      </ParallaxScrollView>
    )
  }

Did I do something wrong?