I'm again asking a question regarding ReactNative: I have the following App.js:
export default function App() {
function Tabs() {
return <TabBar />;
}
const styles = StyleSheet.create({
backButton: {
color: global.GUI.ORANGE,
},
});
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Tabs"
component={Tabs}
..
/>
<Stack.Screen
name="Impostazioni"
component={Settings}
...
/>
<Stack.Screen
name="Registrati"
component={Signup}
...
/>
<Stack.Screen
name="Login"
component={Login}
...
/>
</Stack.Navigator>
</NavigationContainer>
);
}
I want to pass to each component some values declared in App.js,but doing something like:
<Stack.Screen
name="Impostazioni"
component={Settings}
currentUser={"name":"test"}
/>
Return undefined in:
import React from 'react';
import {View,Text} from 'react-native';
const Settings = (props) => {
--> console.log(props.currentUser) // here is undefined
return (
<View >
<Text>This is Settings!</Text>
</View>
);
};
export default Settings
So, how can I correctly pass props to App.js to all other components?
Thanks
You have to either use React Context(recommended) or pass props to your component.
https://wix.github.io/react-native-navigation/docs/third-party-react-context/
Another way:
<Stack.Navigator initialRouteName="LoginScreen" headerMode="none">
<Stack.Screen name="LoginScreen" component={LoginScreen} initialParams={{'key':'value'}} />
<Stack.Screen name="CodeVerificationScreen" component={CodeVerificationScreen} initialParams={{'key':'value'}} />
</Stack.Navigator>
You can receive initial params in login.js
console.log(this.props.route.params.key)
Another approach:
Pass props to component - Documentation link:(Please check for your nav version)
https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props
Related
Hello I am new to react native and particullary react navigation.
I am stuck on one easy thing, use the tab navigator and the stack navigator at the same time.
I am able to use one at a time but not both at the same time. I didn't fully understood the react navigation doc.
Here is what I am doing :
My navigation file : at first my stack Navigator :
const Stack = createStackNavigator()
export default function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Profile" component={Profile}/>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="MachinesList" component={MachinesList}/>
<Stack.Screen name="Size" component={Size}/>
<Stack.Screen name="Weight" component={Weight}/>
</Stack.Navigator>
</NavigationContainer>
)
}
and then my tab navigator :
const Tab = createBottomTabNavigator()
export function TabNavigator(){
return(
<Tab.Navigator>
<Tab.Screen name='Profile' component={Profile}/>
<Tab.Screen name='Home' component={Home}/>
<Tab.Screen name='MachinesList' component={MachinesList}/>
</Tab.Navigator>
)
}
And here is how I try to put my navigation in my App.js :
return (
<Provider store={store}>
<MyStack />
</Provider>
You need to define which screens are located in which tabs. Currently, you have three tabs that hold screens that are all located on the same stack.
Usually, this works as follows.
Define a tab navigator with n tabs
Define n stacks
Assign each stack to the corresponding tab
Assign the screens to their stacks
In your case, this looks as follows.
const Tab = createBottomTabNavigator()
export function TabNavigator() {
return (
<Tab.Navigator>
<Tab.Screen name='Profile' component={ProfileStack}/>
<Tab.Screen name='Home' component={HomeStack}/>
<Tab.Screen name='MachinesList' component={MachineListStack}/>
</Tab.Navigator>
)
}
The HomeStack then looks as follows.
const Stack = createStackNavigator()
const HomeStack = () => {
return (
<Stack.Navigator initialRoutName="HomeScreen">
<Stack.Screen name="HomeScreen" component={HomeScreen} />
// all other screens located inside the stack of the tab Home
</Stack.Navigator>
)
}
Do the same for all other stacks. Now, you have three tabs with three stacks. You can nest as many screens inside each stack as you like.
In your main application, you then initialize the TabNavigator.
export default function App() {
return (
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
);
}
You need to add your TabNavigator as a Stack.Screen within Stack.Navigator.
const Stack = createStackNavigator()
export default function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Profile" component={TabNavigator}/>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="MachinesList" component={MachinesList}/>
<Stack.Screen name="Size" component={Size}/>
<Stack.Screen name="Weight" component={Weight}/>
</Stack.Navigator>
</NavigationContainer>
)
}
You can see now that Profile Stack.Screen are using TabNavigator.
I want to use BottomNavigation to navigation between screens actually its working fine with BottomNavigation.SceneMap({...})
but the BottomNavigation its being showing in every screens, i only want to show once the user is logged. after click on login button
import React from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import userReducer from './src/reducers/user'
import { NavigationContainer } from '#react-navigation/native'
import { BottomNavigation, Text } from 'react-native-paper'
import { createStackNavigator } from '#react-navigation/stack'
import { theme } from './src/core/theme'
import {
StartScreen,
Dashboard,
GroupScreen,
InviteScreen,
CreateGroup,
} from './src/screens'
const Stack = createStackNavigator()
const store = createStore(userReducer)
export default function App() {
const [index, setIndex] = React.useState(0)
const [routes] = React.useState([
{ key: 'music', title: 'Music', icon: 'queue-music' },
{ key: 'albums', title: 'Albums', icon: 'album' },
])
const one = () => (
<NavigationContainer>
<Stack.Navigator
initialRouteName="StartScreen"
>
<Stack.Screen name="StartScreen" component={StartScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} />
</Stack.Navigator>
</NavigationContainer>
)
const two = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="InviteScreen" component={InviteScreen} />
</Stack.Navigator>
</NavigationContainer>
)
const renderScene = BottomNavigation.SceneMap({
music: one,
albums: two,
})
return (
<Provider store={store} theme={theme}>
<BottomNavigation
navigationState={{ index, routes }}
onIndexChange={setIndex}
renderScene={renderScene}
/>
</Provider>
)
}
EDIT by answers:
i did this when i pressed the button login i need to redirect to dashboard but dashboard is in mytabs
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Dashboard" component={Dashboard} />
</Tab.Navigator>
)
}
does not render nothing, i just to copy any example from here https://reactnavigation.org/docs/bottom-tab-navigator/ any of those render in my local, i am using EXPO
for example this
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
the wrong is display:none
You need to put your BottomNavigation in another stack that has loginScreen side by side.
Try using createBottomTabNavigator
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
<NavigationContainer>
<Stack.Navigator initialRouteName="loginScreen">
<Stack.Screen name="loginScreen" component={LoginScreen} />
<Stack.Screen name="main" component={MyTabs} />
</Stack.Navigator>
</NavigationContainer>
Take what you already have with MyTabs() and create a LoginScreen and then do the following. You will need to detect whether the user is present. If there is a user, then show the main screen, if not show the login screen.
<>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{user ? (
<Stack.Screen name="Main" component={MainStack} />
) : (
<Stack.Screen name="Login" component={LoginStack} />
)}
</Stack.Navigator>
</>
The best way is to do like this:
<NavigationContainer>
{user !== null ? <RootNavigator /> : <AuthNavigator />}
</NavigationContainer>
The user is a useState.
The NavigationContainer has 2 options. If the user is logged it shows the RootNAvigator with the bottomNavigation, if not it shows the authentication flow.
How to send Params data to the screen which is in drawer stack.
here is my code from login screen I want to send loginAs data to the homeScreen which is in MyDrawer stack.
onPress={() => this.props.navigation.navigate("MyDrawer", {loginAs : `${this.state.nature}`})}
here is my MyDrawer stack
function App({ navigation }) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="loginScreen" component={loginScreen} options={{headerShown: false}} />
<Stack.Screen name="MyDrawer" component={MyDrawer} options={{headerShown: false}} />
</Stack.Navigator>
</NavigationContainer>
);
}
function MyDrawer({ navigation }) {
return (
<Drawer.Navigator initialRouteName="homeScreen">
<Drawer.Screen name="homeSreen" component={homeScreenStack}
options={{drawerLabel: 'Home',}}
/>
</Drawer.Navigator>
);
}
You navigate directly to your homeScreen like this
onPress={() => this.props.navigation.navigate("homeScreen", {loginAs : `${this.state.nature}`})}
And then in your homeScreenStack component you get your params like you'd noramlly do
const loginAs = navigation.params?.loginAs;
Note: you have a typo in the name property of your Drawer.Screen you typed homeSreen instead of homeScreen so be aware of that.
I have this navigation structure:
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name='dashboard' component={Dashboard} />
<Tab.Screen name='info' component={Info} />
</Tab.Navigator>
);
};
const App = () => {
return (
<SafeAreaProvider>
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='main' component={TabNavigator} />
<Stack.Screen name='market' component={Market} />
<Stack.Screen name='cart' component={Cart} />
<Stack.Screen name='ongoingdelivery' component={OngoingDelivery} />
</Stack.Navigator>
</NavigationContainer>
</Provider>
</SafeAreaProvider>
);
};
the first screen shown is "Dashboard" whose live inside the "TabNavigator". After that, inside "Market" component, on a button, I use props.navigation.navigate('market') and I successfully navigate to market, inside Market component, I navigate to "Cart" the same way. So when I am on "Cart" screen, I try to use props.navigation.navigate('ongoingdelivery') and nothing happens. Not even an error is thrown. But if I instead of "ongoingdelivery" I navigate back to market, it works. why?
I am trying to create a React Navigation drawer with custom content (I want to put profile information, probably not any links). I am having a ton of trouble doing so.
Here's my basic stack/drawer:
const Drawer = createDrawerNavigator();
function DrawerNav() {
return (
<ScrollView>
<DrawerItems {...props} />
<Text>Test Content</Text>
</ScrollView>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} options={{
headerShown: false
}} />
<Stack.Screen name="Detail" component={Detail} />
<Stack.Screen name="Chat" component={Chat} />
<Stack.Screen name="Leagues" component={Leagues} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Home" component={Home} options={{
headerRight: (navigation) => (
<TouchableOpacity onPress={(navigation) => navigation.dispatch(DrawerActions.toggleDrawer())}>
<EvilIcons name="navicon" size={50} color="black" />
</TouchableOpacity>
),
headerLeft: () => (
null
),
}} />
<Stack.Screen name="CommForm" component={CommForm} />
</Stack.Navigator>
</NavigationContainer>
);
}
All I want, literally all I want, is a sidebar that I can toggle by pressing the <TouchableOpacity> button above with custom content inside of it.
I am able to do this with React Native Side Menu, but it seems like if I am using React Navigation, I should learn how to do it with this library, however it seems very difficult to do what I am trying to do.
How do I create a sidebar with custom content with React Navigation? I primarily want to use Stack navigation.
I would do something like this:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItem label="..." />
// ...
</DrawerContentScrollView>
);
}
function StackNavigator({navigation}) {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{
headerRight: () => (
<Button title="press" onPress={() => navigation.toggleDrawer()} />
),
}}
/>
// Your other screens...
</Stack.Navigator>
);
}
function DrawerNavigator({navigation, route}) {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Stack" component={StackNavigator} />
</Drawer.Navigator>
);
}
const App = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
);
};
So you can set the drawer navigation to be your main navigator and your stack navigation to be a screen of the drawer navigation. This way you can toggle the drawer without first navigating to it.
For creating custom drawer content you can pass a component to the drawerContent on the drawer navigator.
If you're going to use DrawerContentScrollView and/or DrawerItem like I've done in this example, be sure to import it from '#react-navigation/drawer'; .
Look at the documentation for more information https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.