react navigation bar

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