ive been trying to set my navigation with react native using react-navigation/stack but seem to be missing something. here is my code:
import "react-native-gesture-handler";
import * as React from "react";
import { Button, View, Text } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate("Details")}
/>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress={() => navigation.navigate("Details")}
/>
</View>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
when i try to run the app on web using yarm web
the app runs perfectly, bur when i use my android AVD or even my real device, it gives me this error:
Failed building JavaScript bundle.
Unable to resolve "#react-native-community/masked-view" from "node_modules\#react-navigation\stack\src\views\MaskedViewNative.tsx"
please help
Here, You have to install the library of react-native-community/masked-view and you might get the same error for other libraries if you not have installed other libraries required for the base navigation and stack navigation libraries.
try with install library as below:
if you are using yarn
yarn add #react-native-community/masked-view
OR
If you are using npm
npm install #react-native-community/masked-view
also install other libraries if you got some errors like this.
See the documentation. You are missing some dependencies.
installing-dependencies-into-a-bare-react-native-project
Related
Issue :
Side bar doesnt open when i press the bars icon near navigation Header and i dont recieve any error messages in console.
the bars icon is supposed to trigger a drawer sliding from the left when pressed on.
Code :
import * as React from "react";
import { Button, View } from "react-native";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button
onPress={() => navigation.navigate("Notifications")}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
I'm using expo and came across the same issue, "react-native-reanimated" is added as part of drawer navigation setup ( https://reactnavigation.org/docs/drawer-navigator/) and adding the relevant plugin into the babel.config.js resolved the issue e.g., plugins: ["nativewind/babel", "react-native-reanimated/plugin"]
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"
}
}
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.
Start a React Native project (here I'm using version 0.64.1), install the suggested dependencies for using React Navigation (here I'm using version 5.9.4) (source https://reactnavigation.org/docs/getting- started)
npm install #react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
Once that's done, install the drawer dependency and reproduce the Drawer Navigation example at https://reactnavigation.org/docs/drawer-based-navigation.
npm install #react-navigation/drawer
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Here it works perfect BUT I always get the following WARN "If you want to use Reanimated 2 then go through our installation steps".
Well, as you can see in this example, I don't use Reanimated 2, at most I install react-native-reanimated as suggested by the documentation.
So why the alert? Everything works fine, but it's annoying to get an alert and not know why. Does it also happen to you? Have you noticed that?
"Drawer now uses Reanimated 2 if available"
you need install:
https://docs.swmansion.com/react-native-reanimated/docs/installation
Unable to navigate to new screen react native getting an error:
TypeError: undefined is not an object (evaluating 'navigation.navigate')
Can someone explain where I go wrong?
Below is the code I'm using.
const MessagesScreen = ({navigation}) => {
return (
<Container>
<FlatList
data={Messages}
keyExtractor={item=>item.id}
renderItem={({item}) => (
<Card onPress={() => navigation.navigate('Chat', {userName: item.userName})}>
<UserInfo>
<UserImgWrapper>
<UserImg source={item.userImg} />
</UserImgWrapper>
<TextSection>
<UserInfoText>
<UserName>{item.userName}</UserName>
<PostTime>{item.messageTime}</PostTime>
</UserInfoText>
<MessageText>{item.messageText}</MessageText>
</TextSection>
</UserInfo>
</Card>
)}
/>
</Container>
);
};
export default MessagesScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
});
it's seem that you forget to declare your screen in Navigator stack. something like this
<Stack.Screen
name="MessagesScreen"
component={MessagesScreen} />
this is an example from official page with
react navigation v5
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I'm trying to understand the basics of deep linking when in the development stage, by following this guide (https://reactnavigation.org/docs/deep-linking/). When I try to run the command suggested by the guide, the simulator hits me with a "there was a problem loading the requested app" then shows the address that I was trying to access. When I check the expo client, the cli isn't running, im not sure if this is a side-effect of the failure or the reason why it's failing as if npx uri-scheme open exp://127.0.0.1:19000/login --ios doesn't start expo.
I really wouldn't doubt it if the issue is in the way I tried and set it up. Heres the code.
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 Login from "./screens/login";
import * as Linking from 'expo-linking';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="login" onPress={() => navigation.navigate('Login')} />
</View>
);
}
const Stack = createStackNavigator();
const prefix = Linking.makeUrl('/');
function App() {
const linking = {
prefixes: [prefix],
config: {
screens: {
Login: "/login"
}
},
};
return (
<NavigationContainer linking={linking} fallback={<Text>Loading content...</Text>}>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen hide name="Home" component={HomeScreen} />
<Stack.Screen hide name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
note that the login page is another file, just containing text for test purposes.
I'm pretty positive this is incorrect is probably many ways. How I understood this is that when the /login follows the host path, it would link the user to the login page. What am I missing? Thanks!