Warning when trying to use Drawer Navigation - react-native

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

Related

Can't tigger Drawer by toggledrawer and got white screen

iOS 13(simulator ) |
xcode13 |
react-navigation6.x |
react-native 0.68.2
Drawer Navigator works fine But an Error occurres when adding useLegacyImplementation.
Also,I can't touch off my sidebar by navigation.openDrawer
and If I add useLegacyImplementation={true} the screen while turns white.
This is src_Drawer
import React ,{Component}from 'react';
import { Button, View ,Text,StyleSheet} from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer=createDrawerNavigator()
//two function
function HomeScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>Home Screen</Text>
<Button title={"Open Drawer"} onPress={()=>prop.navigation.openDrawer()}/>
<Button title={"Toggle Drawer"} onPress={()=>prop.navigation.toggleDrawer()}/>
</View>
)
}
function NewsScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>News Screen</Text>
<Button title={"jump to Home"} onPress={()=>prop.navigation.navigate('Home')}/>
</View>
)
}
export default class index extends Component{
render(){
return(
<Drawer.Navigator >
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="News" component={NewsScreen} />
</Drawer.Navigator>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems: 'center',
},
text:{
fontSize:40
}
})
app.js :
import 'react-native-gesture-handler';
import React, { Component } from 'react'
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import Index from './src_Drawer';
export default class App extends Component{
render(){
return(
<NavigationContainer>
<Index/>
</NavigationContainer>
)
}
}
I want to know how to fix it.
I resolve this problem!!
Error Reason:
have incorrect react-native-reanimated
First I do this according to official interpretation:
npm install react-native-reanimated
But it doesn’t work.
Also it Not warning me in debugger
Till I run it On my iPhone
This is how i resolve it:
link:https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
1.First step is to install react-native-reanimated as a dependency in your project:
yarn add react-native-reanimated
2.Add Reanimated's Babel plugin to your babel.config.js:
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
3.yarn start --reset-cache

Expo navigation Drawer doesnt open , what can i do to solve this?

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"]

Error appeared after I add Google AdMob code

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.

How do i configure react-native navigaton in bare react-native app?

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

Trying to set up deep linking, page referenced not being found

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!