ES2-UFPI · netochaves · Jun 13, 2019 · May 31, 2019 · May 31, 2019 · May 31, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react-native-gesture-handler": "^1.1.0",
     "react-native-image-picker": "^0.28.1",
     "react-native-linear-gradient": "^2.5.4",
+    "react-native-platform-touchable": "^1.1.1",
     "react-native-power-translator": "^1.1.1",
     "react-native-size-matters": "^0.1.7",
     "react-native-svg": "^9.3.7",

diff --git a/src/Components/About/aboutHeader.js b/src/Components/About/aboutHeader.js
@@ -1,22 +1,24 @@
 import React from "react"
 
-import { View, StyleSheet, Text, TouchableOpacity } from "react-native"
+import { View, StyleSheet, Text } from "react-native"
+import Touchable from "react-native-platform-touchable"
 import { Icon } from "react-native-elements"
 
 const aboutHeader = props => {
   return (
     <View style={styles.header}>
       <View style={styles.headerContent}>
-        <TouchableOpacity
+        <Touchable
+          background={Touchable.SelectableBackgroundBorderless()}
           style={styles.backButton}
           onPress={() => {
             const { navigation } = props
             navigation.navigate("SettingsScreen")
           }}
           hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
         >
-          <Icon name="ios-arrow-back" color="#00aced" type="ionicon" />
-        </TouchableOpacity>
+          <Icon name="md-arrow-back" color="#00aced" type="ionicon" />
+        </Touchable>
         <Text style={styles.languagesInfo}>Sobre</Text>
       </View>
     </View>
@@ -31,23 +33,19 @@ const styles = StyleSheet.create({
     fontFamily: "OpenSans"
   },
   headerContent: {
-    backgroundColor: "#fff",
     marginBottom: 15,
     marginTop: 15,
-    marginRight: 10,
-    paddingLeft: 15,
     flexDirection: "row"
   },
   backButton: {
-    justifyContent: "center"
+    justifyContent: "center",
+    width: 40,
+    marginLeft: 10
   },
   languagesInfo: {
-    flex: 1,
     fontSize: 22,
     textAlign: "left",
-    backgroundColor: "#fff",
-    marginLeft: 20,
-    paddingRight: 20
+    marginLeft: 10
   }
 })
 

diff --git a/src/Components/Chat/chatHeader.js b/src/Components/Chat/chatHeader.js
@@ -1,41 +1,46 @@
 import React from "react"
 
-import { View, StyleSheet, Text, TouchableOpacity } from "react-native"
+import { View, StyleSheet, Text } from "react-native"
 import { Avatar, Icon } from "react-native-elements"
+import Touchable from "react-native-platform-touchable"
 
 const chatHeader = props => {
   const { userName, userPhoto, navigation, status } = props
 
   return (
     <View style={styles.header}>
       <View style={styles.headerContent}>
-        <TouchableOpacity
+        <Touchable
+          background={Touchable.SelectableBackgroundBorderless()}
           style={styles.back}
           onPress={() => navigation.goBack()}
         >
-          <Icon name="ios-arrow-back" color="#00aced" type="ionicon" />
-        </TouchableOpacity>
-        <Avatar
-          containerStyle={styles.avatar}
-          rounded
-          source={{ uri: userPhoto }}
-          size={40}
-        />
-        <View style={styles.userInfo}>
-          <Text
-            style={styles.userName}
-            onPress={() =>
-              navigation.navigate("PreviewImage", {
-                img: userPhoto,
-                name: userName,
-                isLoggedIn: true
-              })
-            }
-          >
-            {userName}
-          </Text>
-          <Text style={styles.lastSeen}>{status}</Text>
-        </View>
+          <View style={styles.backButton}>
+            <Icon name="md-arrow-back" color="#00aced" type="ionicon" />
+            <Avatar
+              containerStyle={styles.avatar}
+              rounded
+              source={{ uri: userPhoto }}
+              size={40}
+            />
+          </View>
+        </Touchable>
+        <Touchable
+          background={Touchable.SelectableBackground()}
+          style={styles.userInfo}
+          onPress={() =>
+            navigation.navigate("PreviewImage", {
+              img: userPhoto,
+              name: userName,
+              isLoggedIn: true
+            })
+          }
+        >
+          <View>
+            <Text style={styles.userName}>{userName}</Text>
+            <Text style={styles.lastSeen}>{status}</Text>
+          </View>
+        </Touchable>
         <Icon
           containerStyle={styles.moreInfo}
           name="dots-vertical"
@@ -78,6 +83,11 @@ const styles = StyleSheet.create({
   },
   back: {
     justifyContent: "center"
+  },
+  backButton: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center"
   }
 })
 

diff --git a/src/Components/Config/configBody.js b/src/Components/Config/configBody.js
@@ -1,14 +1,16 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { Component } from "react"
 import {
   View,
   StyleSheet,
   Text,
-  TouchableOpacity,
   ScrollView,
   Switch,
   Linking,
+  TouchableOpacity,
   Share
 } from "react-native"
+import Touchable from "react-native-platform-touchable"
 import { Icon } from "react-native-elements"
 import firebase from "react-native-firebase"
 
@@ -46,101 +48,119 @@ export default class configBody extends Component {
           <View style={styles.innerBody}>
             <Text style={styles.touchableStyleTitle}>Conta</Text>
             <Text style={styles.line} />
-            <TouchableOpacity
-              style={styles.touchableIcon}
+            <Touchable
+              style={styles.platformTouchable}
               onPress={() => {
                 navigation.navigate("LanguagesScreen")
               }}
             >
-              <Icon name="language" size={28} color="#007AFF" />
-              <Text style={styles.touchableStyle}>Idiomas</Text>
-              <View style={styles.chevronStyle}>
-                <Icon
-                  name="chevron-right"
-                  size={28}
-                  color="gray"
-                  type="evilicon"
-                />
+              <View style={styles.touchableIcon}>
+                <Icon name="language" size={28} color="#007AFF" />
+                <Text style={styles.touchableStyle}>Idiomas</Text>
+                <View style={styles.chevronStyle}>
+                  <Icon
+                    name="chevron-right"
+                    size={28}
+                    color="gray"
+                    type="evilicon"
+                  />
+                </View>
               </View>
-            </TouchableOpacity>
+            </Touchable>
 
-            <TouchableOpacity
-              style={styles.touchableIcon}
+            <Touchable
+              style={styles.platformTouchable}
               onPress={() => {
                 navigation.navigate("EditPerfilScreen")
               }}
             >
-              <Icon name="person" size={28} color="#c6056c" />
-              <Text style={styles.touchableStyle}>Perfil</Text>
-              <View style={styles.chevronStyle}>
-                <Icon
-                  name="chevron-right"
-                  size={28}
-                  color="gray"
-                  type="evilicon"
-                />
+              <View style={styles.touchableIcon}>
+                <Icon name="person" size={28} color="#c6056c" />
+                <Text style={styles.touchableStyle}>Perfil</Text>
+                <View style={styles.chevronStyle}>
+                  <Icon
+                    name="chevron-right"
+                    size={28}
+                    color="gray"
+                    type="evilicon"
+                  />
+                </View>
               </View>
-            </TouchableOpacity>
+            </Touchable>
 
-            <TouchableOpacity style={styles.touchableIcon}>
-              <Icon name="notifications" size={28} color="#ef2390" />
-              <Text style={styles.touchableStyle}>Notificação</Text>
-              <View style={styles.chevronStyle}>
-                <Switch
-                  onValueChange={this.switchHandler}
-                  value={switchState}
-                />
+            <Touchable style={styles.platformTouchable}>
+              <View style={styles.touchableIcon}>
+                <Icon name="notifications" size={28} color="#ef2390" />
+                <Text style={styles.touchableStyle}>Notificação</Text>
+                <View style={styles.chevronStyle}>
+                  <Switch
+                    onValueChange={this.switchHandler}
+                    value={switchState}
+                  />
+                </View>
               </View>
-            </TouchableOpacity>
+            </Touchable>
 
             <Text style={styles.touchableStyleTitle}>Aplicativo</Text>
             <Text style={styles.line} />
 
-            <TouchableOpacity style={styles.touchableIcon}>
-              <Icon name="chat" size={28} color="#e542f4" />
-              <Text style={styles.touchableStyle}>Enviar Feedback</Text>
-            </TouchableOpacity>
+            <Touchable style={styles.platformTouchable}>
+              <View style={styles.touchableIcon}>
+                <Icon name="chat" size={28} color="#e542f4" />
+                <Text style={styles.touchableStyle}>Enviar Feedback</Text>
+              </View>
+            </Touchable>
 
-            <TouchableOpacity
-              style={styles.touchableIcon}
+            <Touchable
+              style={styles.platformTouchable}
               onPress={() => {
                 Share.share({
                   message:
                     "Olá, já instalou o Unichat? Se não, é bem fácil. Apenas clique no link a seguir https://github.com/ES2-UFPI/Unichat/releases"
                 })
               }}
             >
-              <Icon name="share" size={28} color="#14d2e8" />
-              <Text style={styles.touchableStyle}>Compartilhar App</Text>
-            </TouchableOpacity>
+              <View style={styles.touchableIcon}>
+                <Icon name="share" size={28} color="#14d2e8" />
+                <Text style={styles.touchableStyle}>Compartilhar App</Text>
+              </View>
+            </Touchable>
 
-            <TouchableOpacity style={styles.touchableIcon}>
-              <Icon name="star" size={28} color="#deea2e" />
-              <Text style={styles.touchableStyle}>Avaliar App</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.touchableIcon}
+            <Touchable style={styles.platformTouchable}>
+              <View style={styles.touchableIcon}>
+                <Icon name="star" size={28} color="#deea2e" />
+                <Text style={styles.touchableStyle}>Avaliar App</Text>
+              </View>
+            </Touchable>
+            <Touchable
+              style={styles.platformTouchable}
               onPress={() => {
                 Linking.openURL(
                   "https://github.com/ES2-UFPI/Unichat/blob/dev/PRIVACY-POLICY.md"
                 )
               }}
             >
-              <Icon name="notifications" size={28} color="#25e01f" />
-              <Text style={styles.touchableStyle}>Política de Privacidade</Text>
-            </TouchableOpacity>
+              <View style={styles.touchableIcon}>
+                <Icon name="notifications" size={28} color="#25e01f" />
+                <Text style={styles.touchableStyle}>
+                  Política de Privacidade
+                </Text>
+              </View>
+            </Touchable>
 
-            <TouchableOpacity
-              style={styles.touchableIcon}
+            <Touchable
+              style={styles.platformTouchable}
               onPress={() => {
                 navigation.navigate("AboutScreen")
               }}
             >
-              <Icon name="info" size={28} color="#ef9739" />
-              <Text style={styles.touchableStyle}>Sobre</Text>
-            </TouchableOpacity>
+              <View style={styles.touchableIcon}>
+                <Icon name="info" size={28} color="#ef9739" />
+                <Text style={styles.touchableStyle}>Sobre</Text>
+              </View>
+            </Touchable>
           </View>
-          <TouchableOpacity>
+          <TouchableOpacity style={{alignSelf: "center"}}>
             <Text style={styles.touchableStyleExit}>Excluir Conta</Text>
           </TouchableOpacity>
         </ScrollView>
@@ -162,17 +182,16 @@ const styles = StyleSheet.create({
   },
   innerBody: {
     marginTop: 10,
-    marginLeft: 30
+    marginLeft: 20,
+    marginRight: 20
   },
   chevronStyle: {
     flex: 1,
-    marginRight: 10,
     alignItems: "flex-end"
   },
   touchableIcon: {
     flexDirection: "row",
-    alignItems: "center",
-    marginTop: 10
+    alignItems: "center"
   },
   touchableStyle: {
     fontFamily: "OpenSans",
@@ -202,5 +221,8 @@ const styles = StyleSheet.create({
     borderTopColor: "#dce1ea",
     borderTopWidth: 2,
     marginRight: 20
+  },
+  platformTouchable: {
+    marginBottom: 5
   }
 })