zipeapp/App.js at master · gsarthakdev/zipeapp · 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
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Image, SafeAreaView } from "react-native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import { SafeAreaProvider } from "react-native-safe-area-context"

import FavoritesScreen from "./screens/SendScreens/FavoritesScreen";
import AllContactsScreen from "./screens/SendScreens/AllContactsScreen";
import NewAddressScreen from "./screens/SendScreens/NewAddressScreen";
import ZipeLogo from "./assets/icons/ZipeLogo";

const TopTabs = createMaterialTopTabNavigator();
const Stack = createNativeStackNavigator();

function SendScreens() {
  return (
    <>
    <SafeAreaProvider>
      <View style={styles.header}>
        <View style={styles.logoAndLabelContainer}>
        <View style={styles.logoContainer}>
          <Image source={require("./assets/Zipe-Logo.png")} />
        </View>
        <View style={styles.labelContainer}>
          <Text style={styles.headerLabelText}>Send</Text>
        </View>
        </View>
      </View>
      </SafeAreaProvider>
      <TopTabs.Navigator
        style={styles.navigator}
        screenOptions={{
          tabBarStyle: { backgroundColor: "black" },
          tabBarInactiveTintColor: "#5E5E5E",
          tabBarActiveTintColor: "white",
          tabBarIndicatorStyle: { backgroundColor: "white", height: 3,  },
          tabBarLabelStyle: { textTransform: "none", fontSize: 18, fontWeight: '700',},
          tabBarScrollEnabled: true
        }}
      >
        <TopTabs.Screen name="All Contacts" component={AllContactsScreen} />
        <TopTabs.Screen name="Favorites" component={FavoritesScreen} />
        <TopTabs.Screen name="New Address" component={NewAddressScreen} />
      </TopTabs.Navigator>
    </>
  );
}

export default function App() {
  return (
    <>
      <StatusBar style="light" />
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            // headerStyle: {backgroundColor: "#000000"},
            // headerTintColor: "white",
            headerShown: false,
          }}
        >
          <Stack.Screen name="Send" component={SendScreens} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000000",
    // alignItems: "center",
    // justifyContent: "center",
  },
  navigator: {
    backgroundColor: "#000000",
    // marginTop: 150,
    flex: 2,
  },
  header: {
    flex: 1,
    backgroundColor: "#000000",
    // alignItems: "center",
    // justifyContent: "center",
  },
  labelContainer: {
    alignItems: 'center'
  },
  headerLabelText: {
    color: "white",
    fontSize: 30,
    fontWeight: '800'
  },
  logoContainer: {
    alignItems: 'center',
    padding: 30
  },
  logoAndLabelContainer: {
    flex: 1,
    justifyContent: 'center',
  }
});