@react-navigation/stack && @react-navigation/bottom-tabs (ok)

https://dev.to/paulobunga/navigating-react-native-app-with-react-navigation-5-4hn8

C:\Users\Administrator\Desktop\App\index.js

import { registerRootComponent } from 'expo';
import App from './App';
registerRootComponent(App);

C:\Users\Administrator\Desktop\App\App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator';
export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

C:\Users\Administrator\Desktop\App\src\navigation\AppNavigator.js

import * as React from 'react';
import { Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import MainTabs from './MainTabs';
import Blog from './Blog';
import BlogDetails from './BlogDetails';
const Stack = createStackNavigator();
const AppNavigator = () => {
 return (
 	<Stack.Navigator>
 		<Stack.Screen name='MainTabs' component={MainTabs} options={{ title: 'MainTabs' }} />
 	</Stack.Navigator>
 );
}

export default AppNavigator;

C:\Users\Administrator\Desktop\App\src\navigation\MainTabs.js

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text, View, Button } from 'react-native';
import Home from './../screens/Home';
import Profile from './../screens/Profile';
import Contacts from './../screens/Contacts';
const Tabs = createBottomTabNavigator();
const MainTabs = () => {
  return (
	    <Tabs.Navigator>
	     <Tabs.Screen name='Home' component={Home} />
	     <Tabs.Screen name='Profile' component={Profile} />
	     <Tabs.Screen name='Contacts' component={Contacts} />
	    </Tabs.Navigator>
  );
}
export default MainTabs;

C:\Users\Administrator\Desktop\App\src\navigation\BlogDetails.js

import * as React from 'react';
import { Text, View, Button } from 'react-native';
const BlogDetails = () => {
  return (
    <View>
     	<Text>BlogDetails</Text>
     	<Button title="Go to Blog Details" onPress={() => this.props.navigation.navigate('MainTabs')} />
    </View>
  );
}
export default BlogDetails;

C:\Users\Administrator\Desktop\App\src\navigation\Blog.js

import * as React from 'react';
import { Text, View } from 'react-native';
const Blog = () => {
  return (
    <View>
     	<Text>Blog</Text>
    </View>
  );
}
export default Blog;

C:\Users\Administrator\Desktop\App\src\screens\Home.js

import React from 'react';
import {Text, View } from 'react-native';
class Home extends React.Component {
  render() {
    return (
      <View>
      	<Text>Home</Text>
      </View>
    );
  }
}
export default Home;

C:\Users\Administrator\Desktop\App\src\screens\Contacts.js

import React from 'react';
import {Text, View } from 'react-native';
class Contacts extends React.Component {
  render() {
    return (
      <View>
      	<Text>Contacts</Text>
      </View>
    );
  }
}
export default Contacts;

C:\Users\Administrator\Desktop\App\src\screens\Profile.js

import React from 'react';
import {Text, View } from 'react-native';
class Profile extends React.Component {
  render() {
    return (
      <View>
      	<Text>Profile</Text>
      </View>
    );
  }
}
export default Profile;

Last updated

Was this helpful?