React Native with Expo "ReferenceError: Can't find variable: Alert"

Question

I am a newcomer for React Native using expo but got the error even in the initial step. I just updated App.js and run the project with 'yarn start'. At first time with the default setting, it was okay but after I input some of the codes to get the location data from the device, I got the error. Could you give me an advice? Thank you in advance.

import React, {useEffect, useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [latitude, setLatitude] = useState();
  const [longitude, setLongitude] = useState();

  const getLocation = async () => {
    try {
      const response = Location.requestPermissionsAsync();
      const location = await Location.getCurrentPositionAsync();
      const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync();

      setLatitude({ latitude });
      setLongitude({ longitude });
      print("check: ", latitude, longitude);
    } catch (error) {
      Alert.alert("Cannot find where you are.");
    }
  }

  useEffect(() => {
    getLocation()
  },[])

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>{latitude}- {longitude} </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[Unhandled promise rejection: ReferenceError: Can't find variable: Alert]
* App.js:9:22 in getLocation
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:274:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:170:17 in PromiseImpl$argument_0
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
- node_modules/regenerator-runtime/runtime.js:169:31 in PromiseImpl$argument_0
- node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:219:8 in exports.async
* http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:123994:40 in getLocation
* App.js:27:2 in App
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16921:31 in commitHookEffectList
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16970:29 in commitPassiveHookEffects
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20061:28 in flushPassiveEffectsImpl
* [native code]:null in flushPassiveEffectsImpl
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18920:21 in renderRoot
* [native code]:null in renderRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21822:15 in scheduleRootUpdate
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23042:20 in ReactNativeRenderer.render
- node_modules/react-native/Libraries/ReactNative/renderApplication.js:52:52 in renderApplication
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:10 in runnables.appKey.run
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:197:26 in runApplication
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

Answer 1

Add Alert to your import react-native statement. Below import should do it.

import { StyleSheet, Text, View, Alert } from 'react-native';