Skip to content

Commit 710958d

Browse files
saddamrushowlsaddamrushowl
committed
first commit
1 parent 70fe708 commit 710958d

File tree

10 files changed

+218
-225
lines changed

10 files changed

+218
-225
lines changed

‎App.tsx

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
import { StatusBar } from 'expo-status-bar';
2-
import { SafeAreaProvider } from 'react-native-safe-area-context';
1+
import { SafeAreaProvider } from 'react-native-safe-area-context'
32

4-
import useCachedResources from './hooks/useCachedResources';
5-
import useColorScheme from './hooks/useColorScheme';
6-
import Navigation from './navigation';
3+
import useCachedResources from './hooks/useCachedResources'
4+
import Navigation from './navigation'
75

86
export default function App() {
9-
const isLoadingComplete = useCachedResources();
10-
const colorScheme = useColorScheme();
7+
const isLoadingComplete = useCachedResources()
118

12-
if (!isLoadingComplete) {
13-
return null;
14-
} else {
15-
return (
16-
<SafeAreaProvider>
17-
<Navigation colorScheme={colorScheme} />
18-
<StatusBar />
19-
</SafeAreaProvider>
20-
);
21-
}
9+
if (!isLoadingComplete) {
10+
return null
11+
} else {
12+
return (
13+
<SafeAreaProvider>
14+
<Navigation />
15+
</SafeAreaProvider>
16+
)
17+
}
2218
}

‎app.json

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
{
2-
"expo": {
3-
"name": "zoom-clone-app-reactnative-typescript",
4-
"slug": "zoom-clone-app-reactnative-typescript",
5-
"version": "1.0.0",
6-
"orientation": "portrait",
7-
"icon": "./assets/images/icon.png",
8-
"scheme": "myapp",
9-
"userInterfaceStyle": "automatic",
10-
"splash": {
11-
"image": "./assets/images/splash.png",
12-
"resizeMode": "contain",
13-
"backgroundColor": "#ffffff"
14-
},
15-
"updates": {
16-
"fallbackToCacheTimeout": 0
17-
},
18-
"assetBundlePatterns": [
19-
"**/*"
20-
],
21-
"ios": {
22-
"supportsTablet": true
23-
},
24-
"android": {
25-
"adaptiveIcon": {
26-
"foregroundImage": "./assets/images/adaptive-icon.png",
27-
"backgroundColor": "#ffffff"
28-
}
29-
},
30-
"web": {
31-
"favicon": "./assets/images/favicon.png"
32-
}
33-
}
2+
"expo": {
3+
"name": "zoom-clone-app",
4+
"slug": "zoom-clone-app",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "myapp",
9+
"userInterfaceStyle": "light",
10+
"backgroundColor": "#1e085a",
11+
"splash": {
12+
"image": "./assets/images/splash.png",
13+
"resizeMode": "contain",
14+
"backgroundColor": "#ffffff"
15+
},
16+
"updates": {
17+
"fallbackToCacheTimeout": 0
18+
},
19+
"assetBundlePatterns": ["**/*"],
20+
"ios": {
21+
"supportsTablet": true
22+
},
23+
"android": {
24+
"adaptiveIcon": {
25+
"foregroundImage": "./assets/images/adaptive-icon.png",
26+
"backgroundColor": "#ffffff"
27+
}
28+
},
29+
"web": {
30+
"favicon": "./assets/images/favicon.png"
31+
}
32+
}
3433
}

‎constants/Colors.ts

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
1-
const tintColorLight = '#2f95dc';
2-
const tintColorDark = '#fff';
1+
const tintColorLight = '#2f95dc'
2+
const tintColorDark = '#fff'
33

44
export default {
5-
light: {
6-
text: '#000',
7-
background: '#fff',
8-
tint: tintColorLight,
9-
tabIconDefault: '#ccc',
10-
tabIconSelected: tintColorLight,
11-
},
12-
dark: {
13-
text: '#fff',
14-
background: '#000',
15-
tint: tintColorDark,
16-
tabIconDefault: '#ccc',
17-
tabIconSelected: tintColorDark,
18-
},
19-
};
5+
light: {
6+
text: '#000',
7+
background: '#fff',
8+
tint: tintColorLight,
9+
tabIconDefault: '#ccc',
10+
tabIconSelected: tintColorLight,
11+
},
12+
dark: {
13+
text: '#fff',
14+
background: '#000',
15+
tint: tintColorDark,
16+
tabIconDefault: '#ccc',
17+
tabIconSelected: tintColorDark,
18+
},
19+
}
20+
21+
export const GlobalScreenOption = {
22+
headerStyle: { backgroundColor: '#3A76F0' },
23+
headerTitleStyle: { color: '#fff' },
24+
headerTintColor: '#fff',
25+
}

‎constants/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Colors'

‎navigation/index.tsx

Lines changed: 25 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,26 @@
1-
/**
2-
* If you are not familiar with React Navigation, refer to the "Fundamentals" guide:
3-
* https://reactnavigation.org/docs/getting-started
4-
*
5-
*/
6-
import { FontAwesome } from '@expo/vector-icons';
7-
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
8-
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
9-
import { createNativeStackNavigator } from '@react-navigation/native-stack';
10-
import * as React from 'react';
11-
import { ColorSchemeName, Pressable } from 'react-native';
12-
13-
import Colors from '../constants/Colors';
14-
import useColorScheme from '../hooks/useColorScheme';
15-
import ModalScreen from '../screens/ModalScreen';
16-
import NotFoundScreen from '../screens/NotFoundScreen';
17-
import TabOneScreen from '../screens/TabOneScreen';
18-
import TabTwoScreen from '../screens/TabTwoScreen';
19-
import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
20-
import LinkingConfiguration from './LinkingConfiguration';
21-
22-
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
23-
return (
24-
<NavigationContainer
25-
linking={LinkingConfiguration}
26-
theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
27-
<RootNavigator />
28-
</NavigationContainer>
29-
);
30-
}
31-
32-
/**
33-
* A root stack navigator is often used for displaying modals on top of all other content.
34-
* https://reactnavigation.org/docs/modal
35-
*/
36-
const Stack = createNativeStackNavigator<RootStackParamList>();
37-
38-
function RootNavigator() {
39-
return (
40-
<Stack.Navigator>
41-
<Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
42-
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
43-
<Stack.Group screenOptions={{ presentation: 'modal' }}>
44-
<Stack.Screen name="Modal" component={ModalScreen} />
45-
</Stack.Group>
46-
</Stack.Navigator>
47-
);
48-
}
49-
50-
/**
51-
* A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
52-
* https://reactnavigation.org/docs/bottom-tab-navigator
53-
*/
54-
const BottomTab = createBottomTabNavigator<RootTabParamList>();
55-
56-
function BottomTabNavigator() {
57-
const colorScheme = useColorScheme();
58-
59-
return (
60-
<BottomTab.Navigator
61-
initialRouteName="TabOne"
62-
screenOptions={{
63-
tabBarActiveTintColor: Colors[colorScheme].tint,
64-
}}>
65-
<BottomTab.Screen
66-
name="TabOne"
67-
component={TabOneScreen}
68-
options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({
69-
title: 'Tab One',
70-
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
71-
headerRight: () => (
72-
<Pressable
73-
onPress={() => navigation.navigate('Modal')}
74-
style={({ pressed }) => ({
75-
opacity: pressed ? 0.5 : 1,
76-
})}>
77-
<FontAwesome
78-
name="info-circle"
79-
size={25}
80-
color={Colors[colorScheme].text}
81-
style={{ marginRight: 15 }}
82-
/>
83-
</Pressable>
84-
),
85-
})}
86-
/>
87-
<BottomTab.Screen
88-
name="TabTwo"
89-
component={TabTwoScreen}
90-
options={{
91-
title: 'Tab Two',
92-
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
93-
}}
94-
/>
95-
</BottomTab.Navigator>
96-
);
97-
}
98-
99-
/**
100-
* You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
101-
*/
102-
function TabBarIcon(props: {
103-
name: React.ComponentProps<typeof FontAwesome>['name'];
104-
color: string;
105-
}) {
106-
return <FontAwesome size={30} style={{ marginBottom: -3 }} {...props} />;
1+
import { StatusBar } from 'expo-status-bar'
2+
import * as React from 'react'
3+
import { NavigationContainer } from '@react-navigation/native'
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack'
5+
6+
import LoginScreen from '../screens/LoginScreen'
7+
import SignUpScreen from '../screens/SignUpScreen'
8+
import HomeScreen from '../screens/HomeScreen'
9+
import { GlobalScreenOption } from '../constants'
10+
11+
const Stack = createNativeStackNavigator()
12+
13+
export default function Navigation() {
14+
return (
15+
<NavigationContainer>
16+
<Stack.Navigator
17+
initialRouteName="Home"
18+
screenOptions={GlobalScreenOption}>
19+
<Stack.Screen name="Login" component={LoginScreen} />
20+
<Stack.Screen name="SignUp" component={SignUpScreen} />
21+
<Stack.Screen name="Home" component={HomeScreen} />
22+
</Stack.Navigator>
23+
<StatusBar style="auto" />
24+
</NavigationContainer>
25+
)
10726
}

‎screens/HomeScreen.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {
2+
StyleSheet,
3+
Text,
4+
View,
5+
Button,
6+
FlatList,
7+
SafeAreaView,
8+
} from 'react-native'
9+
import React, { useLayoutEffect, useState } from 'react'
10+
11+
import { RootTabScreenProps } from '../types'
12+
13+
export default function HomeScreen({ navigation }: RootTabScreenProps<'Home'>) {
14+
useLayoutEffect(() => {
15+
navigation.setOptions({
16+
title: 'Your Goals',
17+
// headerStyle: { backgroundColor: '#1e085a' },
18+
headerTintColor: 'white',
19+
headerTitleStyle: {
20+
fontWeight: 'bold',
21+
fontSize: 22,
22+
color: 'white',
23+
},
24+
headerTitleAlign: 'center',
25+
headerLeft: () => <View style={{ marginLeft: 20 }}></View>,
26+
})
27+
}, [navigation])
28+
29+
return <SafeAreaView style={styles.container}>ok</SafeAreaView>
30+
}
31+
32+
const styles = StyleSheet.create({
33+
container: {
34+
// backgroundColor: '#1e085a',
35+
color: '#FFF',
36+
flex: 1,
37+
},
38+
flatList: {
39+
flex: 3,
40+
marginTop: 25,
41+
},
42+
emptyList: {
43+
shadowOffset: { width: 0, height: 3 },
44+
shadowOpacity: 0.4,
45+
shadowRadius: 2,
46+
width: '100%',
47+
maxWidth: '90%',
48+
margin: 10,
49+
fontSize: 22,
50+
fontWeight: 'bold',
51+
marginLeft: 'auto',
52+
marginRight: 'auto',
53+
textAlign: 'center',
54+
cursor: 'pointer',
55+
borderRadius: 6,
56+
backgroundColor: '#5e0acc',
57+
color: '#FFFF',
58+
paddingHorizontal: 10,
59+
paddingVertical: 20,
60+
},
61+
item: {
62+
marginTop: 5,
63+
fontSize: 15,
64+
flex: 1,
65+
color: 'white',
66+
},
67+
button: {
68+
width: '100%',
69+
maxWidth: '90%',
70+
margin: 10,
71+
cursor: 'pointer',
72+
fontSize: 22,
73+
marginTop: 50,
74+
marginLeft: 'auto',
75+
marginRight: 'auto',
76+
},
77+
})

‎screens/LoginScreen.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { StyleSheet, Text, View } from 'react-native'
2+
import React from 'react'
3+
4+
export default function LoginScreen() {
5+
return (
6+
<View>
7+
<Text>LoginScreen</Text>
8+
</View>
9+
)
10+
}
11+
12+
const styles = StyleSheet.create({})

‎screens/SignUpScreen.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { StyleSheet, Text, View } from 'react-native'
2+
import React from 'react'
3+
4+
export default function SignUpScreen() {
5+
return (
6+
<View>
7+
<Text>SignUpScreen</Text>
8+
</View>
9+
)
10+
}
11+
12+
const styles = StyleSheet.create({})

0 commit comments

Comments
 (0)