Scribd
Upload
65 views

Dsdsdsdsds

This React Native code defines an App component that renders an image background with buttons overlaid. It imports React Native components like View, Image, and TouchableOpacity. The render method returns a main container view holding the image background, with text and buttons placed on top and at the bottom of the image. Styles are defined to layout and style the various components.

Uploaded by

Alexandru Baciu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
65 views

Dsdsdsdsds

This React Native code defines an App component that renders an image background with buttons overlaid. It imports React Native components like View, Image, and TouchableOpacity. The render method returns a main container view holding the image background, with text and buttons placed on top and at the bottom of the image. Styles are defined to layout and style the various components.

Uploaded by

Alexandru Baciu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

import React from "react";

import {
StyleSheet,
Text,
View,
Button,
TextInput,
SafeAreaView,
StatusBar,
TouchableOpacity,
ImageBackground,
Image,
} from "react-native";

/*const buttonbutton = ({text}) => {


return (
<TouchableOpacity style={styles.button}>
<Text style={styles.text}>{text}</Text>
</TouchableOpacity>
);
};*/

const image = {
uri:
"https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-
simple-atmosphere-blue-national-fitness-day-background-backgroundatmospheric-
backgroundblue-backgroundall-image_88134.jpg",
};

export default class App extends React.Component {


state = {};
render() {
return (

<View style={styles.containerMain}>
<ImageBackground source={image} style={styles.image}>
<Text style={styles.logo}>Stay Fit!</Text>

<View style={styles.containerMain}>
<TouchableOpacity style={styles.altbutton}>
<Image source={require("./assets/2.png")}/>
</TouchableOpacity>
</View>
<View style={styles.bottomView}>
<TouchableOpacity style={styles.butoanejos1}>
<Text style={styles.textjos}>Last Days Report</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.butoanejos}>
<Text style={styles.textjos}>Achievments</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>

/*<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1"/>
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2"/>
</View>

<Text style={styles.logo}>Stay Fit!</Text>


<TouchableOpacity style={styles.butoanejos}>
<Text style={styles.textjos}>Last Days Report</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.butoanejos}>
<Text style={styles.textjos}>Achievments</Text>
</TouchableOpacity>

<View style={styles.container}>
<View style={styles.button} />
<View style={styles.button} />
</View>

</View>*/
);
}
}

const styles = StyleSheet.create({


buttonContainer: {
flexdirection: "row",
flex: 1,
},

image: {
flex: 1,
//resizeMode: "cover",
justifyContent: "center",
},

containerMain: {
flex: 1,
//alignItems: 'center',
//justifyContent: 'center',
},
bottomView: {
flex: 1,
flexdirection: "row",
width: "100%",
height: 50,
backgroundColor: "lightblue",
justifyContent: "space-between",

position: "absolute",
bottom: 0,
},
textStyle: {
color: "#fff",
fontSize: 18,
},

altbutton: {
backgroundColor: '#859a9b',
borderRadius: 20,
padding: 10,
marginBottom: 20,
shadowColor: '#303838',
shadowOffset: { width: 0, height: 5 },
shadowRadius: 10,
shadowOpacity: 0.35,
},

container: {
flex: 1,
flexDirection: "row",
backgroundColor: "#003f5c",
alignItems: "center",
justifyContent: "center",
},
parent: {
flex: 1,
flexDirection: "row",
justifyContent: "space-around",
},
/*container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}*/ button: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "gr#003f5ceen",
width: "40%",
height: 40,
bottom: "0",
},
logo: {
//allign: "center",
upper: "0",
fontWeight: "bold",
fontSize: 50,
color: "#fb5b5a",
marginBottom: 0,
justifyContent:"center"
},
forgot: {
color: "white",
fontSize: 11,
},
butoanejos: {
right: 15,
flexDirection: "row",
flex: 1,
marginHorizontal: 20,
marginTop: 5,
position: "absolute",
position: "absolute",
bottom: "0",
width: "20%",
backgroundColor: "#fb5b5a",
borderRadius: 25,
height: 25,
alignItems: "center",
justifyContent: "center",
marginTop: 20,
marginBottom: 10,
},

butoanejos1: {
flexDirection: "row",
flex: 1,
marginHorizontal: 20,
marginTop: 5,
position: "absolute",
position: "absolute",
bottom: "0",
width: "20%",
backgroundColor: "#fb5b5a",
borderRadius: 25,
height: 25,
alignItems: "center",
justifyContent: "center",
marginTop: 20,
marginBottom: 10,
},

containerLogo: {
flex: 1,
padding: 26,
backgroundColor: "white",
justifyContent: "flex-start",
},

textjos: {
color: "white",
},
});

You might also like