2

How can I re-render tabs (react-native-tab-view) that is using the same shared child component?

I have 3 js files; Parent, TabView and Item.

I have 2 tabs in the parent; All and Downloaded which use the same child component with different props. I can see all items in All including Downloaded items. I would like to update the state of the items in All tab view when I update the state of an item on the Downloaded tab. I've tried passing props and using callbacks but I couldn't get it to update the views on the other tab even with forceUpdate method.

Parent:

renderScene = ({route}) => {
    switch (route.key) {
        case 'all':
            return <DocumentTabView /** ..props all items **/ />
        case 'downloaded':
            return <DocumentTabView /** ..props downloaded only **/ />
        default:
            return <DocumentTabView /** ..props all items **/ />
    }
};

render() {
    return (
        <TabView
            lazy
            navigationState={this.state}
            renderScene={this.renderScene}
            renderHeader={this.renderHeader}
            onIndexChange={this.handleIndexChange}
        />
    );
}

TabView:

render() {
    return (
        <SafeAreaView
            forceInset={{top: 'always'}}
            style={documentStyles.container}>
            <ScrollView
                contentContainerStyle={documentStyles.scrollview}
                refreshControl={
                <RefreshControl
                    refreshing={this.props.isRefreshing}
                    onRefresh={this.props.refreshCallback}
                />
            }>
                {this.state.dataSource.map((item, index) => {
                    return (
                        <Item /** ..props **/ />
                    );
                })}
            </ScrollView>
        </SafeAreaView>
    );
}
Abdul Sadik Yalcin
  • 1,744
  • 2
  • 19
  • 50
  • You could pass a `var` on click and can use it in `componentDidUpdate()` and set `this.setState({ ...this.state })` – Antoni Dec 20 '19 at 11:19
  • I've tried that logic by using callbacks. The parent component does not keep a state of the items so that logic does not work. – Abdul Sadik Yalcin Dec 20 '19 at 11:24
  • Otherwise, you could try to use a reducer and set a change request to the reducer and inject the var from the reducer in to the component – Antoni Dec 20 '19 at 11:27

0 Answers0