109 lines
2.8 KiB
JavaScript
109 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
StatusBar,
|
|
ImageBackground,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import EntypoIcon from "react-native-vector-icons/Entypo";
|
|
|
|
|
|
function AdditionalOptionsBottomBar(props) {
|
|
return (
|
|
<View style={bottomBarStyles.container}>
|
|
{ props.leftText ?
|
|
<TouchableOpacity onPress={props.onLeftPress} style={bottomBarStyles.button}>
|
|
<Text style={bottomBarStyles.text}>{props.leftText} </Text>
|
|
</TouchableOpacity> : <View></View>
|
|
}
|
|
{props.rightText &&
|
|
<TouchableOpacity onPress={props.onRightPress} style={bottomBarStyles.button}>
|
|
<Text style={bottomBarStyles.text}>{props.rightText}</Text>
|
|
</TouchableOpacity>
|
|
}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const bottomBarStyles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingBottom: 30,
|
|
},
|
|
text: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
},
|
|
button: {
|
|
borderStyle: "dotted"
|
|
}
|
|
})
|
|
|
|
// ---------------------------------------------------------------------------------------------
|
|
|
|
|
|
function SetupView(props) {
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
|
|
<StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.4)" translucent={true} />
|
|
<ImageBackground
|
|
source={require("../assets/pool_sky_background_blurred.jpg")}
|
|
resizeMode="cover"
|
|
style={{ flex: 1 }}
|
|
>
|
|
<View style={setupViewStyles.container}>
|
|
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
|
{props.backButton &&
|
|
<TouchableOpacity onPress={() => props.navigation.goBack()}>
|
|
<EntypoIcon name="chevron-left" style={setupViewStyles.backButton}></EntypoIcon>
|
|
</TouchableOpacity>
|
|
}
|
|
<Text style={setupViewStyles.headerText}>
|
|
{props.headerText}
|
|
</Text>
|
|
</View>
|
|
<View style={{flex: 1, justifyContent: "center"}}>
|
|
{props.children}
|
|
</View>
|
|
<AdditionalOptionsBottomBar leftText={props.lowerLeftButtonText}
|
|
onLeftPress={props.onLowerLeftButtonPress}
|
|
rightText={props.lowerRightButtonText}
|
|
onRightPress={props.onLowerRightButtonPress}>
|
|
</AdditionalOptionsBottomBar>
|
|
</View>
|
|
</ImageBackground>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const setupViewStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: "space-between",
|
|
width: "80%",
|
|
marginLeft: 40,
|
|
marginTop: 60,
|
|
},
|
|
headerText: {
|
|
color: "rgba(255,255,255,1)",
|
|
fontSize: 25,
|
|
},
|
|
subtext: {
|
|
color: "rgba(255,255,255,1)",
|
|
textAlign: "left",
|
|
fontSize: 18,
|
|
lineHeight: 25,
|
|
width: "80%",
|
|
marginBottom: 50,
|
|
},
|
|
backButton: {
|
|
color: "rgba(255,255,255,1)",
|
|
fontSize: 40
|
|
},
|
|
});
|
|
|
|
export default SetupView; |