1//create a diffrent directory to write down the code for navigation bar called 'navigation'
2//should install react-bootstrap in react app
3//call the file navigation from app.js
4//this code will provode simple reactive navigation bar
5
6
7//navigation.js code should look like
8import React, { Component } from "react";
9import "bootstrap/dist/css/bootstrap.min.css";
10import { Nav, Navbar, NavDropdown } from "react-bootstrap";
11
12class Navigation extends Component {
13 constructor(props) {
14 super(props);
15 }
16
17 render() {
18 return (
19 <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
20 <Navbar.Brand href="#home">Amrit Bhusal</Navbar.Brand>
21 <Navbar.Toggle aria-controls="responsive-navbar-nav" />
22 <Navbar.Collapse id="responsive-navbar-nav">
23 <Nav className="mr-auto">
24 <Nav.Link href="#About me">About me</Nav.Link>
25 <Nav.Link href="#Portofolio">Portofolio</Nav.Link>
26 <Nav.Link href="#Contacts">Contacts</Nav.Link>
27 <Nav.Link eventKey={2} href="#Resume">
28 Resume
29 </Nav.Link>
30 </Nav>
31 </Navbar.Collapse>
32 </Navbar>
33 );
34 }
35}
36export default Navigation;
37
38
39
40
41//in app.js file your code should look like
42import React from "react";
43import NAVIGATION from "./navigation/navigation";
44export default function App() {
45 return (
46 <div className="App">
47 <NAVIGATION />
48 </div>
49 );
50}
1function StackScreen() {
2 return (
3 <Stack.Navigator>
4 <Stack.Screen
5 name="Home"
6 component={HomeScreen}
7 options={{
8 title: 'My home',
9 headerStyle: {
10 backgroundColor: '#f4511e',
11 },
12 headerTintColor: '#fff',
13 headerTitleStyle: {
14 fontWeight: 'bold',
15 },
16 }}
17 />
18 </Stack.Navigator>
19 );
20}
1import React from 'react'
2import {
3 BrowserRouter as Router,
4 Switch,
5 Route,
6 useParams,
7 } from "react-router-dom";
8 import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from 'react-bootstrap'
9 import Home from './Home';
10 import AboutUs from './AboutUs';
11 import ContactUs from './ContactUs';
12
13class BootstrapNavbar extends React.Component{
14
15 render(){
16 return(
17 <div>
18 <div className="row">
19 <div className="col-md-12">
20 <Router>
21 <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
22 <Navbar.Brand href="#home">React Bootstrap Navbar</Navbar.Brand>
23 <Navbar.Toggle aria-controls="basic-navbar-nav" />
24 <Navbar.Collapse id="basic-navbar-nav">
25 <Nav className="mr-auto">
26 <Nav.Link href="/">Home</Nav.Link>
27 <Nav.Link href="/about-us">Contact Us</Nav.Link>
28 <Nav.Link href="/contact-us">About Us</Nav.Link>
29 <NavDropdown title="Dropdown" id="basic-nav-dropdown">
30 <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
31 <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
32 <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
33 <NavDropdown.Divider />
34 <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
35 </NavDropdown>
36 </Nav>
37 <Form inline>
38 <FormControl type="text" placeholder="Search" className="mr-sm-2" />
39 <Button variant="outline-success">Search</Button>
40 </Form>
41 </Navbar.Collapse>
42 </Navbar>
43 <br />
44 <Switch>
45 <Route exact path="/">
46 <Home />
47 </Route>
48 <Route path="/about-us">
49 <AboutUs />
50 </Route>
51 <Route path="/contact-us">
52 <ContactUs />
53 </Route>
54 </Switch>
55 </Router>
56 </div>
57 </div>
58 </div>
59 )
60 }
61}
62
63export default BootstrapNavbar;
1import * as React from 'react';
2import { View, Text, Button } from 'react-native';
3import { NavigationContainer } from '@react-navigation/native';
4import { createStackNavigator } from '@react-navigation/stack';
5
6function HomeScreen({ navigation }) {
7 return (
8 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
9 <Text>Home Screen</Text>
10 <Button
11 title="Go to Profile"
12 onPress={() =>
13 navigation.navigate('Profile', { name: 'Custom profile header' })
14 }
15 />
16 </View>
17 );
18}
19
20function ProfileScreen({ navigation }) {
21 return (
22 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
23 <Text>Profile screen</Text>
24 <Button title="Go back" onPress={() => navigation.goBack()} />
25 </View>
26 );
27}
28
29const Stack = createStackNavigator();
30
31function App() {
32 return (
33 <NavigationContainer>
34 <Stack.Navigator>
35 <Stack.Screen
36 name="Home"
37 component={HomeScreen}
38 options={{ title: 'My home' }}
39 />
40 <Stack.Screen
41 name="Profile"
42 component={ProfileScreen}
43 options={({ route }) => ({ title: route.params.name })}
44 />
45 </Stack.Navigator>
46 </NavigationContainer>
47 );
48}
49
50export default App;
51