We Keep Coding

React native app crashes on android device

(please forgive me if I don't speak English correctly)
I am a beginner and have developed an android application on react native with the use of expo.
type hereimport React, { useState, useEffect, useLayoutEffect } from 'react';
import * as firebase from 'firebase';
import { View, Text, FlatList, StyleSheet, Modal } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { auth, db } from '../firebase';
import { AntDesign, Ionicons } from '#expo/vector-icons';
import { Input, Button, Avatar } from 'react-native-elements';
const FeedScreen = ({ navigation }) => {
const [posts, setPosts] = useState([]);
const [addpost, setAdd] = useState(false);
const [postText, setPostText] = useState('');
const likes = 0;
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity>
<AntDesign
onPress={() => setAdd(true)}
name="pluscircleo"
size={27}
color="black"
/>
</TouchableOpacity>
),
});
}, []);
useEffect(() => {
const unsubscribe = db
.collection('posts')
.orderBy('createdAt', 'desc')
.onSnapshot((querySnapshot) => {
const newPosts = [];
querySnapshot.forEach((doc) => {
newPosts.push({
id: doc.data().id,
createdAt: doc.data().createdAt,
text: doc.data().text,
author: doc.data().author,
});
});
setPosts(newPosts);
});
}, []);
const onAddButtonPress = () => {
const timestamp=firestore.FieldValue.serverTimestamp();
setAdd(false);
const data = {
createdAt: timestamp,
text: postText,
id: auth?.currentUser?.email,
author: auth?.currentUser?.displayName,
};
const unsubscribe = db
.collection('posts')
.add(data)
.then((_doc) => {
setPostText('');
Keyboard.dismiss();
});
};
const postItem = ({ item, index }) => {
return (
<View style={styles.postview}>
<View
style={{
borderBottomWidth: 2,
borderBottomColor: '#E2E2E2',
flex: 1,
flexDirection: 'row',
}}>
<Avatar
size={40}
rounded
title={item.author.substr(0, 1)}
containerStyle={{ backgroundColor: '#6733b9' }}
/>
<Text style={styles.autor}>{item.author}</Text>
</View>
<View>
<Text style={styles.txt}>{item.text}</Text>
</View>
</View>
);
};
return (
<View>
<Modal visible={addpost}>
<View>
<Ionicons name="close" size={40} onPress={() => setAdd(false)} />
<Text style={styles.txt2}>Add Post</Text>
<View style={styles.form}>
<Input
placeholder="Enter post text"
value={postText}
onChangeText={(text) => setPostText(text)}
/>
<Button title="Add" onPress={onAddButtonPress} />
</View>
</View>
</Modal>
<FlatList
data={posts}
renderItem={postItem}
keyExtractor={(item) => item.id}
/>
</View>
);
};
const styles = StyleSheet.create({
postview: {
marginBottom: 10,
paddingVertical: 'auto',
backgroundColor: 'white',
borderRadius: 30,
},
autor: {
fontSize: 18,
//marginHorizontal: 40,
marginTop: 7,
},
txt: {
marginTop: 20,
fontSize: 17,
marginHorizontal: 40,
marginBottom: 20,
},
txt2: {
marginHorizontal: 'auto',
fontSize: 40,
marginTop: 20,
},
form: {
paddingTop: 80,
},
ava: {
marginHorizontal: 40,
marginTop: 20,
},
});
export default FeedScreen;
This is the code of the page where the app crashes. Posts are displayed here, and there is also a button to add them.Clicking on the button brings up a modal window with the form.When I click the add button, the attachment crashes, that is, when I call onAddButtonPress
please forgive me if I don't know how to ask a question
Here's the package.json and app.js code:
"dependencies": {
"#expo/vector-icons": "^13.0.0",
"#firebase/auth": "^0.21.0",
"#react-navigation/bottom-tabs": "^6.5.3",
"#react-navigation/native": "^6.1.2",
"#react-navigation/stack": "^6.3.11",
"eas-cli": "^3.3.2",
"expo": "~47.0.12",
"expo-cli": "^6.1.0",
"expo-status-bar": "~1.4.2",
"expo-updates": "^0.15.6",
"firebase": "^8.9.1",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "~2.8.0",
"react-native-paper": "^5.1.3",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "~3.18.0",
"react-native-web": "~0.18.7"
},
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import ProfileScreen from './screens/ProfileScreen';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer, DarkTheme } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import {
Feather,
AntDesign,
Ionicons,
MaterialIcons,
} from '#expo/vector-icons';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import FeedScreen from './screens/FeedScreen';
import SettingsScreen from './screens/SettingsScreen';
import { Provider as PaperProvider, DarkTheme as Dark} from 'react-native-paper'
export default function App() {
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function Home() {
return (
<Tab.Navigator screenOptions={{contentStyle:{ backgroundColor:'#E5E7E6'}}}>
<Tab.Screen
name="Feeds"
component={FeedScreen}
options={{
tabBarLabel: 'Feeds',
tabBarIcon: ({ color }) => (
<MaterialIcons name="dynamic-feed" size={24} color="grey" />
),
//headerStyle:{backgroundColor: '#f4511e'}
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={24} color="grey" />
),
}}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarLabel: 'Settings',
tabBarIcon: ({ color }) => (
<Feather name="settings" size={24} color="grey" />
),
}}
/>
</Tab.Navigator>
);
}
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
I read articles about crashes, ran on different devices

React navigation params object empty

When i try passing the params to my review screen it comes up undefined.
I'm using "#react-navigation/native": "^6.1.3" and "#react-navigation/stack": "^6.3.12"
App.js
import 'react-native-gesture-handler';
import { StyleSheet, Text, View, Button, TouchableOpacity, FlatList } from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import Stack from './routes/stack';
export default function App() {
return (
<NavigationContainer>
<Stack/>
</NavigationContainer>
);
}
Stack.js
import {createStackNavigator} from '#react-navigation/stack';
import ReviewScreen from '../screens/Reviews';
import HomeScreen from '../screens/Home';
import AboutScreen from '../screens/About';
const stack = createStackNavigator();
const Stack = () => {
return(
<stack.Navigator>
<stack.Screen name="Home" component={HomeScreen} />
<stack.Screen name="Review" component={ReviewScreen} />
</stack.Navigator>
)}
export default Stack;
HomeScreen
<View style={{width: 100, alignItems: "center"}}>
<TouchableOpacity style={{backgroundColor: "#333", padding: 10, borderRadius: 15, margin: 10}}
onPress={() => navigation.navigate("Review",
{title:"Title Name"}
)}
>
<Text style={{color: "white"}}>{item.title}</Text>
</TouchableOpacity>
</View>
Review.js
import {View, Text, Button} from 'react-native';
import React from 'react';
export default ReviewScreen = ({ navigation, route }) => {
console.log(route);
const { title } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Review Screen</Text>
<Button
title="Go to Home"
onPress={() => navigation.goBack()}
/>
</View>
);
};
When I send the object from the home page to the review screen the destructed title throws an undefined error and when I log the route object it shows that the params value is undefined.
console logged route object
{"key": "Review-xxx", "name": "Review", "params": undefined, "path": undefined}
How can I get the params to pass onto the review screen properly?

here is the working code see it!
App.js
import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-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',{ title:"Full Stack Developer"})}
/>
</View>
);
}
function DetailsScreen({ navigation, route }) {
const { title } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{title}</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;

I had not properly installed the #react-navigation/native and #react-navigation/stack dependencies. Find them stated here and here respectively.

React Native Drawer is not totaly closed

I'm working at a ReactNative app and I want to create a drawer with right position.
Problem:
The problem is, if I change position to right a small part of it is always on the screen. When I open it, it takes the left position:
Drawer closed
Drawer open
react native drawer version:
"#react-navigation/drawer": "^6.1.8",
Drawer code:
const Drawer = createDrawerNavigator();
const DrawerContent = (props) => {
const { navigation } = props;
return (
<DrawerContentScrollView {...props} scrollEnabled={false}>
<Block flex={0.4} margin={20} bottom center>
<Image
source={require("../assets/icon.png")}
resizeMode="center"
style={styleDrawer.avatar}
/>
<Text title padding margin center>
{"دروس وملخصات باكالوريا "}
</Text>
</Block>
<Block>
<DrawerItem
label="الصفحة الرئيسية"
onPress={() => navigation.navigate("HomeScreen")}
style={styleDrawer.drawerItem}
labelStyle={styleDrawer.labelStyle}
icon={() => (
<AntDesign
name="home"
size={24}
color="black"
style={styleDrawer.icon}
/>
)}
/>
</Block>
</DrawerContentScrollView>
);
};
export default () => {
return (
<Drawer.Navigator
drawerType="slide"
overlayColor="transparent"
drawerStyle={styleDrawer.drawerStyles}
initialRouteName="Dashbord"
screenOptions={{
drawerPosition: "right",
headerShown: false,
activeBackgroundColor: "transparent",
activeTintColor: "white",
inactiveTintColor: "white",
}}
sceneContainerStyle={{
justifyContent: "center",
}}
drawerContent={(props) => {
return <DrawerContent {...props} />;
}}
>
<Drawer.Screen name="Screens">
{(props) => <Screens {...props} />}
</Drawer.Screen>
</Drawer.Navigator>
);
};
App.js Code:
import { NavigationContainer } from "#react-navigation/native";
import Drawer from "./src/Drawer";
import "react-native-gesture-handler";
import { Provider } from "react-redux";
import store from "./src/redux/store";
export default function App() {
return (
<Provider store={store}>
<NavigationContainer>
<Drawer />
</NavigationContainer>
</Provider>
);
}

The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator. Do you have a screen named 'Home'?

I'm using the React NavigationV6 to create a static app for now.
After setting up my Navigation process like this Im having an issue moving to the Home Screen from the Login and Register Screen. And also the Home screen is not rendering the Bottom Tab which is meant to show icons.
I did it this way
package.json
"#react-native-community/masked-view": "^0.1.11",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/material-bottom-tabs": "^6.0.9",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"axios": "^0.24.0",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-confirmation-code-field": "^7.2.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-paper": "^4.11.2",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "~3.10.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.6"
App.js
import React from "react";
import RootNavigation from './src/navigation/RootNavigation';
export default function App() {
return (
<RootNavigation/>
);
}
RootNavigation.js
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import AuthNavigation from "./AuthNavigation";
const RootNavigation = () => {
return (
<SafeAreaProvider>
<NavigationContainer>
<AuthNavigation />
</NavigationContainer>
</SafeAreaProvider>
);
};
export default RootNavigation;
AuthNavigation.js
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
// Screens
import Onboarding from "../screens/Auth/Onboarding";
import Login from "../screens/Auth/Login";
import Register from "../screens/Auth/Register";
import VerifyCode from "../screens/Auth/VerifyCode";
import ForgotPassword from "../screens/Auth/ForgotPassword";
import MainTabNavigation from "../navigation/MainTabNavigation";
const Stack = createStackNavigator();
const AuthNavigation = () => {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Onboarding"
>
<Stack.Screen name="Onboarding" component={Onboarding} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="VerifyCode" component={VerifyCode} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="MainTabNavigation" component={MainTabNavigation} />
</Stack.Navigator>
);
};
export default AuthNavigation;
MainTabNavigation.js
import React from "react";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { createMaterialBottomTabNavigator } from "#react-navigation/material-bottom-tabs";
import HomeStackNavigation from "../navigation/HomeStackNavigation";
import WalletStackNavigation from "../navigation/WalletStackNavigation";
import HistoryStackNavigation from "../navigation/HistoryStackNavigation";
import ProfileStackNavigation from "../navigation/ProfileStackNavigation";
const Tab = createMaterialBottomTabNavigator();
const MainTabNavigation = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#e91e63"
barStyle={{ backgroundColor: "tomato" }}
>
<Tab.Screen
name="Home"
component={HomeStackNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={24} />
),
}}
/>
<Tab.Screen
name="Wallet"
component={WalletStackNavigation}
options={{
tabBarLabel: "Wallet",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={black} size={24} />
),
}}
/>
<Tab.Screen
name="History"
component={HistoryStackNavigation}
options={{
tabBarLabel: "History",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="bell" color={color} size={24} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileStackNavigation}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={24} />
),
}}
/>
</Tab.Navigator>
);
};
export default MainTabNavigation;
HomeStackNavigation.js
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../screens/Home/Home";
import Wallet from "../screens/Home/Wallet/Wallet";
import History from "../screens/Home/History/History";
import Profile from "../screens/Home/Profile/Profile";
const HomeStack = createStackNavigator();
const HomeStackNavigation = () => {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
<HomeStack.Screen name="Wallet" component={Wallet} />
</HomeStack.Navigator>
);
};
export default HomeStackNavigation;
WalletStackNavigation.js
import React from "react";
import { createStackNavigator } from '#react-navigation/stack';
import Wallet from "../screens/Home/Wallet/Wallet";
const WalletStack = createStackNavigator();
const WalletStackNavigation = () => {
return (
<WalletStack.Navigator>
<WalletStack.Screen name="Wallet" component={Wallet} />
</WalletStack.Navigator>
);
};
export default WalletStackNavigation;
Login.js
import React, { useState } from "react";
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
TextInput,
} from "react-native";
const Login = (props) => {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<View style={styles.backButtonContainer}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image
source={require("../../../assets/images/back-arrow.png")}
style={styles.backButton}
/>
</TouchableOpacity>
</View>
<Text style={styles.text}>Let's sign you in!</Text>
<Text style={styles.textTwo}>Welcome back. You've been missed!</Text>
</View>
<View style={styles.registerFormContainer}>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={setEmail}
value={email}
placeholder="Email"
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={setPassword}
value={password}
placeholder="Password"
/>
</View>
<TouchableOpacity style={styles.forgotPasswordButton} onPress={() => navigation.navigate("ForgotPassword")}>
<Text style={styles.forgotPasswordText}>Forgot Password?</Text>
</TouchableOpacity>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => props.navigation.navigate("Home")}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
<View style={styles.haveAnAccount}>
<Text>
Dont Have an Account?
<Text
style={styles.haveAnAccountText}
onPress={() => props.navigation.navigate("Register")}
>
{" "}
Create One
</Text>
</Text>
</View>
</View>
</View>
);
};
export default Login;

first install Root naviagtion : https://reactnavigation.org/docs/navigating-without-navigation-prop/
import { navigationRef } from './RootNavigation'; // <-- add this
const RootNavigation = () => {
return (
<SafeAreaProvider>
<NavigationContainer
ref={navigationRef} // <-- add this >
<AuthNavigation />
</NavigationContainer>
</SafeAreaProvider>
);
};
In the next step, we define RootNavigation, which is a simple module with functions that dispatch user-defined navigation actions.
// RootNavigation.js
import { createNavigationContainerRef } from '#react-navigation/native';
export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
// add other navigation functions that you need and export them
add the screen you want in first stack loaded for example do you want to move in Home screen with root Navigation
add the screen in AuthNavigation
const AuthNavigation = () => {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Onboarding"
>
<Stack.Screen name="Onboarding" component={Onboarding} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="VerifyCode" component={VerifyCode} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="MainTabNavigation" component={MainTabNavigation} />
<HomeStack.Screen name="Home" component={Home} /> // <-- add this line
</Stack.Navigator>
);
};
navigate in any js model with example below:
// any js module
import * as RootNavigation from './path/to/RootNavigation.js';
// ...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });

Open Navigation Drawer On Header Button Click

when i swipe right my drawer open but i want to open it using a button in the header i did a code but i have this error undefined is not a object (evaluating 'navigation.openDrawer')
thats my app.js code :
import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from './components/login'
import Inscription from './components/inscription'
import signup from './components/signup'
import mp from './components/motdepasse'
import ch from './components/choice'
import mn from './components/menu1'
import drawer from './components/drawerapp'
import React, { Component } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo'
const Navigator = createStackNavigator({
Home:{screen: Home},
Profil:{screen: Inscription},
signup:{screen: signup, navigationOptions: { header: null }},
mp:{screen: mp},
ch:{screen: ch},
mn:{screen: mn},
drawer:{screen: drawer,navigationOptions: { title:"votre travail",
headerStyle:{backgroundColor:'#8B0000'},
headerTitleStyle: {
fontWeight: 'bold',
color:'white',
},
headerLeft: ({ navigation }) => (
<TouchableOpacity onPress={() => navigation.openDrawer()} >
<Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
</TouchableOpacity>
),}},
}
);
const App = createAppContainer(Navigator);
export default App;
and that's my appdrawer code:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Help" onPress={() => alert('Link to help')} />
<DrawerItem
label="Close drawer"
onPress={() => props.navigation.closeDrawer()}
/>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
<Drawer.Screen name="Feed" component={mn} />
<Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>
);
}
export default class drawerapp extends React.Component {
render(){
const {navigate} = this.props.navigation;
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}}
my work perfectly fine until i click on the left header button and the error appear

u are getting the navigation prop in wrong place, headerLeft does not give navigation prop, so u have to get it from navigationOptions...
change the navigator code as below..
const Navigator = createStackNavigator({
Home:{screen: Home},
Profil:{screen: Inscription},
signup:{screen: signup, navigationOptions: { header: null }},
mp:{screen: mp},
ch:{screen: ch},
mn:{screen: mn},
drawer:{screen: drawer,
navigationOptions: ({navigation}) => ({
title:"votre travail",
headerStyle:{backgroundColor:'#8B0000'},
headerTitleStyle: {
fontWeight: 'bold',
color:'white',
},
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()} >
<Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
</TouchableOpacity>
),
}),
},
});