I'm trying to change screens and I can't, it doesn't report any errors, the button just doesn't work, I click and it doesn't change screens.
SignIn.tsx
import { useNavigation } from "#react-navigation/native";
export function SignIn(){
const navigation = useNavigation();
function handleSignIn() {
navigation.navigate('Home')
}
return(
<View style={styles.container}>
<ButtonIcon
title="Next"
activeOpacity={0.7}
onPress={handleSignIn}
/>
</View>
)
}
Routes.tsx
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { Home } from '../screens/Home';
import { SignIn } from '../screens/SignIn';
const { Navigator, Screen } = createStackNavigator();
export function AuthRoutes() {
return(
<Navigator screenOptions={{headerShown: false}}>
<Screen name="SignIn" component={SignIn}/>
<Screen name="Home" component={Home}/>
</Navigator>
)
}
As I said, there is no error in the code, at least according to the IDE there is no error, I can run the application, but when I click the button it has no effect, nothing happens. I've already modified a lot, added and removed, but I couldn't make it work, I don't know what I'm doing wrong.
Related
I recently started developing apps using React Native.
During development, I needed to move data from a calendar to another view selected by the user.
I used async storage for this process.
But something went wrong.
Please refer to the following link.
And I made it so that I can pass data in the navigation process without using async storage afterwards.
However, this time, I found that nothing appears on the Detail screen even when February 15 is selected on the calendar.
And this was a problem that occurred even if I selected a date other than February 15th.
I don't know how to solve this problem.
I'm new to React Native development, so I don't know how to solve this problem.
This is my code
App.js
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import HomeScreen from './Home';
import DetailScreen from './Detail';
import { AntDesign } from '#expo/vector-icons';
import { Ionicons } from '#expo/vector-icons';
function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={({}) => ({
headerBackVisible: false,
headerRight: () => (
<AntDesign name="setting" size={24} color="black" />
),
})}
/>
<Stack.Screen name="Detail" component={DetailScreen}
options={({ navigation }) => ({
headerBackVisible: false,
headerLeft: () => (
<Ionicons name="arrow-back" size={24} color="black" onPress={() => navigation.navigate('Home')} />
),
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Home.js
import React from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Calendar} from "react-native-calendars";
import {View} from 'react-native';
function HomeScreen({navigation}) {
const markedDates = {
'2023-02-01': {marked: true, dotColor: 'red'},
}
return(
<SafeAreaProvider>
<View>
<Calendar
markedDates={markedDates}
onDayPress={(day) => {
navigation.push('Detail', {day});
}}
/>
</View>
</SafeAreaProvider>
);
}
export default HomeScreen;
Detail.js
import React from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {View, Text} from 'react-native';
function DetailScreen({route}) {
const { day } = route.params;
return(
<SafeAreaProvider>
<View>
<Text>{day}</Text>
</View>
</SafeAreaProvider>
);
}
export default DetailScreen;
And this is my development environment.
OS: macOS Monterey(12.6.3)
Development Program: Visual Studio Code (1.71.1)
Simulator: iPhone 14 (ios 16.2)
React native Version: 9.2.0
And I am using expo go to test it.
If anyone can help me please help.
because day value callback onDayPress of Calendar return is a object, you need parse it to string to show in screen. You can console.log(day) in file Detail.js to check pass params
I would like to hide drawer navigation from the list component and it still be shown in the UserHomeScreen which is the stack navigation. It works if I just use the useState, hideHeader/setHideHeader, from App.js but it is not efficient way to do this. I tried my best to look for a solution but I really can't find. I am new to react native and have a limited knowledge.
Can anyone help me how am I going do it? Please help.
BTW here is the version of my drawer: ^6.0.1, if that helps.
Thank you so much!
App.js
import React from 'react'
// components
import UserHomeScreen from './src/components/user/pages/UserHomeScreen';
import Cart from './src/components/user/pages/Cart';
import Receipt from './src/components/user/pages/Receipt';
//redux
import store from './src/redux/store'
// libraries
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { Provider } from 'react-redux';
const Drawer = createDrawerNavigator();
const App = () => {
const [hideHeader, setHideHeader] = React.useState(false);
return (
<Provider store={store}>
<NavigationContainer>
{/* this hide drawer */}
{/* options={{headerShown: false}} */}
<Drawer.Navigator >
<Drawer.Screen name="Home" >
{() => <UserHomeScreen setHideHeader={setHideHeader} />}
</Drawer.Screen>
<Drawer.Screen name="Cart" component={Cart} />
<Drawer.Screen name="Receipt" component={Receipt} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>
)
}
export default App;
UserHomeScreen.js
import React from 'react'
import List from '../components/User Home Screen/List';
import { createStackNavigator } from '#react-navigation/stack';
import ItemDetails from '../components/User Home Screen/ItemDetails';
import { useNavigation } from '#react-navigation/native';
import { Button } from 'react-native';
const Stack = createStackNavigator();
const UserHomeScreen = () => {
function backHandler(){
navigation.navigate('List')
}
// this hide the drawer header but I want it inside the list
// but if I do, the stack header that hides not the drawer header.
// React.useEffect(() => {
// navigation.setOptions({
// headerShown: false
// });
// })
const navigation = useNavigation();
return (
<Stack.Navigator>
<Stack.Screen name='List' component={List}>
</Stack.Screen>
<Stack.Screen name='Item Details' component={ItemDetails}
options={{
headerLeft: () => <Button title='Back' onPress={backHandler}/>
}}
/>
</Stack.Navigator>
)
}
export default UserHomeScreen;
I am trying to navigate from my login screen to the home screen using a pressable button. However, the code that I now have gives the following error: Couldn't find a navigation object. Is your component inside NavigationContainer?. The error is aimed on row 8 (const navigation = useNavigation();).
LoginButton.js:
import React, { Component } from "react";
import { View, Text, Image, Pressable, Button } from "react-native";
import { useNavigation } from "#react-navigation/native";
import styles from "./styles";
import HomeScreen from "../../screens/Home";
const LoginButton = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Pressable
onPress={() => navigation.navigate("Home")}
style={styles.button}
>
<Text style={styles.buttontext}>Login</Text>
</Pressable>
</View>
);
};
export default LoginButton;
The LoginButton is inserted as a component in the LoginItem inside the last <View. LoginItem.js:
import React from "react";
import { View, Text, Image } from "react-native";
import styles from "./styles";
import LoginButton from "../LoginButton";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
const Stack = createNativeStackNavigator();
const LoginItem = (props) => {
return (
<View style={styles.logincontainer}>
{/* Background image of the login screen */}
<Image
source={require("../../../assets/images/blue-sky-start-screen.jpg")}
style={styles.loginbackground}
blurRadius={4}
></Image>
{/* Title of the login screen */}
<View style={styles.titlecontainer}>
<Text style={styles.companytitle}>BestelSnel</Text>
</View>
{/* Login button */}
<View style={styles.loginbutton}>
<LoginButton></LoginButton>
</View>
</View>
);
};
export default LoginItem;
useNavigation only works if your component is inside of a NavigationContainer and a Navigator like mentioned on the getting-started-page:
https://reactnavigation.org/docs/hello-react-navigation
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
HomeScreen would be your LoginItem
In my case, I got this error because autocomplete added the wrong import statement.
import { useNavigation } from "#react-navigation/core";
but the one I needed is:
import { useNavigation } from "#react-navigation/native";
Hope this helps anybody to save some minutes.
I had this issue as well, and the accepted answer did not work for me.
What I did get working on was importing the component I wanted to go to and using that in the navigate() call. Generally, this probably means just removing the quotes so your param to that function is a Component and not a String.
Given the code from the question, the code would be:
onPress={() => navigation.navigate(Home)}
Very similar to the original, just minus the quotes, as mentioned.
I was passing the params correctly also, but params had a react component in it. That's why it was giving this error.
// product should not have a react component
props.navigation.navigate(ROUTE_TEST, {product});
This error occurs while using navigation. I don't understand why you do that.
The above error occurs when trying to navigate from HomeScreen to SignUp Detail through navigation.
I've looked everywhere, but I'm asking because I can't find the answer.
This error occurs while using navigation. I don't understand why you do that.
The above error occurs when trying to navigate from HomeScreen to SignUp Detail through navigation.
I've looked everywhere, but I'm asking because I can't find the answer.
this code App.js
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import SignUp from "./components/signupdetail/signup";
import HomeScreen from "./components/homeScreen";
const Stack = createStackNavigator();
const App = () => {
return (
<>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="SignUp" component={SignUp} /> //my problem
</Stack.Navigator>
</NavigationContainer>
</>
);
};
export default App;
this code Homescreen
import Login from "./loginScreen/login";
import ButtonComponent from "./loginScreen/button";
import LostPassword from "./loginScreen/lostpassword";
import SocialLogin from "./loginScreen/sociallogin";
import SignUp from "./loginScreen/signup";
const HomeScreen = (props) => {
return (
<>
<SafeAreaView style={styles.container}>
<Text style={styles.header}>everywear</Text>
</SafeAreaView>
<View>
<Login />
<ButtonComponent />
<LostPassword />
<SocialLogin />
<SignUp navigation={props} />
</View>
</>
);
};
export default HomeScreen;
this code signup
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
const SignUp = (props) => {
const { navigation } = props;
return (
<>
<View style={styles.container}>
<Text style={styles.text}>혹시 처음이신가요?</Text>
<TouchableHighlight
onPress={() => {
navigation.navigate("SignUp");
}}
underlayColor="gray"
style={styles.button}
>
<>
<Text style={styles.signuptext}>회원가입</Text>
</>
</TouchableHighlight>
</View>
</>
);
};
export default SignUp;
There are different ways to fix this issue.
Easiest one would be to change like below
<SignUp navigation={props.navigation} />
This will pass the navigation prop correctly and the rest of the code would work as expected.
the useNavigation hook
you can use the hook like below
const SignUp = (props) => {
const navigation = useNavigation();
then no need to pass the prop from the parent.
Background:
I've created a Screens.js file which contains each separate screen as a function. Then I'm calling the screens from App.js.
What I have tried
This is a mockup of what I have in the Screens.js file.
import React from 'react';
import {StyleSheet, View, Text, Image, Button, TextInput} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
export const LoginScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
}
export const HomeScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
And this is App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
import { LoginScreen, HomeScreen } from './app/Screens.js';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Login" component={ LoginScreen } />
<Stack.Screen name="Home" component={ HomeScreen } />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Problem
When I try and run the app in expo, I get the following error message: "Invariant Violation: Module RCTEventEmitter is not a registered callable Module (calling recieveTouches)" I have absolutely no idea what any of this means, I don't even know what an RCTEventEmitter or recieveTouches actually is.
Question
Is this the correct method to import a function from a separate file? Is there any better way? Maybe the problem isn't even related to the calling of the functions? (Note: I've tried other methods in the past but they all failed, so it probably is an export-import issue.)
Thanks a lot!
you can't do that.
try this
exports.default = {
LoginScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
},
HomeScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
}
this is a hint, not exact code.