Component inside Tab won't re-render when a prop changes its value.

Issue type

I’m submitting a …

• bug report
• feature request

Issue description

Current behavior: When a component prop inside <Tab /> is updated via the redux store, the component doesn’t re-render.

Expected behavior: The component should re-render when the prop changes.

Steps to reproduce: Add component inside a <Tab />

Related code:

<TabView
    selectedIndex={this.state.selectedIndex}
    onSelect={this.handleTabSelect}
    style={[styles.tabView]}
    tabBarStyle={[styles.tabBarView]}
    indicatorStyle={[styles.tabIndicator]}
>
    <Tab title="Tab 1" titleStyle={[styles.tabTitle, this.state.selectedIndex === 0 && styles.tabTitleSelected]}>
        ...
    </Tab>

    <Tab title="Tab 2" titleStyle={[styles.tabTitle, this.state.selectedIndex === 1 && styles.tabTitleSelected]}>
        ...
    </Tab>

    <Tab title="Tab 3" titleStyle={[styles.tabTitle, this.state.selectedIndex === 2 && styles.tabTitleSelected]}>
        ...
    </Tab>

    <Tab title="Tab 4" titleStyle={[styles.tabTitle, this.state.selectedIndex === 3 && styles.tabTitleSelected]}>
        <MyCustomComponent propFromRedux={propFromRedux} />
    </Tab>
</TabView>

The MyCustomComponent won’t re-render when propFromRedux change its value. To make sure that the problem is not in MyCustomComponent, I’ve moved it outside the <TabView /> and when the propFromRedux changed, the component re-rendered.

Other information:

OS, device, package version

OS: iOS 12
Device: iPhone Xs
Package version: 4.0.5

[NBoychev]

Thanks! I was just testing this on your playground and it worked.

Keep up the great work!

[32penkin]

@NBoychev sorry for the misunderstanding. I just used the “master” version of the framework, so everything worked for me 😃