saya ingin menggabungkan koding 1 ke koding ke 2 mohon dapat dibantu, koding 1  import React, { useRef, useState } from "react";
import {
  Animated,
  Image,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import profile from "../assets/icon/profile.png";
// Tab ICons...
import notifications from "../assets/icon/bell.png";
import home from "../assets/icon/home.png";
import logout from "../assets/icon/logout.png";
import search from "../assets/icon/search.png";
import settings from "../assets/icon/settings.png";
// Menu
import close from "../assets/icon/close.png";
import menu from "../assets/icon/menu.png";

// Photo
import photo from "../assets/images/home/profile.jpg";

export default function DrawerScreen() {
  const [currentTab, setCurrentTab] = useState("Hi, Dimas Bagus Arya");
  // To get the curretn Status of menu ...
  const [showMenu, setShowMenu] = useState(false);

  // Animated Properties...

  const offsetValue = useRef(new Animated.Value(0)).current;
  // Scale Intially must be One...
  const scaleValue = useRef(new Animated.Value(1)).current;
  const closeButtonOffset = useRef(new Animated.Value(0)).current;

  return (
    <SafeAreaView style={styles.container}>
      <View style={{ justifyContent: "flex-start", padding: 15 }}>
        <Image
          source={profile}
          style={{
            width: 60,
            height: 60,
            borderRadius: 10,
            marginTop: 8,
          }}
        ></Image>

        <Text
          style={{
            fontSize: 20,
            fontWeight: "bold",
            color: "white",
            marginTop: 20,
          }}
        >
          Jenna Ezarik
        </Text>

        <TouchableOpacity>
          <Text
            style={{
              marginTop: 6,
              color: "white",
            }}
          >
            View Profile
          </Text>
        </TouchableOpacity>

        <View style={{ flexGrow: 1, marginTop: 50 }}>
          {
            // Tab Bar Buttons....
          }

          {TabButton(currentTab, setCurrentTab, "Home", home)}
          {TabButton(currentTab, setCurrentTab, "Search", search)}
          {TabButton(currentTab, setCurrentTab, "Notifications", notifications)}
          {TabButton(currentTab, setCurrentTab, "Settings", settings)}
        </View>

        <View>{TabButton(currentTab, setCurrentTab, "LogOut", logout)}</View>
      </View>

      {
        // Over lay View...
      }

      <Animated.View
        style={{
          flexGrow: 1,
          backgroundColor: "white",
          position: "absolute",
          top: -50,
          bottom: 0,
          left: 0,
          right: 0,
          paddingHorizontal: 15,
          paddingVertical: 20,
          borderRadius: showMenu ? 15 : 0,
          // Transforming View...
          transform: [{ scale: scaleValue }, { translateX: offsetValue }],
        }}
      >
        {
          // Menu Button...
        }

        <Animated.View
          style={{
            transform: [
              {
                translateY: closeButtonOffset,
              },
            ],
          }}
        >
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              marginTop: 10,
              paddingLeft: 5,
            }}
          >
            <TouchableOpacity
              onPress={() => {
                // Do Actions Here....
                // Scaling the view...
                Animated.timing(scaleValue, {
                  toValue: showMenu ? 1 : 0.88,
                  duration: 300,
                  useNativeDriver: true,
                }).start();

                Animated.timing(offsetValue, {
                  // YOur Random Value...
                  toValue: showMenu ? 0 : 230,
                  duration: 300,
                  useNativeDriver: true,
                }).start();

                Animated.timing(closeButtonOffset, {
                  // YOur Random Value...
                  toValue: !showMenu ? -30 : 0,
                  duration: 300,
                  useNativeDriver: true,
                }).start();

                setShowMenu(!showMenu);
              }}
            >
              <Image
                source={showMenu ? close : menu}
                style={{
                  width: 20,
                  height: 20,
                  tintColor: "black",
                  marginTop: 40,
                }}
              ></Image>
            </TouchableOpacity>

            <Text
              style={{
                fontSize: 22,
                fontWeight: "regular",
                color: "black",
                paddingTop: 80,
              }}
            >
              {currentTab}
            </Text>

            <Image
              source={photo}
              style={{
                width: 52,
                height: 52,
                borderRadius: 50,
                marginTop: 70,
              }}
            ></Image>
          </View>

          <Text
            style={{
              fontSize: 20,
              fontWeight: "bold",
              paddingTop: 15,
              paddingBottom: 5,
            }}
          >
            Jenna Ezarik
          </Text>

          <Text style={{}}>
            Techie, YouTuber, PS Lover, Apple Sheep's Sister
          </Text>
        </Animated.View>
      </Animated.View>
    </SafeAreaView>
  );
}

// For multiple Buttons...
const TabButton = (currentTab, setCurrentTab, title, image) => {
  return (
    <TouchableOpacity
      onPress={() => {
        if (title == "LogOut") {
          // Do your Stuff...
        } else {
          setCurrentTab(title);
        }
      }}
    >
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          paddingVertical: 8,
          backgroundColor: currentTab == title ? "white" : "transparent",
          paddingLeft: 13,
          paddingRight: 35,
          borderRadius: 8,
          marginTop: 15,
        }}
      >
        <Image
          source={image}
          style={{
            width: 25,
            height: 25,
            tintColor: currentTab == title ? "#5359D1" : "white",
          }}
        ></Image>

        <Text
          style={{
            fontSize: 15,
            fontWeight: "bold",
            paddingLeft: 15,
            color: currentTab == title ? "#5359D1" : "white",
          }}
        >
          {title}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#5359D1",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
});
koding 2  import React from "react";
import {
  Image,
  ImageBackground,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";

// import {ViewPropTypes} from 'deprecated-react-native-prop-types';
import { useTheme } from "@react-navigation/native";
import Swiper from "react-native-swiper";
import Feather from "react-native-vector-icons/Feather";
import IonIcon from "react-native-vector-icons/Ionicons";
import Icon from "react-native-vector-icons/MaterialIcons";

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

const HomeScreen = ({ navigation }) => {
  const theme = useTheme();
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#22242C" }}>
      <View style={{ marginStart: 20, marginTop: 5 }}>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
            marginTop: 10,
          }}
        >
          <Text
            style={{
              fontSize: 20,
              fontFamily: "sans-serif-light",
              color: "white",
            }}
          >
            {" "}
            Hi,
            <Text
              style={{
                fontSize: 20,
                fontFamily: "sans-serif-light",
                color: "white",
                fontWeight: "bold",
              }}
            >
              {" "}
              Dimas Bagus{" "}
            </Text>
          </Text>

          {/* thumbnail profile */}
          <TouchableOpacity onPress={() => navigation.navigate("Profile")}>
            <ImageBackground
              source={require("../assets/images/home/profile.jpg")}
              style={{ width: 52, height: 52, marginRight: 20 }}
              imageStyle={{ borderRadius: 50 }}
            />
          </TouchableOpacity>
        </View>
      </View>
      <View
        style={{
          flexDirection: "row",
          marginTop: -35,
          padding: 15,
          marginLeft: 6,
        }}
      >
        <Text
          style={{
            fontSize: 15,
            fontFamily: "sans-serif-light",
            color: "white",
          }}
        >
          {" "}
          3275052705910009{" "}
        </Text>
      </View>

      {/* searchbar */}
      <ScrollView style={{ padding: 20 }}>
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            elevation: 2,
            marginTop: 0,
            backgroundColor: "#16181D",
            borderWidth: 1,
            borderRadius: 10,
            borderColor: "transparent",
            width: "82%",
            paddingHorizontal: 10,
            paddingVertical: 8,
          }}
        >
          <Feather
            name="search"
            size={20}
            color="white"
            style={{ marginRight: 13, marginLeft: 3, marginTop: 3 }}
          />
          <TextInput
            placeholder="Cari..."
            placeholderTextColor={"white"}
            color={"white"}
          ></TextInput>
        </View>
        <TouchableOpacity onPress={() => navigation.navigate("Setting")}>
          <View
            style={{
              backgroundColor: "white",
              height: 40,
              width: 40,
              marginTop: -42,
              alignSelf: "flex-end",
              borderRadius: 10,
              justifyContent: "center",
              alignContent: "center",
            }}
          >
            <Icon name="tune" color="#22242C" size={38} alignContent="center" />
          </View>
        </TouchableOpacity>

        {/* slider */}
        <View style={styles.sliderContainer}>
          <Swiper
            height={200}
            autoplay
            horizontal={false}
            activeDotColor="transparent"
            dotColor="transparent"
            loop={true}
          >
            <View style={styles.slide}>
              <Image
                source={require("../assets/images/homescreen/0.png")}
                resizeMode="cover"
                style={styles.sliderImage}
              />
            </View>
            <View style={styles.slide}>
              <Image
                source={require("../assets/images/homescreen/2.png")}
                resizeMode="cover"
                style={styles.sliderImage}
              />
            </View>
            <View style={styles.slide}>
              <Image
                source={require("../assets/images/homescreen/3.png")}
                resizeMode="cover"
                style={styles.sliderImage}
              />
            </View>
            <View style={styles.slide}>
              <Image
                source={require("../assets/images/homescreen/4.png")}
                resizeMode="cover"
                style={styles.sliderImage}
              />
            </View>
            <View style={styles.slide}>
              <Image
                source={require("../assets/images/homescreen/5.png")}
                resizeMode="cover"
                style={styles.sliderImage}
              />
            </View>
            <View style={styles.slide}>
              <Image
                source={require("../assets/images/homescreen/6.png")}
                resizeMode="cover"
                style={styles.sliderImage}
              />
            </View>
          </Swiper>
        </View>

        {/* menu button */}

        <View style={styles.categoryContainer1}>
          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("SiapDet")}
          >
            <View style={styles.categoryIcon}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>SIAP</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("Dosier")}
          >
            <View style={styles.categoryIcon}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>DOSIER</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("Drawer")}
          >
            <View style={styles.categoryIcon}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>ECUTI</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("Etukin")}
          >
            <View style={styles.categoryIcon}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>ETUKIN</Text>
          </TouchableOpacity>
        </View>

        {/* menu button ke 2 */}
        <View style={styles.categoryContainer2}>
          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("Sisfo")}
          >
            <View style={styles.categoryIcon}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>SISFO</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("Simakin")}
          >
            <View style={styles.categoryIcon1}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>Catatan SIMAKIN</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("Logintest")}
          >
            <View style={styles.categoryIcon}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>SIMOD</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.categoryBtn}
            onPress={() => navigation.navigate("Logintest")}
          >
            <View style={styles.categoryIcon}>
              <IonIcon name="ios-layers" size={35} color="#22242C" />
            </View>
            <Text style={styles.categoryBtnTxt}>TTE</Text>
          </TouchableOpacity>
        </View>

        {/* header berita */}
        <View
          style={{
            marginVertical: 15,
            flexDirection: "row",
            marginTop: 20,
            justifyContent: "space-between",
          }}
        >
          <Text
            style={{
              fontSize: 18,
              fontFamily: "sans-serif-light",
              color: "white",
            }}
          >
            Berita Terkini
          </Text>
          <TouchableOpacity onPress={() => navigation.navigate("News")}>
            <Text style={{ color: "#0aada8" }}> See More</Text>
          </TouchableOpacity>
        </View>

        {/* isi berita 1*/}
        <TouchableOpacity onPress={() => navigation.navigate("Details")}>
          <View style={StyleSheet.cardsWrapper}>
            <View style={styles.card}>
              <View style={styles.cardImgWrapper}>
                <Image
                  source={require("../assets/images/homescreen/dimanjav7.jpg")}
                  resizeMode="cover"
                  style={styles.cardImg}
                />
              </View>
              <View style={styles.cardInfo1}>
                <Text style={styles.cardTitle}>Dialog Manajemen Kinerja</Text>
                <Text style={styles.cardDetails}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut ...
                </Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
        {/* isi berita 2*/}
        <TouchableOpacity
          style={{ marginBottom: 40 }}
          onPress={() => navigation.navigate("Signup")}
        >
          <View style={StyleSheet.cardsWrapper}>
            <View style={styles.card}>
              <View style={styles.cardImgWrapper}>
                <Image
                  source={require("../assets/images/homescreen/ngospek.jpg")}
                  resizeMode="cover"
                  style={styles.cardImg}
                />
              </View>
              <View style={styles.cardInfo2}>
                <Text style={styles.cardTitle}>NGOSPEK</Text>
                <Text style={styles.cardDetails}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut ....{" "}
                </Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
};

export default HomeScreen;
const styles = StyleSheet.create({
  sliderContainer: {
    height: 200,
    width: "100%",
    marginTop: 30,
    justifyContent: "center",
    alignSelf: "center",
    borderRadius: 10,
    borderBottomEndRadius: 10,
    elevation: 5,
  },

  wrapper: {},

  slide: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "transparent",
    borderRadius: 10,
  },
  sliderImage: {
    height: "100%",
    width: "100%",
    alignSelf: "center",
    borderRadius: 10,
  },
  cardsWrapper: {
    marginTop: 20,
    width: "90%",
    alignSelf: "center",
  },
  card: {
    height: 100,
    marginVertical: 10,
    flexDirection: "row",
    shadowColor: "#999",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 5,
  },
  cardImgWrapper: {
    flex: 1,
  },
  cardImg: {
    height: "100%",
    width: "100%",
    alignSelf: "center",
    borderRadius: 8,
    borderBottomRightRadius: 0,
    borderTopRightRadius: 0,
  },
  cardInfo1: {
    flex: 2,
    padding: 10,
    borderColor: "transparent",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderBottomRightRadius: 8,
    borderTopRightRadius: 8,
    backgroundColor: "#FED47E",
    elevation: 1,
  },
  cardInfo2: {
    flex: 2,
    padding: 10,
    borderColor: "transparent",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderBottomRightRadius: 8,
    borderTopRightRadius: 8,
    backgroundColor: "#8AC185",
    elevation: 1,
  },
  cardTitle: {
    fontWeight: "bold",
  },
  cardDetails: {
    fontSize: 12,
    marginTop: 7,
    color: "#444",
  },
  categoryContainer1: {
    flexDirection: "row",
    width: "100%",
    alignSelf: "center",
    marginTop: 40,
    marginBottom: 10,
  },
  categoryContainer2: {
    flexDirection: "row",
    width: "100%",
    alignSelf: "center",
    marginTop: 0,
    marginBottom: 20,
  },
  categoryBtn: {
    flex: 1,
    width: "30%",
    marginHorizontal: 0,
    alignSelf: "center",
  },
  categoryIcon1: {
    borderWidth: 0,
    alignItems: "center",
    justifyContent: "center",
    alignSelf: "center",
    width: 70,
    height: 70,
    backgroundColor: "#fdeae7",
    borderRadius: 50,
    marginTop: 20,
  },
  categoryIcon: {
    borderWidth: 0,
    alignItems: "center",
    justifyContent: "center",
    alignSelf: "center",
    width: 70,
    height: 70,
    backgroundColor: "#fdeae7",
    borderRadius: 50,
  },
  categoryBtnTxt: {
    alignSelf: "center",
    marginTop: 5,
    color: "white",
  },
});