CODEWITHSUNDEEP
javascriptreact-nativefunctionclasscomponents
Kimako
Kimako

Reputation: 625

How to switch a function from a class component to a function component

I used to use class components in react-native. My new app.js file looks like this :

import React, { useState, useEffect } from 'react';
import {Text} from 'react-native';
import AppContext from './AppContext';
import {NavigationContainer} from '@react-navigation/native';
import Splash from './src/components/Splash';
import {MainStackNavigator, BottomTabNavigator} from './Navigation/StackNavigator';

export default function App() {

  Text.defaultProps = Text.defaultProps || {};
  Text.defaultProps.allowFontScaling = false; 

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);

  if (loading) {
    return <Splash />;
  }

  return (
    <AppContext.Provider value={state}>
      <NavigationContainer>
        {!user.loggedIn ? (
          <MainStackNavigator />
        ) : (
          <BottomTabNavigator />
        )}
      </NavigationContainer>
    </AppContext.Provider>
  );
}

How can I add what I used before, componentDidMount or componentWillMount? Because here I would like to add this, and i'm a little lost:

  async UNSAFE_componentWillMount() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("TabBar");
    }
  }

Upvotes: 0

Views: 69

Answers (3)

Gabriel Menezes da Silva
Gabriel Menezes da Silva

Reputation: 602

the declaration of your languageSetup is wrong. You need to do like this, if you want a arrow function:

const languageSetup = async () => {
  //Your function code
}

or

async function languageSetup(){
  //Your function code
}
```.

Upvotes: 1

Hassan Kandil
Hassan Kandil

Reputation: 1866

You should use React.useEffect hook

like this:

  async someFunction() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("TabBar");
    }
  }
  //this will call at each render
  React.useEffect(() => {
    someFunction()
  });

Be warned: not to add async keyword inside the useEffect itself or it will cause a crash to your app

Upvotes: 1

Jignesh Mayani
Jignesh Mayani

Reputation: 7193

As the componentWillMount has been deprecated from the React latest version so, it might not work.

We can move the componentWillMount code to componentDidMount to execute the code without any React warning.

async componentDidMount() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
        i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("TabBar");
    }
}

Upvotes: 1

Related Questions