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

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;

I think the problem come from `QrCode` , you should change it state when it scanned qrcode. For detect active screen see this https://stackoverflow.com/questions/50290818/react-navigation-detect-when-screen-is-activated-appear-focus/50290888#50290888 — tuledev, Jun 21 '18 at 06:57
I dont understand where to put this and where to set the state. I'm really new to this and I want avoid redux! Do you mean I should set a state in QrCode and than check in ActivateScannerPage if this state is changed? But how do I get access to this state? — Jacky, Jun 21 '18 at 07:34
Does `QrCode ` can reload it state? You can reload it after QRCode is scanned or the `ActivateScannerPage ` is active — tuledev, Jun 21 '18 at 07:53
I dont know, do I have to implement it or is it a react-native basic function? I have a lot of functions in there where states are getting changed. — Jacky, Jun 21 '18 at 08:00
Try this https://github.com/moaazsidat/react-native-qrcode-scanner. They have `reactivate()` — tuledev, Jun 21 '18 at 09:00
I use this third party component .... so in my QrCode.js I use in my render-method "< QRCodeScanner/>". Its working fine until I switch to another tab-screen and go back, there will be a black screen and the camera isnt working. Figured out that the componentDidMount() only fired once and not everytime when the Tab is pressed. I'll show you my code for QrCode.js — Jacky, Jun 21 '18 at 09:25
I update the code above. what they mean with reactive is, that you can scan more than one time.... in the example code of the component they scan a QR code once and then the camera is still on but do nothing. if its reactivate={true} it scans permanent. if you set a reactivate timeout like I did its only available after this time and the you can scan again. — Jacky, Jun 21 '18 at 09:31
Sorry for the long response, but did you try https://stackoverflow.com/questions/50290818/react-navigation-detect-when-screen-is-activated-appear-focus/50290888#50290888 ?. You can detect when the `ActivateScannerPage` when the tab is press — tuledev, Jun 22 '18 at 03:08

score 1 · Answer 1 · answered Sep 30 '18 at 13:38

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;
}

};

score 0 · Answer 2 · answered Jun 22 '18 at 03:13

0

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());
}

answered Jun 22 '18 at 03:13

tuledev

10,177
4
29
49

when I add this, I get an error "undefined is not a function.... this.isFocused". What is reproducible because the function is not defined. What do I have to do in this.isFocused Method? – Jacky Jun 22 '18 at 06:08
It's a method in `ActivateScannerPage`, you have to create it. It will be call when you select the ActivateScannerPage tab, then you can reset `QrCode ` here – tuledev Jun 22 '18 at 11:41

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

2 Answers2