Page non responsive | Conditional Rendering

Question

I am playing around with conditional rendering and trying to get familiar. When implementing it the way I am here, I have successfully rendered two pages conditionally by clicking on the button in the middle, but I have failed to get the screens I am rendering to respond. I have given the Map and List "Buttons" Touchable opacity but no response. Also, the search bar is non responsive.

What am I doing wrong and how should I go about doing something like this?

Bonus Points: I am also in the middle of attempting to lift the state so I can use the Map and List "Buttons" on each page to successfully navigate between the two pages. I know there is a better way to be doing this, but unless this is just terrible practice, it is fine with me.

Working Example --> Snack.expo.io

Thank you guys for any insight at all, I appreciate it more than you know.

Home.js

export default class Home extends React.Component {
 
  constructor(props) {
    super(props)
    this.state ={
      visible: true,
      whichComponentToShow: 'Screen1'
    };
}
  
  render(){
    
     if(this.state.whichComponentToShow === 'Screen1'){
      return(
       <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>
        
        <ListHome/>
        
        <View style={{justifyContent: 'center', alignItems: 'center',position: 'absolute', right: 0, left: 0, bottom: 0, top: 0,}}>
             <TouchableOpacity onPress={() => this.setState({whichComponentToShow: 'Screen2'})}>
             <Text style={{color:'black', fontSize: 20}}>
                 Click me for Map Home
             </Text>
             </TouchableOpacity>
        </View>
 
        </View>
      );
    }
    else if(this.state.whichComponentToShow === 'Screen2'){
      return(
       <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>
        <MapHome/>
 
        <View style={{justifyContent: 'center', alignItems: 'center',position: 'absolute', right: 0, left: 0, bottom: 0, top: 0,}}>
             <TouchableOpacity onPress={() => this.setState({whichComponentToShow: 'Screen1'})}>
             <Text style={{color:'black', fontSize: 20}}>
                 Click me for List Home
             </Text>
             </TouchableOpacity>
         </View>
       </View>
      );
    }
 }
 }

ListHome.js, MapHome is practically the same

export default class ListHome extends React.Component {
  
constructor(props){
  super(props);

}

  state = {
    search: '',
  };

  updateSearch = (search) => {
    this.setState({ search });
  };

  render() {

    const { search } = this.state;

  return (
    <View style={{}}>
      
       {/* Top 3 components */}
       <View style={{flexDirection: 'row', marginTop: 75, justifyContent: 'center', alignItems:'center'}}> 
          <View style={{backgroundColor: '#ffffff', width: 50, height: 50, borderRadius: 5, }}>

          </View>

          {/* Search Bar */}
          <View style={{ justifyContent: 'center', alignItems: 'center', }}>
          <SearchBar
            placeholder="Search..."
            onChangeText={this.updateSearch}
            value={search}
            round="true"
            containerStyle={styles.searchBarContainer}
            inputContainerStyle={{
              height: scale(45),
              width: scale(200),
              backgroundColor: '#FFFFFF',
              borderRadius: 10
              
            }}
            searchIcon={() => (
              <MaterialCommunityIcons
                name="glass-mug-variant"
                size={25}
                color="black"
              />
            )}
            clearIcon="null"
          />
          </View>

          <TouchableOpacity>
          <View style={{backgroundColor: '#ffffff', width: 50, height: 50, borderRadius: 5, justifyContent: 'center', alignItems: 'center' }}>
            <MaterialCommunityIcons
              name="filter-outline"
              size={35}
              color="black"
            />
          </View>
          </TouchableOpacity>
        </View>
        {/* End of Top 3 components */}

        {/* Conditional Map and List button */}
        <View style={{justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
          
          
          <View style={styles.conditionalMap}>
              <View style={{justifyContent: 'center', alignItems: 'center'}}>
              <TouchableOpacity>
                  <Text style={{color: 'black', fontSize: scale(15)}}>
                      Map
                  </Text>
                  </TouchableOpacity>
              </View>
          </View>
          
          <View style={styles.conditionalList}>
          <View style={{justifyContent: 'center', alignItems: 'center'}}>
                  <Text style={{color: 'black', fontSize: scale(15)}}>
                      List
                  </Text>
              </View>
          </View>

        </View>
        {/* End of Conditional Map and List button */}

 
    </View>
  );
}
}

const styles = ScaledSheet.create({
    searchBarContainer: {
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 2,
      textShadowColor: 'black',
      backgroundColor: '#d1cfcf',
      borderBottomColor: 'transparent',
      borderTopColor: 'transparent',
      paddingRight: scale(20),
      paddingLeft: scale(20),
    },
    conditionalMap: {
      backgroundColor: 'white',
      height: scale(45),
      width: scale(100),
      borderRadius: 10, 
      justifyContent: 'center', 
      alignItems: 'center', 
      position: 'absolute', 
      left: scale(75),
      top: scale(10)
    },
    conditionalList: {
      backgroundColor: '#b3b3b3',
      height: scale(45), 
      width: scale(115), 
      borderRadius: 10, 
      justifyContent: 'center', 
      alignItems: 'center',
      position: 'absolute', 
      right: scale(75),
      top: scale(10)
    }
})

Lastly, App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';


import CarouselGallary from './screens/Carousel';
import Home from './screens/Home'

const Tab = createBottomTabNavigator();

function MyTabs() {
//    const dispatch = useDispatch();
//    const auth = useSelector((state) => state.auth);
  return (

    <Stack.Navigator
     initialRouteName="Home">        
       {/* Login Screen one, most simple. Uncomment the one you want to see*/}
     {/* <Stack.Screen name="Login1" component= {Login1} options={{headerShown: false}}/> */}

      {/* Login screen twp, simple with some spice. */}
      {/*<Stack.Screen name="Login2" component= {Login2} options={{headerShown: false}}/> */}

      {/* Login screen three, animated, different background obv but cool idea!. */} 
      {/* <Stack.Screen name="Login3" component= {Login3} options={{headerShown: false}}/> */} 

     {/*  <Stack.Screen name="SplashScreen" component= {SplashScreen} options={{headerShown: false}}/>*/} 
     <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="CarouselGallary" component= {CarouselGallary} options={{headerShown: false}}/>
     {/* 
       <Stack.Screen name="ProfileScreen" component= {ProfileScreen} options={{headerShown: false}}/>
      <Stack.Screen name="MyCarousel" component= {MyCarousel} options={{headerShown: false}}/>
      <Stack.Screen name="VenueDetails" component= {VenueDetailsScreen} options={{headerShown: false}}/>
      <Stack.Screen name="ProfileSettings" component= {ProfileSettingsScreen} options={{headerShown: false}}/>
      <Stack.Screen name="FavoriteBarScreen" component= {FavoriteBarScreen} options={{headerShown: false}}/>
      <Stack.Screen name="LocationScreen" component= {LocationScreen} options={{headerShown: false}}/>*/} 
      
      
    </Stack.Navigator>

);
}


export default function App() {

  return (
   <NavigationContainer>
    <Tab.Navigator
    initialRouteName="Home"
    tabBarOptions={{
      activeTintColor: '#F60081',
      style: {
        backgroundColor: '#FFFFFF',
        borderTopColor: 'transparent'
      }
    }}
   
  >
    <Tab.Screen
      name="Home"
      component={MyTabs}
      options={{
        tabBarLabel: 'Home',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
{/*   <Tab.Screen
      name="Location"
      component={Location}
      options={{
        tabBarLabel: 'Location',
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="Location" color={color} size={size} />
        ),
      }}
    /> 


    <Tab.Screen
      name="Notifications"
      component={maps}
      options={{
        tabBarLabel: 'Maps',
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="map-marker-circle" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Profile"
      component={profile}
      options={{
        tabBarLabel: 'Profile',
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="account" color={color} size={size} />
        ),
      }}
    />
    */}
  </Tab.Navigator>
</NavigationContainer>
);
}



const Stack = createStackNavigator();