реакция-родной-камеры зависает, когда снова на экране

Question

Я разрабатываю приложение для школьного проекта, и в этом приложении у меня есть компонент камеры в каждом представлении. Когда я go снова вижу изображение, камера останавливается.

Мой код одного вида:

class LoginView extends React.Component {
  constructor(props) {
    super(props);
  }

  togglePseudo = pseudo => {
    const action = {type: 'USER_PSEUDO', value: pseudo};
    this.props.dispatch(action);
  };

  render() {
    const {navigate} = this.props.navigation;
    const userPseudo = this.props.userPseudo;

    return (
      <View style={style.mainContainer}>
        <RNCamera
          style={style.backgroundCamera}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          androidCameraPermissionOptions={{
            title: "Permission d'utiliser la camera",
            message: "L'application necessite l'autorisation de la camera",
            buttonPositive: 'Autoriser',
            buttonNegative: 'Refuser',
          }}
        />
        <View style={style.goContainer}>
          <TouchableOpacity
            style={style.backButton}
            onPress={() => navigate('HomeView')}>
            <Image source={require('assets/images/back-button.png')} />
          </TouchableOpacity>
          <View style={style.centeredElements}>
            <Text style={style.titleMission}>Mission "Pc"</Text>
            <View style={style.modalChoosePseudo}>
              <Text style={style.modaltitle}>Choisir un pseudo</Text>
              <TextInput
                style={style.pseudoInput}
                onChangeText={pseudo => this.togglePseudo(pseudo)}
                value={userPseudo}
              />
              {userPseudo !== '' ? (
                <TouchableOpacity
                  style={style.validateButton}
                  onPress={() => navigate('InGame')}>
                  <Text style={style.buttonText}>Valider</Text>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  style={[style.validateButton, style.validateButtonDisabled]}
                  onPress={() =>
                    Alert.alert('Alerte', 'Veuillez entrer un pseudo')
                  }>
                  <Text
                    style={[style.buttonText, style.validateButtonDisabled]}>
                    Valider
                  </Text>
                </TouchableOpacity>
              )}
            </View>
            <Image
              style={style.logoDimagine}
              source={require('assets/images/logo_title_vertical.png')}
            />
          </View>
        </View>
      </View>
    );
  }
}

Я уже искал решения, поэтому попробовал то, что нашел. Я пытаюсь использовать componentDidMount с willFocus и willBlur, но он никогда не обнаруживает их:

componentDidMount() {
    const {navigation} = this.props;
    navigation.addListener('willFocus', () =>
      this.setState({focusedScreen: true}),
    );
    navigation.addListener('willBlur', () =>
      this.setState({focusedScreen: false}),
    );
  }