title: React Native Cannot update a component from inside the function body of a different component
body: <p>if I want to check if user is logged in I gets error: <strong>Cannot update a component from inside the function body of a different component.</strong></p>
  <p>I have components:</p>
  <p>App.js</p>
  <pre><code>import {View} from 'native-base';
  import React, {Component} from 'react';
  import {StyleSheet, SafeAreaView} from 'react-native';
  import {Provider} from 'react-redux';
  import {createStore, applyMiddleware} from 'redux';
  import ReduxThunk from 'redux-thunk';
  import reducers from './reducers';
  import StartUpRouter from './routers/StartUpRouter';
  
  class App extends Component {
      render() {
          const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
          return (
              &lt;SafeAreaView style={styles.container}&gt;
                  &lt;Provider store={store}&gt;
                      &lt;StartUpRouter /&gt;
                  &lt;/Provider&gt;
              &lt;/SafeAreaView&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
      },
  });
  
  export default App;
  </code></pre>
  <p>----------------------------------- Routers folder ------------------------------------</p>
  <p>StartUpRouter.js</p>
  <pre><code>import React, {Component, useEffect} from 'react';
  import {View, Text, ActivityIndicator, StyleSheet} from 'react-native';
  import {NavigationContainer} from '@react-navigation/native';
  import {createStackNavigator} from '@react-navigation/stack';
  import * as RootNavigation from '../RootNavigation';
  import {loginUser} from '../actions';
  import {connect} from 'react-redux';
  import LoginRouter from './LoginRouter';
  
  const Stack = createStackNavigator();
  
  function HomeScreen() {
      return (
          &lt;View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}&gt;
              &lt;Text&gt;Home Screen&lt;/Text&gt;
          &lt;/View&gt;
      );
  }
  
  class StartUpRouter extends Component {
      componentDidMount() {
          this.props.loginUser();
      }
  
      render() {
          const {auth} = this.props;
          if (auth.loading) {
              return (
                  &lt;View style={styles.loading}&gt;
                      &lt;ActivityIndicator /&gt;
                  &lt;/View&gt;
              );
          } else {
              if (auth.isUserLogin) {
                  return (
                      &lt;NavigationContainer ref={RootNavigation.navigationRef}&gt;
                          &lt;Stack.Navigator
                              screenOptions={{
                                  headerTitleStyle: {
                                      fontWeight: 'bold',
                                  },
                              }}
                              initialRouteName=&quot;HomeScreen&quot;&gt;
                              &lt;Stack.Screen
                                  name=&quot;HomeScreen&quot;
                                  component={HomeScreen}
                                  options={{title: 'Please login'}}
                              /&gt;
                          &lt;/Stack.Navigator&gt;
                      &lt;/NavigationContainer&gt;
                  );
              } else {
                  return &lt;LoginRouter {...this.props} /&gt;;
              }
          }
      }
  }
  
  const styles = StyleSheet.create({
      loading: {
          flex: 1,
          justifyContent: 'center',
      },
  });
  
  const mapStateToProps = (state) =&gt; {
      const {auth} = state;
      return {auth};
  };
  
  export default connect(mapStateToProps, {loginUser})(StartUpRouter);
  </code></pre>
  <p>LoginRouter.js</p>
  <pre><code>import React, {Component} from 'react';
  import {Text, View, StyleSheet} from 'react-native';
  import {NavigationContainer} from '@react-navigation/native';
  import {createStackNavigator} from '@react-navigation/stack';
  import * as RootNavigation from '../RootNavigation';
  import DefaultLogin from '../components/LoginScreens/DefaultLogin';
  
  const Stack = createStackNavigator();
  
  class LoginRouter extends Component {
      render() {
          return (
              &lt;NavigationContainer ref={RootNavigation.navigationRef}&gt;
                  &lt;Stack.Navigator initialRouteName=&quot;DefaultLogin&quot;&gt;
                      &lt;Stack.Screen
                          name=&quot;DefaultLogin&quot;
                          component={DefaultLogin}
                          options={{title: 'Please login'}}
                      /&gt;
                  &lt;/Stack.Navigator&gt;
              &lt;/NavigationContainer&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({});
  
  export default LoginRouter;
  </code></pre>
  <p>----------------------------------- /Routers folder ------------------------------------</p>
  <p>----------------------------------- Reducers folder ------------------------------------</p>
  <p>AuthReducer.js</p>
  <pre><code>import * as types from '../actions/types';
  const INITIAL_STATE = {
      loginUser: null,
      isUserLogin: null,
      loading: false,
  };
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
          case types.LOGIN_USER:
              return {...state, loading: true};
          case types.LOGIN_USER_SUCCESS:
              return {
                  ...state,
                  ...INITIAL_STATE,
                  isUserLogin: true,
                  loginUser: action.payload,
              };
          case types.LOGIN_USER_FAIL:
              return {
                  ...state,
                  loading: false,
                  isUserLogin: false,
              };
  
          default:
              return state;
      }
  };
  </code></pre>
  <p>index.js</p>
  <pre><code>import {combineReducers} from 'redux';
  import AuthReducer from './AuthReducer';
  
  export default combineReducers({
      auth: AuthReducer,
  });
  </code></pre>
  <p>----------------------------------- /Reducers folder ------------------------------------</p>
  <p>----------------------------------- Actions folder ------------------------------------</p>
  <p>AuthActions.js</p>
  <pre><code>import * as types from './types';
  import AsyncStorage from '@react-native-community/async-storage';
  import * as RootNavigation from '../RootNavigation';
  
  export const loginUser = () =&gt; async (dispatch) =&gt; {
      dispatch({type: types.LOGIN_USER});
      const loginUser = await AsyncStorage.getItem('loginUser');
      if (loginUser) {
          loginUserSuccess(dispatch, loginUser);
      } else {
          loginUserFail(dispatch);
      }
  };
  
  const loginUserFail = (dispatch) =&gt; {
      dispatch({type: types.LOGIN_USER_FAIL});
  };
  
  const loginUserSuccess = (dispatch, loginUser) =&gt; {
      dispatch({
          type: types.LOGIN_USER_SUCCESS,
          payload: loginUser,
      });
  };
  </code></pre>
  <p>index.js</p>
  <pre><code>export * from './AuthActions';
  </code></pre>
  <p>types.js</p>
  <pre><code>export const LOGIN_USER = 'login_user';
  export const LOGIN_USER_SUCCESS = 'login_user_success';
  export const LOGIN_USER_FAIL = 'login_user_fail';
  </code></pre>
  <p>----------------------------------- /Actions folder ------------------------------------</p>
  <p>-------------------------- componenst folder/common folder ----------------------------</p>
  <p>index.js</p>
  <pre><code>export * from './SimpleHeader';
  </code></pre>
  <p>SimpleHeader.js</p>
  <pre><code>import React, {Component} from 'react';
  import {Text, View, StyleSheet} from 'react-native';
  
  class SimpleHeader extends Component {
      render() {
          const {headerStyle, headerTextStyle} = styles;
          const {headerText} = this.props;
          return (
              &lt;View style={headerStyle}&gt;
                  &lt;View&gt;
                      &lt;Text style={headerTextStyle}&gt;{headerText}&lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      headerStyle: {
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'flex-start',
      },
      headerTextStyle: {
          fontSize: 25,
          paddingLeft: 25,
      },
  });
  
  export {SimpleHeader};
  </code></pre>
  <p>-------------------------- /componenst_folder/common_folder ----------------------------</p>
  <p>-------------------------- componenst_folder/LoginScreens_folder ----------------------------</p>
  <p>DefaultLogin.js</p>
  <pre><code>import React, {Component} from 'react';
  import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';
  import {SimpleHeader} from '../common';
  import LinearGradient from 'react-native-linear-gradient';
  import MaskedView from '@react-native-community/masked-view';
  import Config from 'react-native-config';
  import {Button} from 'native-base';
  
  class DefaultLogin extends Component {
      render() {
          const {navigation} = this.props;
          {* if I comment navigation.setOption() function the error disappear *}
          navigation.setOptions({
              headerTitle: (props) =&gt; &lt;SimpleHeader headerText=&quot;Login&quot; /&gt;,
          });
  
          const {
              container,
              maskViewContainer,
              maskViewObj,
              linearGradientObj,
              qrButtonContainer,
              qrCodeText,
              button,
              buttonTextStyle,
              footerStyle,
              footerTextStyle,
          } = styles;
  
          return (
              &lt;View style={container}&gt;
                  &lt;View style={maskViewContainer}&gt;
                      &lt;MaskedView
                          style={maskViewObj}
                          maskElement={
                              &lt;View&gt;
                              &lt;/View&gt;
                          }&gt;
                          &lt;LinearGradient
                              colors={['#00A8B0', '#78BE20']}
                              style={linearGradientObj}
                              start={{x: 0, y: 0}}
                              end={{x: 1, y: 0}}
                          /&gt;
                      &lt;/MaskedView&gt;
                  &lt;/View&gt;
                  &lt;View style={qrButtonContainer}&gt;
                      &lt;Text style={qrCodeText}&gt;
                          For login please scan QR CODE
                      &lt;/Text&gt;
                      &lt;Button
                          block
                          onPress={() =&gt;
                              this.props.navigation.navigate('barcodeLogin')
                          }
                          style={button}&gt;
                          &lt;Text style={buttonTextStyle}&gt;Login by QR CODE&lt;/Text&gt;
                      &lt;/Button&gt;
                  &lt;/View&gt;
                  &lt;View style={footerStyle}&gt;
                      &lt;Text style={footerTextStyle}&gt;
                          Use username and password
                      &lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          marginTop: 50,
      },
      maskViewObj: {
          flex: 1,
          flexDirection: 'row',
      },
      linearGradientObj: {
          flex: 1,
      },
      maskViewContainer: {
          alignItems: 'center',
          height: 250,
      },
      qrButtonContainer: {
          height: 100,
          flex: 1,
          width: null,
          marginLeft: 10,
          marginRight: 10,
          marginTop: 60,
          alignItems: 'center',
      },
      qrCodeText: {
          color: '#525F6B',
          fontSize: 14,
          marginBottom: 10,
      },
      button: {
          backgroundColor: '#005691',
          borderRadius: 0,
      },
      buttonTextStyle: {
          color: '#FFFFFF',
          fontSize: 22,
          marginLeft: 30,
          marginRight: 30,
      },
      footerStyle: {
          height: 30,
          flex: 1,
          width: null,
          justifyContent: 'flex-end',
          alignItems: 'center',
          marginBottom: 30,
      },
      footerTextStyle: {
          color: '#005691',
      },
  });
  
  export default DefaultLogin;
  </code></pre>
  <p>-------------------------- /componenst_folder/LoginScreens_folder ----------------------------</p>
  <p>Basically this is entyre application.</p>
  <p>If I comment function</p>
  <pre><code>navigation.setOptions({
              headerTitle: (props) =&gt; &lt;SimpleHeader headerText=&quot;Login&quot; /&gt;,
          });
  </code></pre>
  <p>the error: <strong>Cannot update a component from inside the function body of a different component</strong> disappear</p>
  <p>Log from console:</p>
  <pre><code>Warning: Cannot update a component from inside the function body of a different component.
      in DefaultLogin (at SceneView.tsx:122)
      in StaticContainer
      in StaticContainer (at SceneView.tsx:115)
      in EnsureSingleNavigator (at SceneView.tsx:114)
      in SceneView (at useDescriptors.tsx:150)
      in RCTView (at View.js:34)
      in View (at CardContainer.tsx:221)
      in RCTView (at View.js:34)
      in View (at CardContainer.tsx:220)
      in RCTView (at View.js:34)
      in View (at CardSheet.tsx:33)
      in ForwardRef(CardSheet) (at Card.tsx:563)
      in RCTView (at View.js:34)
      in View (at createAnimatedComponent.js:165)
      in AnimatedComponent (at createAnimatedComponent.js:215)
      in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:545)
      in PanGestureHandler (at GestureHandlerNative.tsx:13)
      in PanGestureHandler (at Card.tsx:539)
      in RCTView (at View.js:34)
      in View (at createAnimatedComponent.js:165)
      in AnimatedComponent (at createAnimatedComponent.js:215)
      in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:535)
      in RCTView (at View.js:34)
      in View (at Card.tsx:529)
      in Card (at CardContainer.tsx:189)
      in CardContainer (at CardStack.tsx:558)
      in RCTView (at View.js:34)
      in View (at Screens.tsx:69)
      in MaybeScreen (at CardStack.tsx:551)
      in RCTView (at View.js:34)
      in View (at Screens.tsx:48)
      in MaybeScreenContainer (at CardStack.tsx:461)
      in CardStack (at StackView.tsx:458)
      in KeyboardManager (at StackView.tsx:456)
      in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
      in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
      in SafeAreaProviderCompat (at StackView.tsx:453)
      in RCTView (at View.js:34)
      in View (at StackView.tsx:452)
      in StackView (at createStackNavigator.tsx:84)
      in StackNavigator (at LoginRouter.js:14)
      in EnsureSingleNavigator (at BaseNavigationContainer.tsx:390)
      in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
      in ThemeProvider (at NavigationContainer.tsx:90)
      in ForwardRef(NavigationContainer) (at LoginRouter.js:13)
      in LoginRouter (at StartUpRouter.js:61)
      in StartUpRouter (created by ConnectFunction)
      in ConnectFunction (at App.js:16)
      in Provider (at App.js:15)
      in RCTSafeAreaView (at SafeAreaView.js:51)
      in ForwardRef(SafeAreaView) (at App.js:14)
      in App (at renderApplication.js:45)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:106)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:132)
      in AppContainer (at renderApplication.js:39)
  </code></pre>
  <p>Could somebody help please?</p>
  <p>Thanks</p>