How to call child component method from Parent Component on Scroll Back Of Tab View In React Native?

Question

I am calling four child components"Premium,Hot,RecentlyAdded,Demo" from parent Component 'Home Screen' and this four components called in Tab view and I am calling the methods of Child component methods from parent on condition in switch case, First time its calling Child component methods fine but when Tab View Scroll back then its getting error below:

 TypeError: _this2.child.childMethodOfPremium is not a function. (In '_this2.child.childMethodOfPremium(sort)', '_this2.child.childMethodOfPremium' is undefined)

my code is as follows:

HomeScreen.js (Parent Component)

Premium1 = () => { return (<Premium {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)} ref={ref => (this.child = ref)}></Premium>) };
Hot1 = () => { return (<Hot {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)} ref={ref1 => (this.child = ref1)}></Hot>) };
RecentlyAdded1 = () => { return (<RecentlyAdded {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)} ref={ref2 => (this.child = ref2)}></RecentlyAdded>) };
ByIndustry = () => { return (<Demo {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)}></Demo>) };

callChildMethod = (sort) => {
    const index = this.state.index
    console.log(index)
    switch (index) {
    case 0: {this.child.childMethodOfPremium(sort)} 
        break;
    case 1: this.child.childMethodOfHot(sort)
        break;
    case 2: this.child.childMethodOfRecent(sort)
        break;
    default: null
    }

}

Tab View Code:

<TabView
lazy={true}
//lazyPreloadDistance={1000}
removeClippedSubviews={true}
navigationState={this.state}
renderScene={SceneMap({
1: this.Premium1,
2: this.Hot1,
3: this.RecentlyAdded1,
4: this.ByIndustry
})}
//renderScene={this.renderScene}
renderTabBar={renderTabBar}
onIndexChange={this._handleIndexChange}
initialLayout={{ height: 0, width: Dimensions.get('window').width }}
//style={styles.container}
//swipeVelocityImpact={1000}//speed of swipe

/>

Premium.js(Child Component OF Home Screen)

childMethodOfPremium = (filterValue)=>{ 
    this.setState({sort:filterValue,page:1})
    this.componentDidMount()
    
}

Answer 1

you should use separate ref for each tab , try this

Premium1 = () => { return (<Premium {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)} ref={ref => (this.childPremium = ref)}></Premium>) };
Hot1 = () => { return (<Hot {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)} ref={ref1 => (this.childHot = ref1)}></Hot>) };
RecentlyAdded1 = () => { return (<RecentlyAdded {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)} ref={ref2 => (this.childRecently = ref2)}></RecentlyAdded>) };
ByIndustry = () => { return (<Demo {...this.props} animateBadgeFromChild={this.animateBadge.bind(this)}></Demo>) };

callChildMethod = (sort) => {
    const index = this.state.index
    console.log(index)
    switch (index) {
    case 0: {this.childPremium.childMethodOfPremium(sort)} 
        break;
    case 1: this.childHot.childMethodOfHot(sort)
        break;
    case 2: this.childRecently.childMethodOfRecent(sort)
        break;
    default: null
    }

}