Jpe#header transparente

src/Components/About/aboutHeader.js

@@ -34,8 +34,8 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff",
     marginBottom: 15,
     marginTop: 15,
-    marginLeft: 15,
     marginRight: 10,
+    paddingLeft: 15,
     flexDirection: "row"
   },
   backButton: {
@@ -44,11 +44,11 @@ const styles = StyleSheet.create({
   languagesInfo: {
     flex: 1,
     fontSize: 22,
-    textAlign: "center",
+    textAlign: "left",
     backgroundColor: "#fff",
     marginLeft: 20,
     paddingRight: 20
   }
 })
 
-export default aboutHeader
+export default aboutHeader

src/Components/Languages/languagesHeader.js

@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff",
     marginBottom: 15,
     marginTop: 15,
-    marginLeft: 15,
+    paddingLeft: 15,
     marginRight: 10,
     flexDirection: "row"
   },
@@ -44,7 +44,7 @@ const styles = StyleSheet.create({
   languagesInfo: {
     flex: 1,
     fontSize: 22,
-    textAlign: "center",
+    textAlign: "left",
     backgroundColor: "#fff",
     marginLeft: 20,
     paddingRight: 20

src/Components/PreviewImage/previewImageHeader.js

@@ -0,0 +1,59 @@
+import React from "react"
+
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  StatusBar
+} from "react-native"
+import { Icon } from "react-native-elements"
+
+const previewImageHeader = props => {
+  const { navigation } = props
+  const userName = navigation.getParam("name")
+
+  return (
+    <View style={styles.header}>
+      <StatusBar backgroundColor="#000" barStyle="light-content" />
+      <View style={styles.headerContent}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack()
+          }}
+          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+        >
+          <Icon name="ios-arrow-back" color="#fff" type="ionicon" />
+        </TouchableOpacity>
+        <Text style={styles.previewImageInfo}>{userName}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: "#000",
+    elevation: 5,
+    marginTop: 0,
+    fontFamily: "OpenSans"
+  },
+  headerContent: {
+    backgroundColor: "#000",
+    marginBottom: 15,
+    marginTop: 15,
+    marginRight: 10,
+    paddingLeft: 15,
+    flexDirection: "row"
+  },
+  previewImageInfo: {
+    flex: 1,
+    fontSize: 22,
+    textAlign: "left",
+    color: "#fff",
+    backgroundColor: "#000",
+    marginLeft: 20
+  }
+})
+
+export default previewImageHeader

src/Screens/EditPerfil/editperfil.js

@@ -194,6 +194,7 @@ export default class Conversas extends Component {
             <TouchableOpacity
               style={styles.back}
               onPress={this.handleBackPress}
+              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
             >
               <Icon name="ios-arrow-back" color="#00aced" type="ionicon" />
             </TouchableOpacity>
@@ -338,16 +339,17 @@ const styles = StyleSheet.create({
   headerContent: {
     justifyContent: "space-between",
     alignContent: "center",
-    marginBottom: 10,
-    marginLeft: 10,
-    marginTop: 10,
+    marginBottom: 15,
+    marginTop: 15,
     marginRight: 10,
+    paddingLeft: 15,
     flexDirection: "row"
   },
   perfilInfo: {
     flex: 1,
     fontSize: 22,
-    textAlign: "center"
+    textAlign: "left",
+    marginLeft: 20
   },
   editImage: {
     justifyContent: "center",

src/Screens/PreviewImage/previewImg.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 
 import { View, StyleSheet, Image, BackHandler } from "react-native"
+import PreviewImageHeader from "~/Components/PreviewImage/previewImageHeader"
 
 export default class PerfilSettings extends Component {
   static navigationOptions = ({ navigation }) => {
@@ -36,17 +37,27 @@ export default class PerfilSettings extends Component {
     } else {
       image = <Image source={img} style={styles.img} resizeMode="contain" />
     }
-    return <View style={styles.container}>{image}</View>
+    return (
+      <View style={styles.container}>
+        <PreviewImageHeader
+          navigation={navigation}
+          style={styles.previewImage}
+        />
+        {image}
+      </View>
+    )
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "black",
-    alignItems: "center",
     justifyContent: "center"
   },
+  previewImage: {
+    flex: 1
+  },
   img: {
     flex: 1,
     width: "100%"

src/routes.js

@@ -92,7 +92,10 @@ const HomeStackNavigator = createStackNavigator(
       }
     },
     PreviewImage: {
-      screen: PreviewImage
+      screen: PreviewImage,
+      navigationOptions: {
+        header: null
+      }
     },
 
     LanguagesScreen: {
@@ -148,7 +151,10 @@ const authStackNavigator = createStackNavigator(
       }
     },
     PreviewImage: {
-      screen: PreviewImage
+      screen: PreviewImage,
+      navigationOptions: {
+        header: null
+      }
     },
     VerificationScreen: {
       screen: Verification,