Skip to content

Commit 45efe2f

Browse files
DanielBGCDanielBGC
committed
feat: Adicionando navegação entre componentes através do @react-navigation/drawer
1 parent 66719db commit 45efe2f

File tree

9 files changed

+221
-12
lines changed

9 files changed

+221
-12
lines changed

‎.env.example

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
SENTRY_ORG=
2+
SENTRY_PROJECT=
3+
SENTRY_DSN=

‎App.tsx

+87-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
import { StyleSheet, Text, View } from 'react-native';
2-
import * as Sentry from '@sentry/react-native';
1+
import React from 'react';
2+
3+
import { View, Text, TouchableOpacity, StyleSheet, Animated } from 'react-native';
4+
5+
import { createDrawerNavigator } from '@react-navigation/drawer';
6+
import { NavigationContainer } from '@react-navigation/native';
7+
import { MaterialIcons } from '@expo/vector-icons';
8+
39
import Constants from 'expo-constants';
410

5-
import { Home } from '@screens/Home/Home';
11+
import * as Sentry from '@sentry/react-native';
12+
13+
import { HomeScreen } from '@screens/Home/Home';
14+
import { RoversScreen } from '@screens/Rovers/Rovers';
15+
import { GalaxiesScreen } from '@screens/Galaxies/Galaxies';
16+
17+
import { Colors } from '@consts/consts';
618

719
// Acessando as variáveis definidas no .env
820
const sentryDsn = Constants.manifest2?.extra?.expoClient?.extra?.sentryDsn;
@@ -12,12 +24,81 @@ Sentry.init({
1224
debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
1325
});
1426

15-
function App() {
27+
const Drawer = createDrawerNavigator();
28+
29+
// Menu lateral
30+
const CustomDrawerContent = ({ navigation }: any) => {
1631
return (
17-
<View className="flex-1 items-center justify-center bg-white">
18-
<Home />
32+
<View style={styles.drawerContainer}>
33+
<TouchableOpacity style={styles.drawerButton} onPress={() => navigation.navigate('Home')}>
34+
<Text style={styles.drawerText}>Home</Text>
35+
</TouchableOpacity>
36+
<TouchableOpacity style={styles.drawerButton} onPress={() => navigation.navigate('Galaxies')}>
37+
<Text style={styles.drawerText}>Galaxies</Text>
38+
</TouchableOpacity>
39+
<TouchableOpacity style={styles.drawerButton} onPress={() => navigation.navigate('Rovers')}>
40+
<Text style={styles.drawerText}>Rovers</Text>
41+
</TouchableOpacity>
1942
</View>
2043
);
44+
};
45+
46+
const screenOptions = ({ navigation }: any) => ({
47+
headerStyle: {
48+
backgroundColor: '#1a1a1a', // Cor do header
49+
},
50+
headerTitleStyle: {
51+
fontSize: 24,
52+
},
53+
headerTintColor: Colors.purple, // Cor do texto e ícones no header
54+
headerLeft: () => (
55+
<TouchableOpacity
56+
style={{
57+
marginLeft: 10,
58+
}}
59+
onPress={() => navigation.toggleDrawer()}
60+
>
61+
<MaterialIcons name="menu" size={30} color={Colors.purple} />
62+
</TouchableOpacity>
63+
),
64+
});
65+
66+
// Navegação com Menu Lateral
67+
const AppNavigator = () => {
68+
return (
69+
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
70+
<Drawer.Screen name="Home" component={HomeScreen} options={screenOptions} />
71+
<Drawer.Screen name="Galaxies" component={GalaxiesScreen} options={screenOptions} />
72+
<Drawer.Screen name="Rovers" component={RoversScreen} options={screenOptions} />
73+
</Drawer.Navigator>
74+
);
75+
};
76+
77+
function App() {
78+
return (
79+
<NavigationContainer>
80+
<AppNavigator />
81+
</NavigationContainer>
82+
);
2183
}
2284

2385
export default Sentry.wrap(App);
86+
87+
const styles = StyleSheet.create({
88+
drawerContainer: {
89+
flex: 1,
90+
paddingTop: 50,
91+
paddingHorizontal: 20,
92+
backgroundColor: Colors.darkGray,
93+
},
94+
drawerButton: {
95+
marginVertical: 15,
96+
padding: 15,
97+
backgroundColor: Colors.purple,
98+
borderRadius: 8,
99+
},
100+
drawerText: {
101+
fontSize: 18,
102+
color: '#fff',
103+
},
104+
});

‎assets/images/galaxy.png

2.49 MB
Loading

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"web": "expo start --web"
1010
},
1111
"dependencies": {
12+
"@expo/vector-icons": "expo/vector-icons",
13+
"@react-navigation/drawer": "^6.7.2",
1214
"@react-navigation/native": "^6.1.18",
1315
"@react-navigation/stack": "^6.4.1",
1416
"@sentry/react-native": "~5.24.3",

‎src/consts/consts.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const Colors = {
2+
white: '#fff',
3+
purple: 'rgb(112, 93, 207)',
4+
darkGray: '#333',
5+
lightGray: '#f0f0f0',
6+
};

‎src/screens/Galaxies/Galaxies.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Text, View, StyleSheet } from 'react-native';
2+
3+
export const GalaxiesScreen = () => {
4+
return (
5+
<View style={styles.screenContainer}>
6+
<Text style={styles.screenText}>Galaxies Screen</Text>
7+
</View>
8+
);
9+
};
10+
11+
const styles = StyleSheet.create({
12+
screenContainer: {
13+
flex: 1,
14+
justifyContent: 'center',
15+
alignItems: 'center',
16+
backgroundColor: '#f0f0f0',
17+
},
18+
screenText: {
19+
fontSize: 24,
20+
fontWeight: 'bold',
21+
},
22+
});

‎src/screens/Home/Home.tsx

+68-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,70 @@
1-
import { Text } from 'react-native';
1+
import { Colors } from '@consts/consts';
2+
import { Text, View, StyleSheet, Image, ScrollView } from 'react-native';
3+
import { SafeAreaView } from 'react-native-safe-area-context';
24

3-
export const Home = () => {
4-
return <Text>Tela Home</Text>;
5+
const GALAXY = require('@assets/images/galaxy.png');
6+
7+
export const HomeScreen = () => {
8+
return (
9+
<SafeAreaView style={styles.screenContainer}>
10+
<ScrollView>
11+
<View
12+
style={{
13+
gap: 10,
14+
marginBottom: 30,
15+
padding: 8,
16+
}}
17+
>
18+
<Text style={styles.screenText}>
19+
If you're an astronomy enthusiast and fascinated by the mysteries of the universe, this
20+
app is perfect for you!
21+
</Text>
22+
<Text style={styles.screenText}>
23+
Our goal is to provide a rich and immersive experience, connecting you to a vast array
24+
of cosmic data. Leveraging public APIs from NASA's catalog, the app allows you to
25+
explore a wealth of information and images, such as data on comets, measurements from
26+
Mars, and even real-time imagery of Earth.
27+
</Text>
28+
<Text style={styles.screenText}>
29+
Our goal is to provide a rich and immersive experience, connecting you to a vast array
30+
of cosmic data. Leveraging public APIs from NASA's catalog, the app allows you to
31+
explore a wealth of information and images, such as data on comets, measurements from
32+
Mars, and even real-time imagery of Earth.
33+
</Text>
34+
<Text style={styles.screenText}>
35+
With an intuitive interface and up-to-date information, you'll have the universe at your
36+
fingertips!
37+
</Text>
38+
<View
39+
style={{
40+
borderWidth: 2,
41+
borderColor: Colors.purple,
42+
borderRadius: 4,
43+
}}
44+
>
45+
<Image
46+
source={GALAXY}
47+
style={{
48+
width: '100%',
49+
height: 200,
50+
}}
51+
></Image>
52+
</View>
53+
</View>
54+
</ScrollView>
55+
</SafeAreaView>
56+
);
557
};
58+
59+
const styles = StyleSheet.create({
60+
screenContainer: {
61+
flex: 1,
62+
backgroundColor: Colors.darkGray,
63+
paddingHorizontal: 8,
64+
},
65+
screenText: {
66+
fontSize: 22,
67+
textAlign: 'justify',
68+
color: Colors.white,
69+
},
70+
});

‎src/screens/Rovers/Rovers.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Text, View, StyleSheet } from 'react-native';
2+
3+
export const RoversScreen = () => {
4+
return (
5+
<View style={styles.screenContainer}>
6+
<Text style={styles.screenText}>Rovers Screen</Text>
7+
</View>
8+
);
9+
};
10+
11+
const styles = StyleSheet.create({
12+
screenContainer: {
13+
flex: 1,
14+
justifyContent: 'center',
15+
alignItems: 'center',
16+
backgroundColor: '#f0f0f0',
17+
},
18+
screenText: {
19+
fontSize: 24,
20+
fontWeight: 'bold',
21+
},
22+
});

‎yarn.lock

+11-3
Original file line numberDiff line numberDiff line change
@@ -1116,10 +1116,9 @@
11161116
dependencies:
11171117
cross-spawn "^7.0.3"
11181118

1119-
"@expo/vector-icons@^14.0.3":
1119+
"@expo/vector-icons@^14.0.3", "@expo/vector-icons@expo/vector-icons":
11201120
version "14.0.4"
1121-
resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-14.0.4.tgz#fa9d4351877312badf91a806598b2f0bab16039a"
1122-
integrity sha512-+yKshcbpDfbV4zoXOgHxCwh7lkE9VVTT5T03OUlBsqfze1PLy6Hi4jp1vSb1GVbY6eskvMIivGVc9SKzIv0oEQ==
1121+
resolved "https://codeload.github.com/expo/vector-icons/tar.gz/c8977705736735fa3222a2fd6b8108958812bfc5"
11231122
dependencies:
11241123
prop-types "^15.8.1"
11251124

@@ -1653,6 +1652,15 @@
16531652
react-is "^16.13.0"
16541653
use-latest-callback "^0.2.1"
16551654

1655+
"@react-navigation/drawer@^6.7.2":
1656+
version "6.7.2"
1657+
resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-6.7.2.tgz#3c85298c73af915f3cd5e6ca26a1a26d61010256"
1658+
integrity sha512-o4g2zgTZa2+oLd+8V33etrSM38KIqu8S/zCBTsdsHUoQyVE7JNRiv3Qgq/jMvEb8PZCqWmm7jHItcgzrBuwyOQ==
1659+
dependencies:
1660+
"@react-navigation/elements" "^1.3.31"
1661+
color "^4.2.3"
1662+
warn-once "^0.1.0"
1663+
16561664
"@react-navigation/elements@^1.3.31":
16571665
version "1.3.31"
16581666
resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.31.tgz#28dd802a0787bb03fc0e5be296daf1804dbebbcf"

0 commit comments

Comments
 (0)