Bottom Bar + Drawer Navigation . If I want to implement these both together, which should implement first ?
Bottom bar then Drawer navigator OR
Drawer then Bottom Navigator
Anyone please answer with proper explanation....
Thanks
first should be drawer ideally and then tabs.
But it all depends upon your business requirement.
https://snack.expo.dev/#gaurav1995/nesting-navigators-%7C-react-navigation
check the above snack, have implemented.
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function PlaceHome({navigation}){
return(
<Tab.Navigator screenOptions={{headerShown:false}} >
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
)
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator useLegacyImplementation initialRouteName="DummyHome">
<Drawer.Screen name="DummyHome" component={PlaceHome} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Hope it helps
Related
Here's a demo of my problem: https://snack.expo.dev/xtklvo6eM
I want to go from ScreenOne -> ScreenTwo -> ScreenThree -> goBack() to ScreenTwo....
But calling navigation.goBack() on ScreenThree takes me back to ScreenOne, not ScreenTwo.
Can someone tell me why this is?
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
function ScreenOne({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('ScreenTwo')}
title="Go to screen two"
/>
</View>
);
}
function ScreenTwo({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.navigate('ScreenThree')} title="Go to screen three" />
</View>
);
}
function ScreenThree({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Try to go back to screen two.." />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="ScreenOne">
<Drawer.Screen name="ScreenOne" component={ScreenOne} />
<Drawer.Screen name="ScreenTwo" component={ScreenTwo} />
<Drawer.Screen name="ScreenThree" component={ScreenThree} />
</Drawer.Navigator>
</NavigationContainer>
);
}
backBehavior="history"
https://reactnavigation.org/docs/drawer-navigator#backbehavior
I needed custom shaped button so I used <View> and designed the button the way I need with <Image> and <Text> the problem I am facing here is I need that custom <View> button to be clickable to that after clicking on that I can redirect to another page.
Code for button
<View style={{ flexDirection: 'row' }}>
<Text style={styles.headerfont}>Categories</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ fontSize: 15, left: 195 }}>View More</Text>
<Image
style={{ left: 200, height: 23, width: 23 }}
source={require('../img/agni/viewmore.png')}
/>
</View>
</View>;
Things I have tried
<Pressable>
<TouchableOpacity>
Image Representation
After clicking should redirect from Screen 1 to Screen 2
We need to create navigator for pages we need to navigate through.
Use TouchableOpacity for onPress for pushing page.
App.js
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomePage}/>
<Stack.Screen name="AgniViewMorePage" component={AgniViewMorePage} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
Home.js
export default function HomeScreen({ navigation}) {
return (
<TouchableOpacity onPress={() => navigation.navigate('Profile')}>
<View style={{ flexDirection: 'row' }}>
<Text>Categories</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ fontSize: 15, left: 195 }}>View More</Text>
</View>
</View>
</TouchableOpacity>
);
}
Profile.js
export default function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Notifications"
onPress={() => navigation.navigate('Notifications')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
React Native by default does support routing, you'll need to build on your own, luckily there is react-navigation, which aims to create routing and navigation for Expo and React Native apps.
See their website here https://reactnavigation.org
In order to create a clickable view on React Native, you'll need a TouchableOpacity.
import {TouchableOpacity} from 'react-native';
export default () => (
<TouchableOpacity onPress={() => console.log('Do something')}>
<View>
<Text>Example</Text>
</View>
</TouchableOpacity>
);
Another option would be Button
<Button title="Click Me" onPress={() => console.log('Do something')} />
and here is a quick demo to move between screens:
import * as React from 'react';
import { Button, View, Text } 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')}
/>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</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;
Here is a snack https://snack.expo.dev/#abranhe/hello-react-navigation
I have created a project using React Native for Web and it is working fine in mobile but when I run into the web it does not enable the browser default next-previous button.
How to enable browser button and manage next previous in browser
// In App.js in a new project
import * as React from 'react';
import { View, Text,Button,Platform } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const isWeb = Platform.OS === 'web';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => linkTo('/Details')} title="Go to Details Screen" />
</View>
);
}
function Details() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontWeight:'100',fontSize:30}}>Detail's Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: !isWeb}} />
<Stack.Screen name="Setting" component={Setting} options={{headerShown:!isWeb}}/>
<Stack.Screen name="Details" component={Details} options={{headerShown:!isWeb}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I think you have to use "navigation" object that is part of the params to the Home Screen. Have a look at below code
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.navigate('Details');} />
</View>
);
}
I am using React Native for Web and implemented navigation in my app but I am not able to navigate next - previous with browser button,
The URL is changed in the address bar of the browser but not able to change the view.
I have used React-Navigation for both Web/Mobile, Anyone knows a better approach please guide me
//App.js
import * as React from 'react';
import { View, Text,Button,Platform } 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' }}>
<View style={{ marginVertical: 20 }}>
<Text style={{fontWeight:'100',fontSize:30}}>Home Screen</Text>
</View>
<Button
title="Go to Details Screen"
onPress={() => navigation.navigate('Details')}
/>
<View style={ {marginVertical:20}}>
<Button title="Go to Setting Screen" onPress={() => navigation.navigate('Setting')} />
</View>
</View>
);
}
const Stack = createStackNavigator();
function App() {
const linking = {
prefixes: ['myurlhere://'],
config: {
screens: {
Setting: 'Setting',
Details: 'Details',
},
},
};
return (
<NavigationContainer linking={linking} >
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: !isWeb, headerLeft:()=> null }} />
<Stack.Screen name="Setting" component={Setting} options={{headerShown:!isWeb}}/>
<Stack.Screen name="Details" component={Details} options={{headerShown:!isWeb}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
[![//Setting Screen
function Setting() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontWeight:'100',fontSize:30}}>Setting Screen</Text>
</View>
);
}
//Details Screen
function Details() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontWeight:'100',fontSize:30}}>Detail's Screen</Text>
</View>
);
}]
export default App;
I am also looking into it.
But here is where I am at and its working.
const linking = {
prefixes: ['http://localhost:19006/', 'mychat://'],
config: {
screens: {
Home: '',
Search: '?:id/Search',
}
},
};
return (
<AppContext.Provider value={userSettings}>
<NavigationContainer linking={linking}>
<StackContainer />
</NavigationContainer>
</AppContext.Provider>
);
The problem is I'm trying to use the navigation option to add a header and right button to navigate me to another screen, but it keeps giving me this error: "navigation.navigate is not a function. (in navigation.navigate is undefined)
Here is my code:
import 'react-native-gesture-handler';
import * as React from 'react';
import{View,Text, Button} 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="button"
onPress={() => navigation.navigate('DetailsScreen')}></Button>
</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>
<Stack.Screen name="Homes" component={HomeScreen} />
<Stack.Screen name="DetailsScreen" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
You should change the definition of HomeScreen component
function HomeScreen(navigation)
To:
function HomeScreen({navigation})