createBottomTabNavigator: how do I reload/refresh a tab screen on tab on the tab-icon? - react-native

Question

So I have a TabNavigator with 3 screens.
import React from 'react';
import {TabNavigator,createBottomTabNavigator } from 'react-navigation';
import ActivateScannerPage from '../pages/ActivateScannerPage';
import ScanTicketPage from '../pages/ScanTicketPage';
import HomePage from '../pages/HomePage';
import SwipeList from '../components/SwipeList';
import FontAwesome, { Icons } from 'react-native-fontawesome';
import { Icon } from 'react-native-elements';
export default createBottomTabNavigator (
{
HomeScreen:{
screen:HomePage,
navigationOptions: {
tabBarIcon:()=>
<Icon
name='home'
type='font-awesome'
color='#5bc0de'/>
},
},
AcitvateScannerPage:{
screen:ActivateScannerPage,
navigationOptions: {
tabBarIcon:()=> <Icon
name='qrcode'
type='font-awesome'
color='#5bc0de'/>
},
},
ScanTicketPage:{
screen:ScanTicketPage,
navigationOptions: {
tabBarIcon:()=> <Icon
name='ticket'
type='font-awesome'
color='#5bc0de'/>
},
},
},
{
tabBarOptions: {
activeTintColor: '#5bc0de',
inactiveTintColor :'white',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: '#444444'
},
}
}
);
When I click on ActivateScannerPage there will be opened the camera for scanning a QR Code.
import React, { Component } from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import QrCode from '../components/QrCode';
class ActivateScannerPage extends Component {
static navigationOptions = {
title: 'Aktivierung Scanner',
};
constructor (props){
super(props);
}
render(){
return(
<View style={styles.viewContent}>
<QrCode scanner={true} headerText="Aktivieren Sie Ihren Scanner"/>
</View>
);
}
}
const styles = StyleSheet.create({
viewContent:{
flex:1
}
});
export default ActivateScannerPage;
So my problem ist when the app starts and I click on the tab "ActivateScannerPage/Aktivierung Scanner" then it opens the camera and I can scan my codes without a problem. But when I tab to another tabScreen, e.g. back to the home screen and then go back to the AcitivateScannerPage, the view is not refreshed or rendered new. So the camera dont open anymore and I see a black screen.
Is there a way to fix this? Can I reload or rerender the screen by tapping on the tabIcon?
Thanks.
EDIT:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
AsyncStorage,
} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import moment from 'moment';
import { Icon } from 'react-native-elements';
class QrCode extends Component {
static navigationOptions=(props)=>({
title: `${props.navigation.state.params.scannerName}`,
headerTintColor: 'white',
headerStyle: {backgroundColor: '#444444'},
headerTitleStyle: { color: 'white' },
})
constructor(props){
super(props);
this.state={
.....some states.....
}
}
onSuccess(e) {
..... do something..... here I get my data which I use
}
fetchDataScanner(dataMacroID,requestKey,hash) {
......
}
fetchDataTicketCheck(dataMacroID,requestKey,ticketValue){
.....
}
fetchDataTicketValidate(dataMacroID,requestKey,dataMicroID,ticketValue){
.....
}
saveDataScannerActivation=()=>{
.....
}
render() {
return (
<View style={styles.viewContent}>
<View style={{flex:4}}>
<QRCodeScanner
reactivateTimeout={2000}
reactivate={true}
onRead={this.onSuccess.bind(this)}
/>
</View>
</View>
);
}
}
......
export default QrCode;

Answer 1

in screens you designed for your tabs have to do flowing steps:
1: import withNavigationFocus from react-navigation to your class .
2: then export your like this : export default withNavigationFocus(yourclassname)
3: use this code to update or manage your state
shouldComponentUpdate = (nextProps, nextState) => {
if (nextProps.isFocused) {
...
return true;
} else {
...
return false;
}
};

Answer 2

With react-navigation you can detect whenever the ActivateScannerPage is active/tapped.
Add this code in componentDidMount in ActivateScannerPage
this.subs = [
this.props.navigation.addListener('didFocus', () => this.isFocused()),
];
And remove the listener if ActivateScannerPage will unmount
componentWillUnmount() {
this.subs.forEach(sub => sub.remove());
}