javascript - Application that reloads when accessing a screen

Question

I am trying to understand the behavior of a screen on my application. I created a 'settings' screen in order to be able to manage, among other things, the languages used on the application, put the terms and propose the disconnection of the application. When I go to this screen, it is displayed for a few seconds, then the application reloads completely, I come back to the main screen and there, at that moment, the settings page is accessible and usable.

I do not understand at all. First display: reloading the app, second display: usable and functional screen ...

Can you please help me understand, see my error? Thanks for your help. This is the Settings screen in question :

import React from "react";
import {
  Text,
  View,
  ScrollView,
  TouchableOpacity,
} from "react-native";
import styles from '../../assets/styles';
import i18n from '../../src/i18n';
import {
  storeAppLang,
  retrieveAppLang,
  cleanUserSession,
  getDeviceType,
  userSessionActive
} from "../../src/common/Preferences";
import { List } from 'react-native-paper';
import Modal from "react-native-simple-modal";
import { Dropdown as MaterialDropdown } from "react-native-material-dropdown-v2";
import AccountInfo from "../../Screens/Account/AccountInfo";


const list = [
  {
    title: i18n.t("settings.action.languages"),
    action: "languages",
  },
  {
    title: i18n.t("about.title"),
    action: "about",
  },
  {
    title: i18n.t("settings.action.terms"),
    action: "terms",
  },
  {
    title: i18n.t("settings.action.disconnect"),
    action: "disconnect",
  },
];

export default class Settings extends React.Component {
  constructor() {
    super();
    this.state = {
      activeSwitch: null,
      modalLang_open: false,
      modalLang_offset: 0,
      lang: "en",
      deviceType: null,
      nb_autoredirection: 0,
      makeDisconnection: null
    };
  }
  modalDidOpen = (key) => {
    //console.log("Modal did close.");
  };

  modalDidClose = (key) => {
    this.setState({ [key]: false });
    //console.log("Modal did close.");
  };

  resetPosition = () =>
    this.setState({
      modalLang_offset: 0,
    });

  openModal = (key, offset) => this.setState({ [key]: true, [offset]: -200 });

  closeModal = (key) => this.setState({ [key]: false });

  toggleSwitch = (switchNumber) => {
    this.setState({
      activeSwitch:
        switchNumber === this.state.activeSwitch ? null : switchNumber,
    });
  };

  getCurrentData = async () => {
    let lang = await retrieveAppLang();
    let deviceType = await getDeviceType();

    if (lang) {
      this.setState({
        lang: lang,
        deviceType: deviceType
      });

    }
  };

  execAction = (val) => {
    switch (val) {  
      case "languages":
        this.openModal("modalLang_open", "modalLang_offset");
        break;
      case "lang_fr":
        storeAppLang("fr");
        i18n.changeLanguage("fr");
        this.setState({ lang: "fr" });
        this.setState({ modalLang_open: false });
        this.props.navigation.navigate("BottomTabNavigator", { lang: "fr" });
        break;
      case "lang_en":
        storeAppLang("en");
        i18n.changeLanguage("en");
        this.setState({ lang: "en" });
        this.setState({ modalLang_open: false });
        this.props.navigation.navigate("BottomTabNavigator", { lang: "en" });
        break;
      case "terms":
        this.props.navigation.navigate("Terms");
        break;
        case "about":
        this.props.navigation.navigate("About");
        break;
      case "assist":
        this.props.navigation.navigate("Contact");
        break;
      case "disconnect":
        this.setState({ makeDisconnection: true });
        cleanUserSession(this.props.navigation);
        break;
      default:
        //Alert.alert("[" + val + "] No action defined...");
    }
  };

  switch = (value) => {
    this.toggleSwitch(1);
  };

  async componentDidMount() {
    // Security : prevent access to this screen if disconnected
    this.props.navigation.addListener("didFocus", async (payload) => {
      if (this.state.makeDisconnection === true) {
        let alreadyConnected = await userSessionActive();

        if (alreadyConnected === true) {
          if (this.state.nb_autoredirection == 0) {
            this.setState({
              nb_autoredirection: 1,
            });
            this.props.navigation.navigate("BottomTabNavigator");
          }
        } else {
          this.props.navigation.navigate("Authentication", {disconnect: true});
        }
      }
    });
  }

  UNSAFE_componentWillMount() {
    this.getCurrentData();
  }

  render() {
    const lang = retrieveAppLang();
    const placeholder = {
      label: i18n.t("settings.action.set"),
      value: null,
      color: "#212121",
    };

    let data_lang = [
      { label: i18n.t("settings.action.langfr"), value: "lang_fr" },
      { label: i18n.t("settings.action.langen"), value: "lang_en" },
    ];

    return (
      <ScrollView contentContainerStyle={{flexGrow: 1, justifyContent: 'center' }}>
        <View>
          {list !== null && list.length > 0 ? (
            list.map((item, i) => (
            <List.Section title={item.title} titleStyle={{fontSize: 16, color: '#F78400'}} key={i.toString()}>
              <List.Accordion
                title={item.action}
                style={{width: '98%'}}
                onPress={() => {
                  this.execAction(item.action);
                }}
                left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../assets/images/logo-weecoop.png')} />}
                >
            </List.Accordion>
          </List.Section>
          ))
      ) : (
        <View style={styles.container}>
            <Text>{"

" + (list === null ? i18n.t("orders.search") : i18n.t("orders.nodata")) + "


"}</Text>
            <Button
              color="#F78400"
              title= 'Back'
              onPress={() => this.props.navigation.goBack()}>BACK
            </Button>
          </View>
      )}
        </View>
        {/*<TouchableOpacity onPress={this.openModal}>
          <Text style={styles.h4}>{i18n.t("settings.action.set")}</Text>
        </TouchableOpacity>*/}
        <Modal
          offset={this.state.modalLang_offset}
          open={this.state.modalLang_open}
          modalDidOpen={() => this.modalDidOpen("modalLang_open")}
          modalDidClose={() => this.modalDidClose("modalLang_open")}
          modalStyle={styles.modalStyle}
          style={{ alignItems: "center", zIndex: 100 }}
          useNativeDriver= {true}
        >
          <View style={{ alignItems: "center" }}>
            <MaterialDropdown
              label={i18n.t("settings.action.languages")}
              data={data_lang}
              value = {this.state.lang}
              baseColor="#212121"
              labelFontSize={18}
              textColor="#212121"
              itemColor="#212121"
              selectedItemColor="#000"
              backgroundColor="transparent"
              pickerStyle={styles.dropdownPickerStyle}
              containerStyle={styles.dropdownContainerStyle}
              itemCount={2}
              dropdownPosition={-5.5}
              labelExtractor={({ label }) => label}
              valueExtractor={({ value }) => value}
              propsExtractor={({ props }, index) => props}
              onChangeText={(value) => this.execAction(value)}
              useNativeDriver= {true}
            />
            <Text>{"
"}</Text>
            <View style={styles.buttonView2}>
              <TouchableOpacity
                style={styles.touchable2}
                onPress={() => this.closeModal("modalLang_open")}
              >
                <View>
                  <Text>
                    {i18n.t("settings.action.disconnect")}
                  </Text>
                </View>
               
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
        <AccountInfo />
      </ScrollView>
    );
  }
}

question from:https://stackoverflow.com/questions/65932763/application-that-reloads-when-accessing-a-screen

Answer 1

Waitting for answers