reactnative IllegalViewOperationException: Unable to execute operation dispatchViewManagerCommand on view with tag: 1909 since the view does not exist

Question

I have the following code and getting this error only on my android device: IllegalViewOperationException: Unable to execute operation dispatchViewManagerCommand on view with tag: 1909 since the view does not exist

If user types to the input field and press next than the error occurs. If the input field is empty, and when I click next than no error.

import React, { useContext, useEffect, useState, useCallback } from 'react';
import { TouchableHighlight } from 'react-native';
import { Text, View, TextInput } from 'react-native';
const TestScreen = () => {
  const [page, setPage] = useState(0);
  return (
    <View
      style={{
        flex: 1,
        marginTop: 30,
        flexDirection: 'column',
        position: 'relative',
      }}
    >
      {page === 0 && (
        <View>
          <TextInput placeholder='Title' />
          <TouchableHighlight onPress={() => setPage(page + 1)}>
            <Text style={{ color: '#fff' }}>press</Text>
          </TouchableHighlight>
        </View>
      )}
      {page === 1 && (
        <View>
          <Text style={{ color: '#fff' }}>Hello</Text>
          <TouchableHighlight onPress={() => setPage(page - 1)}>
            <Text style={{ color: '#fff' }}>press</Text>
          </TouchableHighlight>
        </View>
      )}
    </View>
  );
};
export default TestScreen;

android version 11

packages: "@react-native-community/async-storage": "~1.11.0", "@react-native-community/blur": "^3.6.0", "@react-native-community/hooks": "^2.6.0", "@react-native-community/masked-view": "0.1.10", "@react-native-community/netinfo": "5.9.2", "@react-native-community/slider": "3.0.0", "@react-native-community/viewpager": "3.3.0", "@react-native-firebase/analytics": "^10.1.0", "@react-navigation/bottom-tabs": "^5.8.0", "@react-navigation/material-bottom-tabs": "^5.2.16", "@react-navigation/native": "^5.7.3", "@react-navigation/stack": "^5.9.0", "aws-sdk": "^2.827.0", "axios": "^0.21.0", "babel-plugin-transform-inline-environment-variables": "^0.4.3", "date-fns": "^2.21.3", "expo": "~38.0.8", "expo-av": "~8.2.1", "expo-blur": "^9.0.3", "expo-constants": "~9.1.1", "expo-error-recovery": "~1.2.1", "expo-file-system": "~9.0.1", "expo-firebase-analytics": "~2.4.1", "expo-font": "~8.2.1", "expo-image-picker": "~8.3.0", "expo-linear-gradient": "^8.2.2", "expo-notifications": "~0.3.3", "expo-permissions": "~9.0.1", "expo-screen-orientation": "~1.1.1", "expo-splash-screen": "^0.5.0", "expo-status-bar": "^1.0.2", "expo-updates": "~0.2.10", "expo-video-player": "^1.6.1", "firebase": "^8.1.1", "jwt-decode": "^2.2.0", "moment": "^2.29.1", "react": "~16.11.0", "react-aws-s3": "^1.3.0", "react-dom": "~16.11.0", "react-native": "~0.62.2", "react-native-blur": "^3.2.2", "react-native-calendars": "^1.1260.0", "react-native-cli": "^2.0.1", "react-native-dotenv": "^2.5.0", "react-native-easy-content-loader": "^0.3.2", "react-native-elements": "^3.0.0-alpha.1", "react-native-gesture-handler": "~1.6.0", "react-native-head-tab-view": "^3.0.2", "react-native-looped-carousel-improved": "^1.0.2", "react-native-popup-menu": "^0.15.9", "react-native-reanimated": "~1.9.0", "react-native-safe-area-context": "3.0.7", "react-native-screens": "~2.9.0", "react-native-scrollable-tab-view": "^1.0.0", "react-native-scrollable-tab-view-collapsible-header": "0.0.5", "react-native-smooth-picker": "^1.1.4", "react-native-status-bar-height": "^2.6.0", "react-native-svg": "12.1.0", "react-native-tab-view": "^2.16.0", "react-native-unimodules": "~0.10.1", "react-native-vector-icons": "^7.0.0", "react-native-web": "^0.15.0", "splash-screen": "^4.0.1", "swr": "^0.3.11"

Answer 1

In my case, Stack Navigator was set to hidden after the global timer timeout and then set to display. I correct it by navigating to my init screen when the global timer timeout.