Expo/React Native TabView re-render component/tab on state change - react-native

Question

I am writing an app using Expo (React Native framework). Whenever the state of a component is changed with setState(...) method, the component should re-render to show the latest state data. This works with basic React Native components such as View, Text, Button (I have tried these three), but it does not re-render here, where I use custom component TabView. This is stated in the documentation about component:
"All the scenes rendered with SceneMap are optimized using React.PureComponent and don't re-render when parent's props or states change. If you need more control over how your scenes update (e.g. - triggering a re-render even if the navigationState didn't change), use renderScene directly instead of using SceneMap."
I don't quite understand how to manage this. I would like the component to re-render whenever the state is changed, in this case, after clicking the button and calling the function writeData().
Documentation of the TabView component is here: https://github.com/react-native-community/react-native-tab-view .
import React from 'react';
import { TabView, SceneMap } from 'react-native-tab-view';
import { StyleSheet, Text, View, Dimensions, Button, ToastAndroid } from 'react-native';
export default class MojTabView extends React.Component {
state = {
index: 0,
routes: [
{ key: 'allEvents', title: 'Všetko' },
{ key: 'sortedEvents', title: 'Podľa druhu' },
{ key: 'myEvents', title: 'Moje akcie'}
],
name: "Robert"
};
MyEvents = () => (
<View style={[styles.scene, { backgroundColor: 'white' }]}>
<Text>Some content</Text>
<Button
style={{ margin: 5 }}
onPress={this.writeData}
title="Write data"
color="#841584"
/>
<Text>Name in state: {this.state.name}</Text>
</View>
);
SortedEvents = () => (
<Text>Some content</Text>
);
AllEvents = () => (
<Text>Some other content</Text>
);
writeData = () => {
ToastAndroid.show("button click works!", ToastAndroid.LONG);
this.setState({ name: "Richard"});
}
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
allEvents: this.AllEvents,
myEvents: this.MyEvents,
sortedEvents: this.SortedEvents
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
/>
);
}
}
I spent a few hours trying to achieve that, without solution. This is my first StackOverflow question, thanks.

Answer 1

Okay, I was finally able to come up with a nice solution. The point is to define content of individual tabs/routes in a separate file as a typical React Native component with its own state, not inside this MyTabView component, as it is made even in the example in the documentation about TabView. Then it works as it should.
Simple example:
This is content of one of the tabs:
import React from 'react';
import { Text, View, Button } from 'react-native';
export default class MyExampleTab extends React.Component {
state = {
property: "Default value",
}
writeData = () => {
this.setState({
property: "Updated value"
})
}
render() {
return (
<View>
<Button
style={{ margin: 5 }}
onPress={this.writeData}
title="Change the state and re-render!"
color="#841584"
/>
<Text>Value of state property: {this.state.property}</Text>
</View>
)
}
}
This is how I reference it in the MyTabView component:
import MyExampleTab from './MyExampleTab'
...
export default class MyTabView extends React.Component {
...
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
...
someKey: MyExampleTab,
...
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
/>
)
So I don't use <MyExampleTab />, as I would normally using custom component, but write it as it is, MyExampleTab. Which quite makes sense. And on the button click the state changes and tab re-renders.

Answer 2

I changed to self implemented renderScene and inner component now get re-rendered
<TabView
navigationState={{ index, routes }}
renderScene={({ route }) => {
switch (route.key) {
case 'first':
return <FirstRoute data={secondPartyObj} />;
case 'second':
return SecondRoute;
case 'third':
return ThirdRoute;
case 'forth':
return ForthRoute;
default:
return null;
}
}}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
renderTabBar={renderTabBar}
/>

Answer 3

The two pieces of state that should triger re-render of your TabView are:
index.
routes
They've done that for performance optimization purposes
if you want to force re-rendering your TabView if you're changing any other state value that has nothing to do with these values ... then according to the docs ... you need to provide your own implementation for renderScene like:
renderScene = ({ route, jumpTo }) => {
switch (route.key) {
case 'music':
return ;
case 'albums':
return ;
}
};
in this case:
You need to make sure that your individual routes implement a
shouldComponentUpdate to improve the performance.

Answer 4

Building on what #druskacik wrote above, you can actually pass a component with props too
import MyExampleTab from './MyExampleTab'
...
export default class MyTabView extends React.Component {
...
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
...
someKey:() => <MyExample foo={foodata} />,
...
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
/>
)