App.js

import * as React from 'react';
import { Text, View, StyleSheet, LogBox, Image } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Feather, FontAwesome, Ionicons } from '@expo/vector-icons';

import HomeScreen from './src/screens/HomeScreen';
import RandomScreen, { RandomStack } from './src/screens/RandomScreen';
import IngredientToRecipeScreen from './src/screens/IngredientToRecipeScreen';
import RecipeScreen from './src/components/RecipeScreen';
import { PRIMARY_400, SECONDARY_400 } from './src/GeneralStyle';

LogBox.ignoreAllLogs();

const Stack1 = createNativeStackNavigator();

const RootStack1 = () => {
  return (
    <Stack1.Navigator>
      <Stack1.Screen name="Home" component={HomeScreen} 
      options={{headerTitle:() => (
        <Image style={{width: 120, height: 50, marginTop: -10, aspectRatio: 3.5}} source={require("./src/images/caldus.png")} />
        )}}/>
      <Stack1.Screen options={{ header: () => null }} name="RecipeScreen" component={RecipeScreen} />
    </Stack1.Navigator>
  );
};

const Stack2 = createNativeStackNavigator();

const RootStack2 = () => {
  return(
    <Stack2.Navigator>
      <Stack2.Screen name="Ingredients" component={IngredientToRecipeScreen}/>
      <Stack2.Screen name="Recipe" component={RecipeScreen}/>
    </Stack2.Navigator>
  )
}

const Tab = createBottomTabNavigator();
const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    card: SECONDARY_400,
    border: SECONDARY_400,
    text: 'white',
  },
};

function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer theme={MyTheme}>
        <Tab.Navigator screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'HomeScreen') {
              return <Feather name="home" size={size} color={color} />;

            } else if (route.name === 'Random') {
              return <FontAwesome name="random" size={size} color={color} />;
            }

            return <Ionicons name="fast-food-outline" size={size} color={color} />;

          },
          tabBarActiveTintColor: PRIMARY_400,
          tabBarInactiveTintColor: 'gray',
          tabBarBackground: () => <View style={{ backgroundColor: SECONDARY_400, flex: 1 }}></View>,
          tabBarShowLabel: false,
          tabBarStyle: styles.tabStyle,
        })}>
          <Tab.Screen name="HomeScreen" component={RootStack1} options={{ headerShown: false }} />
          <Tab.Screen name="Random" component={RandomScreen} />
          <Tab.Screen name="IngredientToRecipeScreen" component={RootStack2} options={{ headerShown: false }}/>
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  tabStyle: {
    borderTopWidth: 0
  }
});

export default App;