News Application React Native - AppJS

App.js

import React from 'react';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

import HomeScreen from './src/pages/HomeScreen';
import DetailsScreen from './src/pages/DetailsScreen';
import ProfileScreen from './src/pages/ProfileScreen';
import SettingsScreen from './src/pages/SettingsScreen';
import SearchScreen from './src/pages/SearchScreen';

const Stack = createStackNavigator();
const materialTab = createMaterialBottomTabNavigator();

function HomeStack() {
  return (
	  	<Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }} >
			<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home Page' }}/>
			<Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details Page' }} />
	  </Stack.Navigator>
  );
}

function SearchStack() {
	return (
		<Stack.Navigator initialRouteName="Search" screenOptions={{ headerShown: false }}>
			  <Stack.Screen name="Search" component={SearchScreen} options={{ title: 'Search Page' }}/>
			  <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details Page' }} />
		</Stack.Navigator>
	);
}

function SettingsStack() {
	return (
		<Stack.Navigator initialRouteName="Settings" screenOptions={{ headerTitleStyle: { fontWeight: 'bold'}, headerTitleAlign: 'center', headerTransparent: true }}>
			<Stack.Screen name="Settings" component={SettingsScreen} options={{ title: 'Settings' }}/>
			<Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile Page' }}/>
		
		</Stack.Navigator>
	);
}

function App() {
  	return (
		<NavigationContainer>
			<materialTab.Navigator shifting={true} sceneAnimationEnabled={false} >
				<materialTab.Screen name="HomeStack" component={HomeStack}
					options={{ tabBarLabel: 'Home', tabBarColor: '#009387',
						tabBarIcon: ({ color }) => (
							<MaterialCommunityIcons
								name="home"
								color={color}
								size={26}
							/>
						),
					}}  
				/>
				<materialTab.Screen name="SearchStack" component={SearchStack}
					options={{ tabBarLabel: 'Search', tabBarColor: '#1f65ff',
						tabBarIcon: ({ color }) => (
							<MaterialCommunityIcons
								name="alpha-s-box"
								color={color}
								size={26}
							/>
						),
					}}  
				/>
				<materialTab.Screen name="SettingsStack" component={SettingsStack} active
					options={{ tabBarLabel: 'Settings', tabBarColor: '#d02860',
						tabBarIcon: ({ color }) => (
							<MaterialCommunityIcons
								name="settings"
								color={color}
								size={26}
							/>
						),
					}} 
				/>
			</materialTab.Navigator>
		</NavigationContainer>
	);
}
export default App;