sing-song-app/app/main.tsx

import React, { useState } from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import SearchScreen from '@/app/seach';
import BottomTabBar from '@/components/BottomTabBar';
import FavoritesScreen from "@/app/favorites";
import MyInfoScreen from "@/app/myInfo";

export default function MainScreen() {
  const [tab, setTab] = useState<'search' | 'favorites' | 'settings'>('search');

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <View style={[styles.screen, tab !== 'search' && styles.hidden]}>
          <SearchScreen />
        </View>
        <View style={[styles.screen, tab !== 'favorites' && styles.hidden]}>
          <FavoritesScreen />
        </View>
        <View style={[styles.screen, tab !== 'settings' && styles.hidden]}>
          <MyInfoScreen />
        </View>
      </View>
      <BottomTabBar activeTab={tab} onTabChange={setTab} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content: {
    flex: 1,
  },
  screen: {
    ...StyleSheet.absoluteFillObject,
  },
  hidden: {
    display: 'none',
  },
});