Mobile photo at readme

.gitignore

@@ -1,3 +1,5 @@
 # dependencies
 
-/img
+/img
+
+/mobile

README.md

@@ -20,14 +20,14 @@
 
 <p align="center">
   <a href="#-tecnologias">🚀 Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-  <a href="#-projeto">🖥️ Projeto</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#%EF%B8%8F-projeto">🖥️ Projeto</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#-backend">🔨 Backend</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#-frontend">🌐 Frontend</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#-mobile">📱 Mobile</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#-como-contribuir">😉 Como contribuir</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<br>
   <a href="#-como-executar">⚙️ Como executar</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <a href="#-licença">🧾 Licença</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-    <a href="#-licença">🧑 Autor</a>
+    <a href="#-Autor">🧑 Autor</a>
 </p>
 
 <br>
@@ -61,10 +61,10 @@ O Projeto Be The Hero tem como objetivo conectar pessoas com vontade de ajudar c
     <img  src="./assets/frontend-computer0.png" />
 </h1>
 
-<!-- ## 📱 Mobile
-<h1 align="center">
-<a href="./assets/Insomnia.json" target="_blank"><img src="https://insomnia.rest/images/run.svg" alt="Run in Insomnia"></a>
-</h1> -->
+## 📱 Mobile
+<h2 align="center">
+  <img src="./assets/mobile.png" alt="Backend Photo">
+</h2>
 
 ## ⚙️ Como Executar
 

mobile/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

mobile/.gitignore

@@ -0,0 +1,14 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store

mobile/App.js

@@ -0,0 +1,11 @@
+import'intl'
+import 'intl/locale-data/jsonp/pt-BR'
+import React from 'react';
+import Routes from './src/routes';
+
+export default function App() {
+  return (
+    <Routes />
+  );
+}
+

mobile/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "Be The Hero",
+    "slug": "bethehero",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#e02041"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

mobile/package.json

@@ -0,0 +1,33 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "0.1.5",
+    "@react-navigation/native": "^5.1.3",
+    "@react-navigation/stack": "^5.2.7",
+    "axios": "^0.19.2",
+    "expo": "~36.0.0",
+    "expo-constants": "^9.0.0",
+    "expo-mail-composer": "~8.0.0",
+    "intl": "^1.2.5",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
+    "react-native-screens": "2.0.0-alpha.12",
+    "react-native-web": "~0.11.7"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "~8.0.0",
+    "@babel/core": "^7.0.0"
+  },
+  "private": true
+}

mobile/src/pages/detail/index.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Feather } from '@expo/vector-icons'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import { View, Text, Image, TouchableOpacity, Linking } from 'react-native'
+import * as MailComposer from 'expo-mail-composer'
+
+
+import logoImg from '../../assets/logo.png'
+
+import styles from './style'
+
+
+export default function Detail() {
+    const navigation = useNavigation()
+    const route = useRoute()
+
+    const incident = route.params.incident
+    const message = `Ola ${incident.name}, estou entrando em contato pois gostaria de ajudar no caso "${incident.title}" com o valor de ${ Intl.NumberFormat('pt-BR', {style: 'currency',currency: 'BRL' }).format(incident.value)}`
+    function navigateBack() {
+        navigation.goBack()
+    }
+
+    function sendMail() {
+        MailComposer.composeAsync({
+            subject: `Heroi do caso: ${incident.title}`,
+            recipients: [incident.email],
+            body: message
+        })
+    }
+    function sendWhatsapp() {
+        Linking.openURL(`whatsapp://send?phone=55${incident.whatsapp}&text=${message}`)
+    }
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <Image source={logoImg} />
+
+                <TouchableOpacity onPress={navigateBack}>
+                    <Feather name="arrow-left" size={28} color="#e02041" />
+                </TouchableOpacity>
+            </View>
+            <View style={styles.incident}>
+                <Text style={[styles.incidentProperty, { marginTop: 0 }]}>ONG:</Text>
+    <Text style={styles.incidentValue}>{incident.name} ({incident.city}/{incident.uf})</Text>
+
+                <Text style={styles.incidentProperty}>Caso:</Text>
+                <Text style={styles.incidentValue}>{incident.description}</Text>
+
+                <Text style={styles.incidentProperty}>Valor:</Text>
+                <Text style={styles.incidentValue}>{
+                    Intl.NumberFormat('pt-BR', {
+                    style: 'currency',
+                    currency: 'BRL'
+                    }).format(incident.value)}
+                </Text>
+
+            </View>
+            <View style={styles.contactBox}>
+                <Text style={styles.heroTitle}>Salve o dia!</Text>
+                <Text style={styles.heroTitle}>Seja o heroi desse caso.</Text>
+
+
+                <Text style={styles.heroDescription}>Entre em contato</Text>
+
+                <View style={styles.actions}>
+                    <TouchableOpacity style={styles.action} onPress={sendWhatsapp} >
+                        <Text style={styles.actionText}>Whatsapp</Text>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity style={styles.action} onPress={sendMail} >
+                        <Text style={styles.actionText}>E-mail</Text>
+                    </TouchableOpacity>
+
+                </View>
+            </View>
+        </View>
+
+    )
+}

mobile/src/pages/detail/style.js

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native'
+import Constants from 'expo-constants'
+
+export default StyleSheet.create({
+    container:{
+        flex: 1,
+        paddingHorizontal: 24,
+        paddingTop: Constants.statusBarHeight +20
+    },
+    header:{
+        flexDirection:'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    incident: {
+        padding: 24,
+        borderRadius: 8,
+        backgroundColor: '#fff',
+        marginBottom: 16,
+        marginTop: 48
+    },
+    incidentProperty: {
+        fontSize: 14,
+        color: '#41414d',
+        fontWeight: 'bold',
+        marginTop: 24
+    },
+    incidentValue: { 
+        marginTop:8,
+        fontSize: 15,
+
+        color: '#737380'
+    },
+    contactBox:{
+        padding: 24,
+        borderRadius: 8,
+        backgroundColor: '#fff',
+        marginBottom: 16,
+    },
+    heroTitle:{
+        fontWeight:'bold',
+        fontSize:20,
+        color: '#13131a',
+        lineHeight:30,
+    },
+    heroDescription:{
+        fontSize: 15,
+        color: '#737380',
+        marginTop: 16,
+    },
+    actions:{
+        marginTop:16,
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+    },
+    action: {
+        backgroundColor: "#e02041",
+        borderRadius: 8,
+        height: 50,
+        width: '48%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    actionText:{
+        color: '#fff',
+        fontSize: 15,
+        fontWeight: 'bold'
+    }
+
+})