Error appeared after I add Google AdMob code - react-native

Question

I encounter an error message when I am trying to add a code for inserting Google AdMob advertisement into the app project. The code is:
<AdMobBanner
bannerSize="banner"
adUnitID="ca-app-pub-3038938528713825/5887864345"
testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
/>
snack.expo.io shown an error message and a weblink to the error message after I added the code above. The error message is:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined
I could not understand at all what causes this error to happen when I insert the code for Google AdMob into the project.
Here is the entire code of my project:
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {AdMobBanner} from 'expo';
const HomeScreen = ({ navigation }) => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Page 2" onPress={() => navigation.navigate('Page2')}
/>
<AdMobBanner
bannerSize="banner"
adUnitID="ca-app-pub-3038938528713825/5887864345"
testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
/>
</View>
);
}
const Page2Screen = ({ navigation }) => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Page 2 Screen</Text>
<Button
title="Go to Page 3"
onPress={() => navigation.navigate('Page3')}
/>
</View>
);
}
const Page3Screen = ({ navigation }) => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Page 3 Screen</Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
<Button
title="Go back to first screen in stack"
onPress={() => navigation.popToTop()}
/>
</View>
);
}
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Page2" component={Page2Screen} />
<Stack.Screen name="Page3" component={Page3Screen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Here the code of my package.json:
{
"dependencies": {
"react-native-screens": "~3.8.0",
"#react-navigation/stack": "*",
"#react-navigation/native": "*",
"react-native-gesture-handler": "~1.10.2",
"react-native-safe-area-context": "3.3.2"
}
}

Answer 1

You don't have expo listed as a dependency in your package.json, so your import will be undefined. Did you start the project with expo init?
You can try adding expo to your dependencies or initializing a new project with expo. I recommend starting a new project to get the benefit of any additional setup expo may do.