React-native-tab-view: Please re-render component whenever redux store changed.

[laptran-sym]

Current behaviour

TabView initialize OK, static data shown correctly. Using redux
(This should be duplicated by this one: https://github.com/react-native-community/react-native-tab-view/issues/678)

Expected behaviour

The view in each tab has to re-render whenever the data in store changed.

Code sample

Code to generate TabView

class SearchPrize extends PureComponent {
....
render() {
return(
navigationState={this.state}
renderScene={({ route }) => {
return (
**provincePrize = {this.props.selectedDateData[route.key]}
title = {this.props.dateOfResult}**
/>
)}}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
tabBarPosition='bottom'
/>
);
...
}

SearchPrizeTabContent code:

export default class SearchPrizeTabContent extends PureComponent {
...
shouldComponentUpdate(nextProps, nextState) {
console.log('Never called');
}

render() {
return (


prizeValues = {this.props.provincePrize}
findingWords={this.state.findingWords} >




);
}
...
}

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | android
| react-native | 0.57.8
| react-native-tab-view | 2.0.0-alpha.4 or 1.3.2
| react-native-gesture-handler | N/A
| react-native-reanimated | N/A
| node | 10.15.0
| npm or yarn | npm

[satya164]

The library doesn't prevent any re-rendering on state/props update unless you're using SceneMap as mentioned here. We don't use shouldComponentUpdate or PureComponent anywhere.

You are using PureComponent in your code, which will prevent re-renders if props and state are the same. I'm not sure how specifying a shouldComponent works in this case.

[laptran-sym]

Thanks for your confirmation, you are right, I have resolved my issue.

If you look closely at my snippet code, you will see the TabView should be never re-rendered even state changed because all the props of TabView were not changed :)

navigationState={this.state} => should non change even related redux store changed
renderScene={({ route }) => { => this function should never changed
return (
provincePrize = {this.props.selectedDateData[route.key]} => this property changed but not effect to TabView
title = {this.props.dateOfResult} => this property changed but not effect to TabView
/>

I resolved my issue by adding a virtual prop into TabView which should be changed when redux store changed.

That is my problem.