App.js

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet, LogBox } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
import Recipe1 from './components/Recipe1';
import Recipe2 from './components/Recipe2';
import Recipe3 from './components/Recipe3';
import Recipe4 from './components/Recipe4';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message
LogBox.ignoreAllLogs();//Ignore all log notifications

//Used for Recipe Screens
function Root() {
	return (
	  <Stack.Navigator>
		<Stack.Screen name="Home" component={HomeScreen} />
		<Stack.Screen name="Recipe1" component={Recipe1} />
		<Stack.Screen name="Recipe2" component={Recipe2} />
		<Stack.Screen name="Recipe3" component={Recipe3} />
		<Stack.Screen name="Recipe4" component={Recipe4} />
	   </Stack.Navigator>
	);
  }

  //Used for bottom bar navigation
export default function App() {
	return (
		<NavigationContainer>
			<Tab.Navigator 
				screenOptions={({ route }) => ({
					tabBarIcon: ({ focused, color, size }) => {
					  let iconName= "Home";
		  
					  if (route.name === 'Home') {
						iconName = 'ios-home';
					  } else if (route.name === 'Info') {
						iconName = 'ios-information-circle';
					  }
		  
					  return <Ionicons name={iconName} size={size} color={color} />;
					},
				  })}>
				<Tab.Screen name="Home" component={Root} />
				<Tab.Screen name="Info" component={AboutScreen} />
			</Tab.Navigator>
		</NavigationContainer>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
});