React-Native TabNavigator with camera (camera is always on)

Question

I have TabNavigator with camera inside. Code Example:

My index.android.js

const MainNavigator = TabNavigator({
    Home: { screen: QRcreatorScreen },
    Contacts: { screen: ContactsScreen },
    Camera: { screen: CameraScreen },
    Profile: { screen: ProfileScreen },
  }, {
  tabBarPosition: 'bottom',
  lazy: true
});

and my camera page:

export default class CameraScreen extends React.Component {

  static navigationOptions = { 
    title: 'Camera', 
  };

  emitContact() {
    alert("Contact been added");
  }

  render() {
    return (
        <QRCodeScanner onRead={(e) => {
                               SetNewContact(e.data, () => { this.emitContact() })
                            }} 
             topContent={<Text>Just show me another code</Text>} 
             showMarker={true}
             bottomContent={(
                <TouchableOpacity style={styles.buttonTouchable}>
                    <Text style={styles.buttonText} 
                          onPress={ () => this.props.navigation.dispatch(resetAction) }>OK. Got it!
                    </Text>
                </TouchableOpacity>
           )}
        />
    );
  };
}

Just simply QR Code reader.

The problem is next: when in TabNavigator option is set lazy == false, TabNavigator render all his scenes when the app is starting.

When lazy == true, scenes are rendering when they are called, but when we call last scene (in our case Profile), all the scenes that are in front of are rendering too.

So when I tap on Profile, there is needed some time to load all the scenes, and it is really bad for app performance.

What I need to do to make the camera page rendered only when is called?

And another question: when we leave camera scene, the camera is still working, how I can turn it off when leave the scene?

I'm using package react-native-qrcode-scanner which is use react-native-camera: ^0.10.0

Answer 1

If there is interesting for someone i found an answer.

I'm using react-native-tab-navigator with native StackNavigator.

How I close camera:

  render() {
    let QrScanner = this.state.showScanner ? <QrScannerElement navigation={this.props.navigation}/> : null
    return (
      <View style={styles.container}>
        {QrScanner}      
      </View>
    );
  };

Changing state is active when:

  componentDidMount () {
    event.addListener('cameraUnpressed', () => {
      this.setState({showScanner: false})
    });
    event.addListener('camera', () => { 
      this.setState({showScanner: true})
    });    
  }

in react-native-tab-navigator we can get state his.state.selectedTab and if it is not "camera" in my case, we send the event.

My example:

  cameraPressed() {
    this.setState({ selectedTab: 'camera' });
    event.emit('camera');
  }

  cameraUnPressed(page) {
    if(this.state.selectedTab == 'camera') event.emit('cameraUnpressed');
    this.setState({ selectedTab: page });
  }