react-native-cv/App.js at main · Serge044/react-native-cv · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
// import React, { useEffect } from "react";
// import { NavigationContainer } from "@react-navigation/native";
// import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
// import { StatusBar } from "expo-status-bar";
// import { View, useColorScheme } from "react-native";
// import Ionicons from "react-native-vector-icons/Ionicons";
// import AboutMe from "./screens/AboutMe";
// import ContactDetails from "./screens/ContactDetails";
// import SkillsAndExpertise from "./screens/SkillsAndExpertise";
// import WorkExperience from "./screens/WorkExperience";

// const Tab = createBottomTabNavigator();

// export default function App() {
//   const colorScheme = useColorScheme();

//   useEffect(() => {
//     console.log("Current theme:", colorScheme);
//   }, [colorScheme]);

//   return (
//     <View
//       style={{
//         flex: 1,
//         backgroundColor: colorScheme === "dark" ? "#1e1e1e" : "#fff",
//       }}
//     >
//       <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
//       <NavigationContainer>
//         <Tab.Navigator
//           screenOptions={({ route }) => ({
//             tabBarIcon: ({ focused, color, size }) => {
//               let iconName;

//               if (route.name === "About me") {
//                 iconName = focused ? "person" : "person-outline";
//               } else if (route.name === "Skills And Expertise") {
//                 iconName = focused ? "star" : "star-outline";
//               } else if (route.name === "Work Experience") {
//                 iconName = focused ? "briefcase" : "briefcase-outline";
//               } else if (route.name === "Contact Details") {
//                 iconName = focused ? "call" : "call-outline";
//               }

//               return <Ionicons name={iconName} size={size} color={color} />;
//             },
//             tabBarActiveTintColor: colorScheme === "dark" ? "tomato" : "tomato",
//             tabBarInactiveTintColor:
//               colorScheme === "dark" ? "lightgray" : "gray",
//             tabBarStyle: {
//               backgroundColor: colorScheme === "dark" ? "#1e1e1e" : "#fff",
//             },
//           })}
//         >
//           <Tab.Screen name="About me" component={AboutMe} />
//           <Tab.Screen
//             name="Skills And Expertise"
//             component={SkillsAndExpertise}
//           />
//           <Tab.Screen name="Work Experience" component={WorkExperience} />
//           <Tab.Screen name="Contact Details" component={ContactDetails} />
//         </Tab.Navigator>
//       </NavigationContainer>
//     </View>
//   );
// }

import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { StatusBar } from "expo-status-bar";
import { View, useColorScheme } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import AboutMe from "./screens/AboutMe";
import ContactDetails from "./screens/ContactDetails";
import SkillsAndExpertise from "./screens/SkillsAndExpertise";
import WorkExperience from "./screens/WorkExperience";

const Tab = createBottomTabNavigator();

export default function App() {
  const colorScheme = useColorScheme();

  useEffect(() => {
    console.log("Current theme:", colorScheme);
  }, [colorScheme]);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: colorScheme === "dark" ? "#1e1e1e" : "#fff",
      }}
    >
      <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === "About me") {
                iconName = focused ? "person" : "person-outline";
              } else if (route.name === "Skills And Expertise") {
                iconName = focused ? "star" : "star-outline";
              } else if (route.name === "Work Experience") {
                iconName = focused ? "briefcase" : "briefcase-outline";
              } else if (route.name === "Contact Details") {
                iconName = focused ? "call" : "call-outline";
              }

              return <Ionicons name={iconName} size={size} color={color} />;
            },
            tabBarActiveTintColor: colorScheme === "dark" ? "tomato" : "tomato",
            tabBarInactiveTintColor:
              colorScheme === "dark" ? "lightgray" : "gray",
            tabBarStyle: {
              backgroundColor: colorScheme === "dark" ? "#1e1e1e" : "#fff",
            },
            headerStyle: {
              backgroundColor: colorScheme === "dark" ? "#1e1e1e" : "#fff",
            },
            headerTintColor: colorScheme === "dark" ? "#fff" : "#000",
          })}
        >
          <Tab.Screen name="About me" component={AboutMe} />
          <Tab.Screen
            name="Skills And Expertise"
            component={SkillsAndExpertise}
          />
          <Tab.Screen name="Work Experience" component={WorkExperience} />
          <Tab.Screen name="Contact Details" component={ContactDetails} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
}