undefined is not an object (evaluating…)- React Native

Question

I have data (called imageNumber and i) coming from another screen to this screen. I have done everything asynchronously but it still gives me an error in the component as undefined and I can't for the life of me figure out what's the problem with the code.

import React, { useRef, useState, useEffect } from "react";
import {
  SafeAreaView,
  StyleSheet,
  View,
  StatusBar,
  Text,
} from "react-native";
import { DynamicCollage } from "react-native-images-collage";
import { LayoutData } from "react-native-images-collage";

const photos = [
  "https://images.unsplash.com/photo-1551316679-9c6ae9dec224?w=800&q=80",
  "https://images.unsplash.com/photo-1562569633-622303bafef5?w=800&q=80",
  "https://images.unsplash.com/photo-1503656142023-618e7d1f435a?w=800&q=80",
];

export default CollageScreen = ({ navigation, route }) => {
  const { imageNumber, i } = route.params;
  const [key, setKey] = useState();
  const [numberOfImages, setNumberOfImages] = useState();
  const [loading, setLoading] = useState(false);
  const collageRef = useRef(null);


  // const NumberOfImages = 3;
  // const index = 3;

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const numberOfImages = await imageNumber;
        const key = await i;
        setKey(key);
        setNumberOfImages(numberOfImages);
      } catch (error) {
        console.log(err);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={styles.sectionContainer}>
          {loading ? (
            <View>
              <Text>loading...</Text>
            </View>
          ) : (
              <DynamicCollage
                ref={collageRef}
                direction={LayoutData[numberOfImages][key].direction}
                width={"100%"}
                height={400}
                images={photos}
                matrix={LayoutData[numberOfImages][key].matrix}
                separatorStyle={{ borderWidth: 2, backgroundColor: "#323031" }}
                containerStyle={{ backgroundColor: "#f1f1f1" }}
                // imageFocussedStyle={{ backgroundColor: "blue" }}
                imageSwapStyle={{ backgroundColor: "#323031" }}
                imageSwapStyleReset={{ color: "red", backgroundColor: "red" }}
              />
          )}
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 12,
  },
});

here is the full code regarding the screen and this is the error given

TypeError: undefined is not an object (evaluating '_reactNativeImagesCollage.LayoutData[{ numberOfImages: numberOfImages }][{ key: key }]')

This error is located at: in Unknown (at SceneView.tsx:122) in StaticContainer in StaticContainer (at SceneView.tsx:115) in EnsureSingleNavigator (at SceneView.tsx:114) in SceneView (at useDescriptors.tsx:153) in RCTView (at View.js:34) in View (at CardContainer.tsx:245) in RCTView (at View.js:34) in View (at CardContainer.tsx:244) in RCTView (at View.js:34) in View (at CardSheet.tsx:33) in ForwardRef(CardSheet) (at Card.tsx:573) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555) in PanGestureHandler (at GestureHandlerNative.tsx:13) in PanGestureHandler (at Card.tsx:549) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544) in RCTView (at View.js:34) in View (at Card.tsx:538) in Card (at CardContainer.tsx:206) in CardContainer (at CardStack.tsx:620) in RCTView (at View.js:34) in View (at Screens.tsx:84) in MaybeScreen (at CardStack.tsx:613) in RCTView (at View.js:34) in View (at Screens.tsx:54) in MaybeScreenContainer (at CardStack.tsx:495) in CardStack (at StackView.tsx:462) in KeyboardManager (at StackView.tsx:458) in SafeAreaProviderCompat (at StackView.tsx:455) in RCTView (at View.js:34) in View (at StackView.tsx:454) in StackView (at createStackNavigator.tsx:87) in StackNavigator (at CollageStackScreens.js:11) in CollageStackScreens (at SceneView.tsx:122) in StaticContainer in StaticContainer (at SceneView.tsx:115) in EnsureSingleNavigator (at SceneView.tsx:114) in SceneView (at useDescriptors.tsx:153) in RCTView (at View.js:34) in View (at BottomTabView.tsx:55) in SceneContent (at BottomTabView.tsx:171) in RCTView (at View.js:34) in View (at ResourceSavingScene.tsx:68) in RCTView (at View.js:34) in View (at ResourceSavingScene.tsx:63) in ResourceSavingScene (at BottomTabView.tsx:165) in RCTView (at View.js:34) in View (at src/index.native.js:123) in ScreenContainer (at BottomTabView.tsx:145) in SafeAreaProviderCompat (at BottomTabView.tsx:144) in BottomTabView (at createBottomTabNavigator.tsx:45) in BottomTabNavigator (at MainStackScreens.js:141) in Unknown (at SceneView.tsx:122) in StaticContainer in StaticContainer (at SceneView.tsx:115) in EnsureSingleNavigator (at SceneView.tsx:114) in SceneView (at useDescriptors.tsx:153) in RCTView (at View.js:34) in View (at CardContainer.tsx:245) in RCTView (at View.js:34) in View (at CardContainer.tsx:244) in RCTView (at View.js:34) in View (at CardSheet.tsx:33) in ForwardRef(CardSheet) (at Card.tsx:573) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555) in PanGestureHandler (at GestureHandlerNative.tsx:13) in PanGestureHandler (at Card.tsx:549) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544) in RCTView (at View.js:34) in View (at Card.tsx:538) in Card (at CardContainer.tsx:206) in CardContainer (at CardStack.tsx:620) in RCTView (at View.js:34) in View (at Screens.tsx:84) in MaybeScreen (at CardStack.tsx:613) in RCTView (at View.js:34) in View (at Screens.tsx:54) in MaybeScreenContainer (at CardStack.tsx:495) in CardStack (at StackView.tsx:462) in KeyboardManager (at StackView.tsx:458) in RNCSafeAreaProvider (at SafeAreaContext.tsx:74) in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42) in SafeAreaProviderCompat (at StackView.tsx:455) in RCTView (at View.js:34) in View (at StackView.tsx:454) in StackView (at createStackNavigator.tsx:87) in StackNavigator (at AppStackScreen.js:15) in Unknown (at App.js:14) in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409) in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91) in ThemeProvider (at NavigationContainer.tsx:90) in ForwardRef(NavigationContainer) (at App.js:13) in UserProvider (at App.js:12) in FirebaseProvider (at App.js:11) in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in DevAppContainer (at AppContainer.js:121) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
node_modules/regenerator-runtime/runtime.js:293:29 in invoke
node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
node_modules/regenerator-runtime/runtime.js:154:27 in invoke
node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue

[native code]:null in flushedQueue
[native code]:null in invokeCallbackAndReturnFlushedQueue

user10384449 user10384449 · Accepted Answer · 2021-03-03T15:54:33

direction={ numberOfImages && LayoutData[numberOfImages][key].direction}
matrix={numberOfImages && LayoutData[numberOfImages][key].matrix}
try the above null check

undefined is not an object (evaluating…)- React Native

1 Answers