ComponentWillUnmount is not called when working with createMaterialTopTabNavigator() - react-native

Question

I have created 5 tabs using createMaterialTopTabNavigator and implemented search bar on each of tabs. However, if I am switching between tabs, components will persist the data and did not refresh. Our componentWillUnmount() method is not invoked.
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
SafeAreaView,
FlatList,
TouchableOpacity,
TextInput
} from "react-native";
import SegmentedControlTab from "react-native-segmented-control-tab";
let context;
import MachineInformationCard from './MachineInformationCard';
export default class AllMachine extends Component {
constructor(props) {
super(props);
context = this;
this.state = {
selectedIndex: 0,
machineData: [],
tempMachineData: []
}
}
componentDidMount = () => {
const fetchData = [{
'Status': 'ON',
'MachineName': '1',
'OperatorName': 'Abhishek',
'Target': 500,
'Achieved': 200,
'Health': '60%',
'Shift': 1,
'Date': '29-10-2019'
},
{
'Status': 'Maintenance',
'MachineName': '12',
'OperatorName': 'Vicky',
'Target': 600,
'Achieved': 100,
'Health': '20%',
'Shift': 2,
'Date': '30-10-2019'
},
{
'Status': 'OFF',
'MachineName': '3',
'OperatorName': 'Prasad',
'Target': 700,
'Achieved': 700,
'Health': '80%',
'Shift': 3,
'Date': '28-10-2019'
},
{
'Status': 'OFF',
'MachineName': '34',
'OperatorName': 'Prasad',
'Target': 700,
'Achieved': 700,
'Health': '80%',
'Shift': 3,
'Date': '28-10-2019'
}];
this.setState({
machineData: fetchData,
tempMachineData: fetchData,
})
}
getSearchValue = (data) => {
const filteredMachineNames = this.state.tempMachineData.filter(
macName => {
let machineNameLowercase = macName.MachineName.toLowerCase()
let searchTermLowercase = data.toLowerCase()
return machineNameLowercase.indexOf(searchTermLowercase) > -1;
}
)
this.setState({
machineData: filteredMachineNames
})
}
_renderItem({ item, index }) {
return (
<TouchableOpacity
onPress={() => context.props.navigation.navigate('MachineProfile')}>
<MachineInformationCard {...item} />
</TouchableOpacity>
)
}
render() {
return (
<SafeAreaView style={styles.container}>
<View style={{
backgroundColor: '#E1E1E1', borderRadius: 30,
flexDirection: 'row', marginTop: 5
}}>
<TextInput style={{
color: 'black', fontSize: 17, height: 40, padding: 10
}}
placeholder={'Search Machines'}
placeholderTextColor={'grey'}
onChangeText={(value) => this.getSearchValue(value)} />
</View>
<FlatList
data={this.state.machineData}
renderItem={this._renderItem}
keyExtractor={({ id }, index) => id} />
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
CardItem: {
flex: 1,
flexDirection: 'row',
height: 120,
backgroundColor: '#e7e7e7',
borderRadius: 5,
overflow: 'hidden',
margin: 5,
shadowColor: 'black',
shadowOpacity: 0.8,
elevation: 8
}
});
[[screen 1 with search][when I switch to ON tab and come back to All machine, I want All machine to be display entire list instead of filtered list]][same]

Answer 1

components will not be unmounted in a tabbed layout. you must use navigation events to determine if the screen comes into or goes out of focus - documentation
example -
const willFocusSubscription = this.props.navigation.addListener(
'willFocus',
payload => {
// callback when component comes into view
console.debug('willFocus', payload);
}
);
// Remove the listener when you are done (usually in componentWillUnmount)
// willFocusSubscription.remove();
events -
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)