56 lines
1.1 KiB
JavaScript
56 lines
1.1 KiB
JavaScript
|
import React from "react";
|
||
|
|
import {
|
||
|
|
View,
|
||
|
|
ImageBackground,
|
||
|
|
Text,
|
||
|
|
TouchableOpacity,
|
||
|
|
StyleSheet,
|
||
|
|
} from "react-native";
|
||
|
|
import EntypoIcon from "react-native-vector-icons/Entypo";
|
||
|
|
|
||
|
|
|
||
|
|
function ImageHeader(props) {
|
||
|
|
return (
|
||
|
|
<View style={imageHeaderStyles.container}>
|
||
|
|
<ImageBackground
|
||
|
|
source={props.image}
|
||
|
|
resizeMode="cover"
|
||
|
|
style={{ flex: 1 }}
|
||
|
|
>
|
||
|
|
<View style={imageHeaderStyles.row}>
|
||
|
|
<TouchableOpacity onPress={() => props.navigation.goBack()}>
|
||
|
|
<EntypoIcon name="chevron-left" style={imageHeaderStyles.icon}></EntypoIcon>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={imageHeaderStyles.text}>{props.text}</Text>
|
||
|
|
</View>
|
||
|
|
</ImageBackground>
|
||
|
|
</View >
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const imageHeaderStyles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
minHeight: 175,
|
||
|
|
maxHeight: 175,
|
||
|
|
height: 175,
|
||
|
|
width: "100%",
|
||
|
|
},
|
||
|
|
row: {
|
||
|
|
paddingTop: 30,
|
||
|
|
flexDirection: "row",
|
||
|
|
},
|
||
|
|
icon: {
|
||
|
|
color: "white",
|
||
|
|
fontSize: 40,
|
||
|
|
paddingRight: 10,
|
||
|
|
paddingLeft: 10,
|
||
|
|
},
|
||
|
|
text: {
|
||
|
|
color: "white",
|
||
|
|
fontSize: 30,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default ImageHeader;
|