I am making an instagram clone. i have made it upto navigation. but in my expo app the screen which is added 1st after Stack.Navigator (in below case it is homescreen) shows up on th app, but if i change the initial route name to the second screen it has no effect and still the homescreen shows up. However if i add the 2nd screen before the 1st screen in the code below the 2nd screen shows up.
initial route name seems to have no effect.
import Homescreen from './screens/Homescreen';
import NewPostScreen from './screens/NewPostScreen';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRoutName="1" screenOptions={{ headerShown: false }}>
<Stack.Screen name="1" component={Homescreen} options={{ title: 'Home' }} />
<Stack.Screen name="2" component={NewPostScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
The prop name is wrong. The right name is initialRouteName. Please, rename it.
Related
I'm developing an application in React Native with the following layout:
A footer tab bar with 3 screens: screen1, screen2, screen3.
Additionally, I nested another screen in screen 1 and another in screen 2 with stack navigation.
When Screen2 tab is pressed, Screen2 opens with some default data.
However, a second button in Screen 1 that opens Screen2 with user entered data.
The function in Screen1 that goes to Screen2 is:
function onPressHandler(){
navigation.navigate('Screen2', {data: X});
}
And data in then retrieved on Screen2.js :
const information = !route.params? 'default' : route.params.data;
Now here's what happens: when the application opens, if I go to Screen 2 via Tab Navigation (by pressing on the footer) then when I am on Screen1 I can also access screen 2 via button (with user entered data) as many times as I like.I can switch screens as many times as I like and it works all the time.
However, if I do not do this, and just go to screen2 via Screen1 button, never pressing on Screen2 tab in the footer, I get the following error:
The action 'NAVIGATE' with payload {"name":"Screen2","params":{"data: xxx"}} was not handled by any navigator.
Here's a a visual rapresentation of the application layout (hope it helps):
Screen 1 | Screen 2(data: default) | Screen 3
On Press: nestedScreen1 on Press: nestedScreen2
On Press: Screen2(data: enteredByUser)
Here's the code:
import Screen1 from './Screen1.js';
import Screen2 from './Screem2.js'
import Screen3 from './screen3.js';
import NestedScreen1 from './NestedScreen1.js';
import NestedScreen2 from './NedstedScreen2.js';
import { NavigationContainer } from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
export default function App() {
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
const StackNavigationForScreen1= () => {
return(
<Stack.Navigator>
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="NestedScreen1" component={NestedScreen1} />
</Stack.Navigator>
);}
const StackNavigationForScreen2 = () => {
return(
<Stack.Navigator >
<Stack.Screen name='Screen2' component={Screen2} />
<Stack.Screen name='NestedScreen2' component={NestedScreen2} />
</Stack.Navigator>
);}
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name='Screen1Tab' component={StackNavigationForScreen1}/>
<Tab.Screen name='Screen2Tab' component={StackNavigationForScreen2}/>
<Tab.Screen name='Screen3' component={Screen3}/>
</Tab.Navigator>
</NavigationContainer>
);}
Any idea what I might have done wrong or how to open Screen2 from Screen1 without having to press on Screen2 tab at least once first?
to navigate b/w nested stack you have to use something like this:-
navigation.navigate('nested_stack_screen', {
screen: 'screen1',
params: {
name:'anything'
},
})
I have a project in react native in which I wanted to implement a feature.
I have three screens
slash screen
login screen
home screen
the slash screens last 1 second and leave on the home screen while the number of times the app has been opened does not exceed 3 times.
otherwise we display the login screen to ask for a password
About how to make the splash screen last 1 second, on Splash component, put an useEffect like this:
function Splash({ navigation }) {
useEffect(() => setTimeout(navigation.navigate('Home')),[]);
return (
<View>
<Image />
</View>
);
}
About conditional first screen when open the app, you can pass initialRouteName as a prop of Stack.Navigator:
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
function App() {
return (
<Stack.Navigator initialRouteName={times < 3 ? Slash : Login}>
<Stack.Screen name="Slash" component={Slash} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
);
}
Note: my examples above use StackNavigator and on React Navigation v6, it works the same as TabNavigator and other versions of React Navigation.
I wanted to open different screen if pressed the text. But unfortunately I don't understand this docs. Is there any other different option, like 'a href' in html? Or could anyone explain this to me?
Install react-navigation
Make edits to App.js
Wrap all of the JSX of App.js in a NavigationContainer with a Stack.Navigator nested under it
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
{Your Screens}
</Stack.Navigator>
</NavigationContainer>
);
Now we set up screens. Each screen will use the StackScreen component and needs a screen name and the screen component itself
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
/>
With this completed, each screen will now have a navigation prop. In the screen where you have your text button set your onPress to something like this:
<Button
title="Navigate to Home"
onPress={()=>props.navigation.navigate("Home")
/>
navigation.navigate identifies the screen you're trying to get to by using the name you provided in App.js Stack.Screen
In my React Native app I use a StackNavigator, more or less as follows:
// React navigation
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
// Create stack navigator
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator detachInactiveScreens={false} screenOptions={{ header: () => null }}>
<Stack.Screen name="master" component={MasterView} />
<Stack.Screen name="detail" component={DetailView} />
</Stack.Navigator>
</NavigationContainer>
)
}
While the user uses the app he/she switches back and forth between MasterView and DetailView. The DetailView is reinstantiated
anytime the user navigates to it. However I need to prevent the DetailView to be reinstantiated upon navigation. I was hoping
to use the property detachInactiveScreens to accomplish this behavior as described here:
https://reactnavigation.org/docs/stack-navigator/#detachinactivescreens
I also included the invocation of enableScreens as follows in App.tsx
// Import react-native-screens
import { enableScreens } from 'react-native-screens';
enableScreens();
However I still see my DetailView being reinstantiated anytime the user navigates to it. Am I following the wrong approach? Is there
an alternative way to accomplish this behavior?
Thanks in advance
I want to navigate like this (it was working fine when I had not made the drawer):
<Button onPress={() => this.props.navigation.navigate('Projects')}></Button>
But after adding the drawer, and on pressing button I am getting an error like this:
console.error: The action 'NAVIGATE' with payload '{"name":"Projects"}' was not handled by any navigator.
This is my drawer code:
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={AccountantScreen} />
<Drawer.Screen name="My Account" component={MyAccountScreen} />
</Drawer.Navigator>
);
}
export default function DrawerLeft() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
This is my App.js:
import ProjectsScreen from './screens/Accountant/ProjectsScreen';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
const FirstNavGroup = createSwitchNavigator({
Projects: {
screen: ProjectsScreen
},
export default createAppContainer(FirstNavGroup)
How do I navigate to the Projects page?
You cannot mix react-navigation v4 with v5:
Drawer.Navigator is using v5 syntax, and createSwitchNavigator does not exist anymore.
You are mixing v4 and v5 of React-Navigation.
createAppContainer is from v4
NavigationContainer is from v5
I would suggest you to fully switch to v5. It should fix your problem.
I don't understand why you need switch navigator. In your situation, you can use stack navigator.
Here's the example: https://reactnavigation.org/docs/stack-navigator