react-nativeexporeact-navigationstack-navigator

NSRangeException error when using Stack Navigator (Expo)

I am trying to make a Stack Navigation in my Expo app, but when I use it I get this error when I try to open it on my phone:

NSRangeException: *** -[__NSArrayM objectAtIndexedSubscript:]: index 0 beyond bounds for empty array

RCTFatalException
facebook::react::RCTNativeModule::callSerializableNativeHook(unsigned int, folly::dynamic&&)
facebook::react::RCTNativeModule::callSerializableNativeHook(unsigned int, folly::dynamic&&)
facebook::react::JSIExecutor::nativeCallSyncHook(facebook::jsi::Value const*, unsigned long)
non-virtual thunk to reanimated::ReanimatedHermesRuntime::~ReanimatedHermesRuntime()
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::hermes::HermesRuntimeImpl::HFContext::func(void*, hermes::vm::Runtime&, hermes::vm::NativeArgs)
hermes::vm::NativeFunction::_nativeCall(hermes::vm::NativeFunction*, hermes::vm::Runtime&)
hermes::vm::Interpreter::handleCallSlowPath(hermes::vm::Runtime&, hermes::vm::PinnedHermesValue*)
hermes::vm::CallResult<hermes::vm::HermesValue, (hermes::vm::detail::CallResultSpecialize)2> hermes::vm::Interpreter::interpretFunction<false, false>(hermes::vm::Runtime&, hermes::vm::InterpreterState&)
hermes::vm::Runtime::interpretFunctionImpl(hermes::vm::CodeBlock*)
hermes::vm::Runtime::runBytecode(std::__1::shared_ptr<hermes::hbc::BCProviderBase>&&, hermes::vm::RuntimeModuleFlags, llvh::StringRef, hermes::vm::Handle<hermes::vm::Environment>, hermes::vm::Handle<hermes::vm::HermesValue>)
facebook::hermes::HermesRuntimeImpl::evaluatePreparedJavaScript(std::__1::shared_ptr<facebook::jsi::PreparedJavaScript const> const&)
facebook::hermes::HermesRuntime::evaluateJavaScriptWithSourceMap(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> const&)
facebook::hermes::HermesRuntimeImpl::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> const&)
facebook::react::HermesExecutor::HermesExecutor(std::__1::shared_ptr<facebook::jsi::Runtime>, std::__1::shared_ptr<facebook::react::ExecutorDelegate>, std::__1::shared_ptr<facebook::react::MessageQueueThread>, std::__1::function<void (std::__1::function<void ()> const&, std::__1::function<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> ()>)> const&, std::__1::function<void (facebook::jsi::Runtime&)>)
facebook::react::JSIExecutor::loadBundle(std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const>>, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>>)
facebook::react::NativeToJsBridge::getDecoratedNativeMethodCallInvoker(std::__1::shared_ptr<facebook::react::NativeMethodCallInvoker>) const
facebook::react::NativeToJsBridge::getDecoratedNativeMethodCallInvoker(std::__1::shared_ptr<facebook::react::NativeMethodCallInvoker>) const
facebook::react::tryAndReturnError(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::tryFunc(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::runAsync(std::__1::function<void ()>)
5A6C1F41-BF70-32F6-A1D6-5B894DD21362
5A6C1F41-BF70-32F6-A1D6-5B894DD21362
5A6C1F41-BF70-32F6-A1D6-5B894DD21362
CFRunLoopRunSpecific
RCTConvertArrayValue
5623831D-5719-33A9-9691-759F47D714D1
_pthread_start
thread_start

here is the App.js:

import React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
// import { StatusBar } from 'expo-status-bar';
// import { StyleSheet, Text, View } from 'react-native';
import LandingPage from './components/LandingPage';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName='Landing' ///the name of the initial screen
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Landing" component={LandingPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And if needed the quickly drawn up LandingPage:

import React from 'react';
import { View, Text, Button } from 'react-native';
//import SpinningEarth from './SpinningEarth';
import { useNavigation } from '@react-navigation/native';
import { colors, commonStyles } from '../styles/commonStyles';

const LandingPage = () => {
  // const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.background }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
        <Text style={{ fontSize: 24, color: 'blue' }}>Town</Text>
        <Text style={{ fontSize: 24, color: 'green' }}>Trekkr</Text>
      </View>
      <View style={{ marginTop: 20 }}>
        <Button title="Sign Up" />
        <Button title="Login" />
      </View>
    </View>
  );
};

export default LandingPage;

If I were to comment out all the StackNavigation and just have my App.js return <LandingPage /> it works just fine and displays the landing page. I am planning on adding more pages to the navigation but I tested with another page in the stack and got the same error as well. I've tried googling for this error but can not find anything relatively related to where my issue arises. Could it be that the Stack is not being initialized properly? I have followed the React-Native / Expo guide for the stack navigator (installed all the needed dependencies, etc).

Solution

  • From the code I see no problem, try below step to run the app

    import 'react-native-gesture-handler';

    sometimes you just need to clear the dep and cache to run the app, do this regularly if you face any issue.

    let me know if still face this issue.

    reference: https://reactnavigation.org/docs/stack-navigator/