└── Colecionaveis03
    ├── .expo-shared
        └── assets.json
    ├── .gitignore
    ├── App.js
    ├── app.json
    ├── assets
        ├── adaptive-icon.png
        ├── favicon.png
        ├── icon.png
        ├── imagens
        │   ├── aco.jpg
        │   ├── couro.jpg
        │   ├── espaco.jpg
        │   ├── foto.jpg
        │   ├── matrix.jpg
        │   ├── oceano.jpg
        │   └── ring.jpg
        ├── itens
        │   ├── 1.jpg
        │   ├── 2.jpg
        │   ├── 3.jpg
        │   └── 4.jpg
        └── splash.png
    ├── babel.config.js
    ├── package.json
    ├── src
        ├── components
        │   ├── ItemLista
        │   │   ├── ItemLista.js
        │   │   └── estiloItemLista.js
        │   ├── rotasDrawer
        │   │   ├── DrawerPersonalizado.js
        │   │   ├── RotasDrawer.js
        │   │   └── estiloRotasDrawer.js
        │   ├── rotasStack
        │   │   ├── RotasLoginStack.js
        │   │   └── estiloRotasStack.js
        │   └── rotasTab
        │   │   └── RotasTab.js
        └── views
        │   ├── Colecao
        │       ├── Colecao.js
        │       └── estiloColecao.js
        │   ├── Inicial
        │       ├── Inicial.js
        │       └── estiloInicial.js
        │   ├── Item
        │       ├── Item.js
        │       └── estiloItem.js
        │   ├── Login
        │       ├── Login.js
        │       └── estiloLogin.js
        │   └── Perfil
        │       ├── Perfil.js
        │       └── estiloPerfil.js
    └── yarn.lock


/Colecionaveis03/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/Colecionaveis03/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | 
12 | # macOS
13 | .DS_Store
14 | 


--------------------------------------------------------------------------------
/Colecionaveis03/App.js:
--------------------------------------------------------------------------------
 1 | import 'react-native-gesture-handler';
 2 | import React from 'react';
 3 | import { StatusBar } from 'react-native';
 4 | import { NavigationContainer } from '@react-navigation/native';
 5 | import RotasLoginStack from './src/components/rotasStack/RotasLoginStack';
 6 | 
 7 | const App = () => {
 8 |   return (
 9 |     <NavigationContainer >
10 | 
11 |         <StatusBar barStyle="light-content" backgroundColor="#081a31" />  
12 | 
13 |         <RotasLoginStack />
14 |   
15 |     </NavigationContainer>
16 |   );
17 | };
18 | 
19 | export default App;
20 | 


--------------------------------------------------------------------------------
/Colecionaveis03/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Colecionaveis03",
 4 |     "slug": "Colecionaveis03",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": [
17 |       "**/*"
18 |     ],
19 |     "ios": {
20 |       "supportsTablet": true
21 |     },
22 |     "android": {
23 |       "adaptiveIcon": {
24 |         "foregroundImage": "./assets/adaptive-icon.png",
25 |         "backgroundColor": "#FFFFFF"
26 |       }
27 |     },
28 |     "web": {
29 |       "favicon": "./assets/favicon.png"
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/Colecionaveis03/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/Colecionaveis03/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/favicon.png


--------------------------------------------------------------------------------
/Colecionaveis03/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/icon.png


--------------------------------------------------------------------------------
/Colecionaveis03/assets/imagens/aco.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/imagens/aco.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/imagens/couro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/imagens/couro.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/imagens/espaco.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/imagens/espaco.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/imagens/foto.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/imagens/foto.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/imagens/matrix.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/imagens/matrix.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/imagens/oceano.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/imagens/oceano.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/imagens/ring.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/imagens/ring.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/itens/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/itens/1.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/itens/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/itens/2.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/itens/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/itens/3.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/itens/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/itens/4.jpg


--------------------------------------------------------------------------------
/Colecionaveis03/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/react-native-firebase/a4899ac20ad81aa01a3f17d6a346eec25f038313/Colecionaveis03/assets/splash.png


--------------------------------------------------------------------------------
/Colecionaveis03/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/Colecionaveis03/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@react-native-community/masked-view": "0.1.10",
12 |     "@react-navigation/bottom-tabs": "^5.9.2",
13 |     "@react-navigation/drawer": "^5.9.3",
14 |     "@react-navigation/native": "^5.7.6",
15 |     "@react-navigation/stack": "^5.9.3",
16 |     "expo": "~39.0.2",
17 |     "expo-linear-gradient": "~8.3.0",
18 |     "expo-status-bar": "~1.0.2",
19 |     "react": "16.13.1",
20 |     "react-dom": "16.13.1",
21 |     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
22 |     "react-native-gesture-handler": "~1.7.0",
23 |     "react-native-reanimated": "~1.13.0",
24 |     "react-native-safe-area-context": "3.1.4",
25 |     "react-native-screens": "~2.10.1",
26 |     "react-native-web": "~0.13.12"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/core": "~7.9.0"
30 |   },
31 |   "private": true
32 | }
33 | 


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/ItemLista/ItemLista.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Text, View, Image } from 'react-native';
 3 | import estiloItemLista from './estiloItemLista';
 4 | import { LinearGradient } from 'expo-linear-gradient';
 5 | 
 6 | const ItemLista = ({data}) => {
 7 | 
 8 |     const [item, setItem] = useState(data);
 9 | 
10 |     return (
11 |         <View style={estiloItemLista.areaItens}>
12 | 
13 |             <LinearGradient colors={['#14417b', '#92afd7', '#92afd7']}>
14 |                 <Text style={estiloItemLista.itemTitulo}> {item.titulo} </Text>
15 |             </LinearGradient>
16 |             <Text style={estiloItemLista.itemSubTitulo}> {item.autor} ({item.anoPublicacao}) </Text>
17 |             
18 |             <LinearGradient colors={['#92afd7', '#92afd7', '#14417b']}>
19 |                 <Image 
20 |                     resizeMode='contain'
21 |                     style={estiloItemLista.itemFoto}
22 |                     source={item.foto}
23 |                 />
24 |             </LinearGradient>
25 | 
26 |         </View>
27 |     );
28 | }
29 | 
30 | export default ItemLista;


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/ItemLista/estiloItemLista.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloItemLista = StyleSheet.create({
 4 |     areaItens: {   
 5 |         flex: 1,
 6 |         backgroundColor: '#92afd7',
 7 |     },
 8 |     itemTitulo: {   
 9 |         height: 40,
10 |         fontSize: 20,
11 |         textAlign: 'center',
12 |         fontWeight: 'bold',
13 |         paddingTop: 15,
14 |     },    
15 |     itemSubTitulo: {   
16 |         fontSize: 18,
17 |         textAlign: 'center',
18 |     },    
19 |     itemFoto: {   
20 |         flex: 1,
21 |         height: 300,
22 |         marginTop: 20,
23 |         marginBottom: 20
24 |     },
25 | });
26 | 
27 | export default estiloItemLista;
28 | 


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/rotasDrawer/DrawerPersonalizado.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Text, Image } from 'react-native';
 3 | import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
 4 | import estiloRotasDrawer from './estiloRotasDrawer';
 5 | 
 6 | function DrawerPersonalizado(props) {
 7 |   return (
 8 |     <DrawerContentScrollView {...props}>
 9 | 
10 |       <View style={estiloRotasDrawer.fotoContainer}>
11 |         <Image 
12 |           style={estiloRotasDrawer.foto}
13 |           source={require('../../../assets/imagens/foto.jpg')}
14 |         />
15 |         <Text style={estiloRotasDrawer.nome}>Administrador</Text>
16 |       </View>
17 | 
18 |       <DrawerItemList {...props}/>
19 | 
20 |     </DrawerContentScrollView>
21 |   );
22 | }
23 | 
24 | export default DrawerPersonalizado;


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/rotasDrawer/RotasDrawer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createDrawerNavigator } from '@react-navigation/drawer';
 3 | import DrawerPersonalizado from './DrawerPersonalizado';
 4 | import Inicial from '../../views/Inicial/Inicial';
 5 | import Colecao from '../../views/Colecao/Colecao';
 6 | import Item from '../../views/Item/Item';
 7 | import Perfil from '../../views/Perfil/Perfil';
 8 | import { MaterialIcons } from '@expo/vector-icons';
 9 | 
10 | const Drawer = createDrawerNavigator();
11 | 
12 | const RotasDrawer = () => {
13 |   return (
14 |     <Drawer.Navigator
15 |       drawerContent={DrawerPersonalizado}
16 |     >
17 | 
18 |       <Drawer.Screen 
19 |         name="Inicial" 
20 |         component={Inicial}
21 |         options={{
22 |           drawerIcon: ({color, size}) => (
23 |             <MaterialIcons name='home' size={size} color={color} />
24 |           )
25 |         }}
26 |       />
27 | 
28 |       <Drawer.Screen 
29 |         name="Colecao" 
30 |         component={Colecao}
31 |         options={{
32 |           drawerIcon: ({color, size}) => (
33 |             <MaterialIcons name="storage" size={size} color={color} />
34 |           )
35 |         }}      
36 |       />
37 |       <Drawer.Screen 
38 |         name="Item" 
39 |         component={Item}
40 |         initialParams={{item: {}, operacao: 'adicionar'}}
41 |         options={{
42 |           drawerIcon: ({color, size}) => (
43 |             <MaterialIcons name="done-all" size={size} color={color} />
44 |           )
45 |         }}      
46 |       />
47 |       <Drawer.Screen 
48 |         name="Perfil" 
49 |         component={Perfil}
50 |         options={{
51 |           drawerIcon: ({color, size}) => (
52 |             <MaterialIcons name="person" size={size} color={color} />
53 |           )
54 |         }}      
55 |       />
56 | 
57 |     </Drawer.Navigator>
58 |   );
59 | }
60 | 
61 | export default RotasDrawer;


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/rotasDrawer/estiloRotasDrawer.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloRotasDrawer = StyleSheet.create({
 4 |     fotoContainer: {
 5 |         width: '100%',
 6 |         height: 150,
 7 |         alignItems: 'center',
 8 |         justifyContent: 'center',
 9 |         marginTop: 15,   
10 |     },
11 |     foto: {
12 |         width: 100,
13 |         height: 100,
14 |         borderRadius: 50,
15 |     },
16 |     nome: {
17 |         color: '#000000',
18 |         fontSize: 18,
19 |         marginTop: 5,
20 |         marginBottom: 25,
21 |     }
22 | });
23 | 
24 | export default estiloRotasDrawer;


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/rotasStack/RotasLoginStack.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createStackNavigator } from "@react-navigation/stack";
 3 | import estiloRotasStack from './estiloRotasStack';
 4 | import Login from '../../views/Login/Login';
 5 | import RotasTab from '../rotasTab/RotasTab';
 6 | 
 7 | const Stack = createStackNavigator();
 8 | 
 9 | const RotasLoginStack = () => {
10 |     return (
11 |         <Stack.Navigator initialRouteName="Login" >
12 |             <Stack.Screen 
13 |                 name="Login" 
14 |                 component={Login}
15 |                 options={
16 |                     { cardStyle: estiloRotasStack.screenLogin,
17 |                     headerShown: false, 
18 |                     }
19 |                 }                
20 |             />
21 |             <Stack.Screen 
22 |                 name="Inicial" 
23 |                 component={RotasTab}
24 |                 options={
25 |                     { cardStyle: estiloRotasStack.screenInicial,
26 |                     headerShown: false
27 |                     }            
28 |                 }               
29 |             />
30 |         </Stack.Navigator>
31 |     );
32 | }
33 | 
34 | export default RotasLoginStack;


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/rotasStack/estiloRotasStack.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloRotasStack = StyleSheet.create({
 4 |    screenLogin: {
 5 |       backgroundColor: '#000000'
 6 |     },
 7 |     screenInicial: {
 8 |       backgroundColor: '#92afd7'
 9 |     },
10 |     screenColecao: {
11 |       backgroundColor: '#d0f4ea'
12 |     },
13 |     screenItem: {
14 |       backgroundColor: '#d1d1d1'  
15 |     }
16 | });
17 | 
18 | export default estiloRotasStack;


--------------------------------------------------------------------------------
/Colecionaveis03/src/components/rotasTab/RotasTab.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 3 | import Colecao from '../../views/Colecao/Colecao';
 4 | import Item from '../../views/Item/Item';
 5 | import { MaterialIcons } from '@expo/vector-icons';
 6 | import RotasDrawer from '../rotasDrawer/RotasDrawer';
 7 | 
 8 | const Tab = createBottomTabNavigator();
 9 | 
10 | const icones = {
11 |   Inicial: { name: 'home' },
12 |   Colecao: { name: 'storage' },
13 |   Item: { name: 'done-all' }, 
14 | }
15 | 
16 | const RotasTab = () => {
17 |   return (
18 |     <Tab.Navigator
19 |       tabBarOptions={
20 |         {
21 |           style: {backgroundColor: '#081a31', borderTopColor: '#081a31'},
22 |           activeTintColor: '#FFFFFF',
23 |           showLabel: false,
24 |         }
25 |       }
26 |       screenOptions={ ({route}) => ({
27 |         tabBarIcon: ({color}) => {
28 |             const {name} = icones[route.name];
29 |             return <MaterialIcons name={name} size={30} color={color} />
30 |           }
31 |         })
32 |       }
33 |     >
34 |       <Tab.Screen 
35 |         name="Inicial" 
36 |         component={RotasDrawer}
37 |         options={{
38 |           unmountOnBlur: true,
39 |         }}
40 |       />
41 |       <Tab.Screen 
42 |         name="Colecao" 
43 |         component={Colecao} 
44 |         options={{
45 |           unmountOnBlur: true,
46 |         }}
47 |       />      
48 |       <Tab.Screen name="Item" component={Item} />
49 |     </Tab.Navigator>
50 |   );
51 | }
52 | 
53 | export default RotasTab;


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Colecao/Colecao.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Text, View, TouchableOpacity, FlatList } from 'react-native';
 3 | import estiloColecao from './estiloColecao';
 4 | import ItemLista from '../../components/ItemLista/ItemLista';
 5 | import { MaterialIcons } from '@expo/vector-icons';
 6 | 
 7 | function Colecao({ navigation }) {
 8 | 
 9 |     const [colecao, setColecao] = useState( [
10 |         {
11 |             id: '1',
12 |             titulo: 'Admirável Mundo Novo',
13 |             descricao: 'Um clássico moderno, o romance distópico de Aldous Huxley é indispensável para quem busca leituras sobre autoritarismo, manipulação genética, ficção especulativa e outros temas que, embora tenham surgido com força durante a primeira metade do século XX, se tornam cada dia mais atuais.',
14 |             autor: 'Aldous Huxley',
15 |             anoPublicacao: '1932',                                                    
16 |             foto: require('../../../assets/itens/1.jpg'),
17 |         },
18 |         {
19 |             id: '2',
20 |             titulo: '1984',
21 |             descricao: 'Uma das obras mais contundentes e influentes do século XX ganha nova e definitiva edição com projeto especial e ampla fortuna crítica. Romance incontornável, 1984 continua sendo o livro ao qual nos voltamos sempre que se mutila a verdade, distorce-se a linguagem e viola-se o poder.',
22 |             autor: 'George Orwell',
23 |             anoPublicacao: '1949',
24 |             foto: require('../../../assets/itens/2.jpg'),
25 |         },
26 |         {
27 |             id: '3',
28 |             titulo: 'Laranja Mecânica',
29 |             descricao: 'Publicado pela primeira vez em 1962, e imortalizado 9 anos depois pelo filme de Stanley Kubrick, Laranja Mecânica não só está entre os clássicos eternos da ficção como representa um marco na cultura pop do século 20.',
30 |             autor: 'Anthony Burgess',
31 |             anoPublicacao: '1962',                                                    
32 |             foto: require('../../../assets/itens/3.jpg'),
33 |         },
34 |         {
35 |             id: '4',
36 |             titulo: 'Neuromancer',
37 |             descricao: 'O Céu sobre o porto tinha cor de televisão num canal fora do ar. Considerada a obra precursora do movimento cyberpunk e um clássico da ficção científica moderna, Neuromancer conta a história de Case, um cowboy do ciberespaço e hacker da matrix.',
38 |             autor: 'William Gibson',
39 |             anoPublicacao: '1984',                                                    
40 |             foto: require('../../../assets/itens/4.jpg'),
41 |         }                
42 |                                             ] );
43 | 
44 | 
45 |     const voltar = () => {
46 |         navigation.navigate('Inicial')
47 |     }
48 |     
49 |     return (
50 |         <View style={estiloColecao.container}>
51 | 
52 |             <View style={estiloColecao.header}>
53 |                 <TouchableOpacity onPress={voltar}>
54 |                     <MaterialIcons name="arrow-back" size={24} color="white" />
55 |                 </TouchableOpacity>
56 |                 <Text style={estiloColecao.texto}>Coleção</Text>
57 |                 <MaterialIcons name="add" size={24} color="white" />
58 |             </View>
59 | 
60 |             <FlatList 
61 |                 showsHorizontalScrollIndicator={false}
62 |                 keyExtractor={(item) => item.id}
63 |                 data={colecao}
64 |                 renderItem={ ({item}) => <ItemLista data={item} />}
65 |             />
66 | 
67 |         </View>
68 |     )
69 | }
70 | 
71 | export default Colecao;
72 | 


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Colecao/estiloColecao.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloColecao = StyleSheet.create({
 4 |    container: {   
 5 |       flex: 1,
 6 |    },
 7 |    header: {
 8 |       height: 50,
 9 |       backgroundColor: '#14417b',
10 |       flexDirection: 'row',
11 |       alignItems: 'center',
12 |       justifyContent: 'space-between',
13 |       padding: 5,
14 |    },
15 |    texto: {
16 |       fontSize: 20,
17 |       color: '#FFFFFF',
18 |       fontWeight: 'bold',
19 |    },
20 | 
21 | });
22 | 
23 |   export default estiloColecao;


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Inicial/Inicial.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Text, View, TouchableOpacity, ImageBackground } from 'react-native';
 3 | import estiloInicial from './estiloInicial';
 4 | import { AntDesign } from '@expo/vector-icons';
 5 | import { useIsDrawerOpen } from '@react-navigation/drawer';
 6 | 
 7 | function Inicial({ navigation }) {
 8 | 
 9 |     const isDrawerOpen = useIsDrawerOpen();
10 | 
11 |     const exibirDrawer = () => {
12 |         if(!isDrawerOpen){
13 |             navigation.openDrawer();
14 |         }
15 |     }
16 | 
17 |     const abrirColecao = () => {
18 |         navigation.navigate('Colecao')
19 |     }
20 |     
21 |     const abrirItem = () => {
22 |         navigation.navigate('Item')
23 |     }
24 |     
25 |     return (
26 |         <View style={estiloInicial.container}>
27 | 
28 |             <View style={estiloInicial.header}>
29 |                 <TouchableOpacity onPress={exibirDrawer}>
30 |                     <AntDesign name="menu-fold" size={20} color="white" />
31 |                 </TouchableOpacity>
32 |             </View>
33 | 
34 |             <ImageBackground style={estiloInicial.fundo} source={require('../../../assets/imagens/aco.jpg')}>
35 | 
36 |                 <TouchableOpacity onPress={abrirColecao}>
37 |                     <ImageBackground style={estiloInicial.botaoBackground} source={require('../../../assets/imagens/espaco.jpg')}>
38 |                         <Text style={estiloInicial.botaoTexto}>Coleção</Text>                    
39 |                     </ImageBackground>
40 |                 </TouchableOpacity>
41 | 
42 |                 <TouchableOpacity onPress={abrirItem}>
43 |                     <ImageBackground style={estiloInicial.botaoBackground} source={require('../../../assets/imagens/ring.jpg')}>
44 |                         <Text style={estiloInicial.botaoTexto}>Item</Text>                    
45 |                     </ImageBackground>
46 |                 </TouchableOpacity>
47 | 
48 |             </ImageBackground>
49 |         </View>
50 |     )
51 | }
52 | 
53 | export default Inicial;
54 | 


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Inicial/estiloInicial.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloInicial = StyleSheet.create({
 4 |    container: {   
 5 |      flex: 1,
 6 |      justifyContent: 'center',
 7 |      alignItems: 'center',
 8 |    },
 9 |    header: {
10 |       height: 50,
11 |       width: '100%',
12 |       backgroundColor: '#081a31',
13 |       flexDirection: 'row',
14 |       alignItems: 'flex-end',    
15 |    },
16 |    fundo: {   
17 |       flexDirection: 'row',
18 |       justifyContent: 'space-evenly',
19 |       alignItems: 'center',     
20 |       width: '100%',
21 |       height: '100%',
22 |    },
23 |    botaoBackground: {
24 |       width: 160,
25 |       height: 120,
26 |       borderRadius: 10,
27 |       overflow: 'hidden',
28 |       justifyContent: 'flex-end',
29 |       alignItems: 'center',
30 |       padding: 10,
31 |       borderWidth: 1,
32 |       borderColor: '#14417b',
33 |    },
34 |    botaoTexto: {
35 |       fontSize: 22,
36 |       color: '#FFFFFF',
37 |    },
38 | });
39 | 
40 |   export default estiloInicial;


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Item/Item.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Text, View, TouchableOpacity } from 'react-native';
 3 | import estiloItem from './estiloItem';
 4 | 
 5 | function Item({ navigation }) {
 6 | 
 7 |     const voltar = () => {
 8 |         navigation.navigate('Inicial')
 9 |     }
10 |     
11 |     return (
12 |         <View style={estiloItem.container}>
13 |             <View style={estiloItem.borda}>
14 | 
15 |                 <Text style={estiloItem.texto}>Item</Text>
16 | 
17 |                 <TouchableOpacity style={estiloItem.botaoContainer} onPress={voltar}>
18 |                     <Text style={estiloItem.botaoTexto}>Voltar</Text>
19 |                 </TouchableOpacity>
20 | 
21 |             </View>
22 |         </View>
23 |     )
24 | }
25 | 
26 | export default Item;
27 | 


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Item/estiloItem.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloItem = StyleSheet.create({
 4 |    container: {   
 5 |       flex: 1,
 6 |       justifyContent: 'center',
 7 |       alignItems: 'center',     
 8 |    },
 9 |    borda: {   
10 |       backgroundColor: '#081a31',  
11 |       width: '80%',
12 |       height: '25%',
13 |       borderRadius: 10,
14 |    },
15 |    texto: {
16 |       fontSize: 20,
17 |       color: '#FFFFFF',
18 |       fontWeight: 'bold',
19 |       textAlign: "center",
20 |       padding: 10
21 |    },
22 |    botaoContainer: {
23 |       marginTop: 20,
24 |       marginBottom: 20,
25 |       marginLeft: 40,
26 |       marginRight: 40,
27 |       borderRadius: 5,
28 |       height: 40,
29 |       borderWidth: 2,
30 |       borderColor: '#e8f2e9',
31 |       backgroundColor: '#14417b',
32 |       justifyContent: 'center',
33 |       alignItems: 'center',
34 |    },
35 |    botaoTexto: {
36 |       fontSize: 18,
37 |       color: '#FFFFFF',
38 |       fontWeight: 'bold'
39 |    },
40 | });
41 | 
42 | export default estiloItem;


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Login/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { ImageBackground, Text, View, TextInput, TouchableOpacity, Alert } from 'react-native';
 3 | import estiloLogin from './estiloLogin';
 4 | import { AntDesign } from '@expo/vector-icons';
 5 | import { MaterialIcons } from '@expo/vector-icons';
 6 | import { MaterialCommunityIcons } from '@expo/vector-icons';
 7 | import { LinearGradient } from 'expo-linear-gradient';
 8 | 
 9 | function Login({ navigation }) {
10 | 
11 |     const [login, setLogin] = useState('');
12 |     const [senha, setSenha] = useState('');
13 | 
14 |     const entrar = () => {
15 |         if (login == '' || senha == '') {
16 |             Alert.alert(
17 |               'Preencimento obrigatório',
18 |               'Informe o login e a senha!',
19 |               [
20 |                 { text: 'OK' },
21 |               ],
22 |             );
23 |         } else {
24 | 
25 |             navigation.replace('Inicial');
26 |         }
27 |     }
28 |     
29 |     return (
30 |         <View style={estiloLogin.container}>
31 | 
32 |             <ImageBackground style={estiloLogin.fundo} source={require('../../../assets/imagens/matrix.jpg')}>            
33 | 
34 |                 <View style={estiloLogin.logoContainer}>
35 |                     <LinearGradient colors={['#4c669f', '#3b5998', '#081a31']} style={estiloLogin.logo}>
36 |                         <AntDesign name="rest" size={40} color='white'/>
37 |                     </LinearGradient> 
38 |                 </View>
39 | 
40 |                 <View style={estiloLogin.campoContainer}>
41 |                     <MaterialIcons name="person" size={24} color="white" />
42 |                     <TextInput
43 |                         style={estiloLogin.campo}
44 |                         placeholder="Login"
45 |                         onChangeText={login => setLogin(login)}
46 |                         value={login}
47 |                     />
48 |                 </View>
49 | 
50 |                 <View style={estiloLogin.campoContainer}>
51 |                     <MaterialIcons name="vpn-key" size={24} color="white" />
52 |                     <TextInput
53 |                         style={estiloLogin.campo}
54 |                         placeholder="Senha"
55 |                         onChangeText={senha => setSenha(senha)}
56 |                         value={senha}
57 |                     />
58 |                 </View>
59 | 
60 |                 <TouchableOpacity onPress={entrar}>
61 |                     <LinearGradient colors={['#4c669f', '#192f6a', '#081a31']} style={estiloLogin.botaoLinearGradient}>
62 |                         <MaterialCommunityIcons name="send" size={24} color="white" />                   
63 |                         <Text style={estiloLogin.botaoTexto}> Entrar </Text>
64 |                     </LinearGradient>                
65 |                 </TouchableOpacity>
66 | 
67 |             </ImageBackground>  
68 | 
69 |         </View>
70 |     )
71 | }
72 | 
73 | export default Login;
74 | 


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Login/estiloLogin.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloLogin = StyleSheet.create({
 4 |    container: {   
 5 |       flex: 1,
 6 |    },
 7 |    fundo: {   
 8 |       justifyContent: 'center',
 9 |       width: '100%',
10 |       height: '100%',
11 |    },
12 |    logoContainer: {
13 |       alignItems: 'center',
14 |       marginBottom: 20,
15 |    },
16 |    logo: {
17 |       width: 90,
18 |       height: 90,
19 |       borderRadius: 50,
20 |       justifyContent: 'center',
21 |       alignItems: "center",
22 |       padding: 20,
23 |    },
24 |    campoContainer: {
25 |       flexDirection: 'row',    
26 |       padding: 10,
27 |       paddingLeft: 50,
28 |       paddingRight: 50,
29 |       margin: 10,
30 |       marginRight: 50,
31 |       alignItems: 'center',
32 |     },
33 |    campo: {
34 |       width: '100%',
35 |       fontSize: 18,
36 |       color: '#FFFFFF',
37 |       marginLeft: 15,
38 |       paddingBottom: 10,
39 |       borderBottomWidth: 1,
40 |       borderColor: 'white',
41 |     },
42 |    botaoLinearGradient: {    
43 |       flexDirection: 'row',
44 |       justifyContent: 'center',
45 |       alignItems: 'center',
46 |       margin: 20,
47 |       marginLeft: 50,
48 |       marginRight: 50,
49 |       height: 50,
50 |       paddingLeft: 15,
51 |       paddingRight: 15,
52 |       borderRadius: 8,
53 |     },
54 |    botaoTexto: {
55 |       fontSize: 18,
56 |       color: '#FFFFFF',
57 |       paddingLeft: 15,
58 |       backgroundColor: 'transparent',
59 |    },
60 | });
61 | 
62 | export default estiloLogin;


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Perfil/Perfil.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StatusBar, Text, View, TouchableOpacity } from 'react-native';
 3 | import estiloPerfil from './estiloPerfil';
 4 | 
 5 | function Perfil({ navigation }) {
 6 | 
 7 |     const voltar = () => {
 8 |         navigation.navigate('Inicial')
 9 |     }
10 |     
11 |     return (
12 |         <View style={estiloPerfil.container}>
13 |             <View style={estiloPerfil.borda}>
14 |                 
15 |                 <Text style={estiloPerfil.texto}>Perfil</Text>
16 | 
17 |                 <TouchableOpacity style={estiloPerfil.botaoContainer} onPress={voltar}>
18 |                     <Text style={estiloPerfil.botaoTexto}>Voltar</Text>
19 |                 </TouchableOpacity>
20 | 
21 |             </View>
22 |         </View>
23 |     )
24 | }
25 | 
26 | export default Perfil;
27 | 


--------------------------------------------------------------------------------
/Colecionaveis03/src/views/Perfil/estiloPerfil.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet } from 'react-native';
 2 | 
 3 | const estiloPerfil = StyleSheet.create({
 4 |    container: {   
 5 |       flex: 1,
 6 |       justifyContent: 'center',
 7 |       alignItems: 'center',     
 8 |    },
 9 |    borda: {   
10 |       backgroundColor: '#081a31',  
11 |       width: '80%',
12 |       height: '25%',
13 |       borderRadius: 10,
14 |    },
15 |    texto: {
16 |       fontSize: 20,
17 |       color: '#FFFFFF',
18 |       fontWeight: 'bold',
19 |       textAlign: "center",
20 |       padding: 10
21 |    },
22 |    botaoContainer: {
23 |       marginTop: 20,
24 |       marginBottom: 20,
25 |       marginLeft: 40,
26 |       marginRight: 40,
27 |       borderRadius: 5,
28 |       height: 40,
29 |       borderWidth: 2,
30 |       borderColor: '#e8f2e9',
31 |       backgroundColor: '#14417b',
32 |       justifyContent: 'center',
33 |       alignItems: 'center',
34 |    },
35 |       botaoTexto: {
36 |       fontSize: 18,
37 |       color: '#FFFFFF',
38 |       fontWeight: 'bold'
39 |    },
40 | });
41 | 
42 |   export default estiloPerfil;


--------------------------------------------------------------------------------