I have created a component VeiwImageScreen and i imported in App.js I want this picture in mid of the screen that the two div above it can clearly be seen I have given width 80% its working height do not
I want to decrease its height and align it in center I have given align-items center but due to height it not coming in middle here is my code
<View style={styles.Container}>
<View style={styles.closeIcon}></View>
<View style={styles.deleteIcon}></View>
<View></View>
<Image
style={styles.VeiwImage}
source={require("../assets/horror-background.jpg")}
/>
</View>
this is my styling I want this picture in mid of the screen I have given width 80% and height 80%
const styles = StyleSheet.create({
Container: {
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
},
VeiwImage: {
flex: 1,
width: "80%",
height: 10,
},
closeIcon: {
width: 50,
height: 50,
backgroundColor: colors.red,
position: "absolute",
zIndex: 1,
top: 20,
left: 20,
},
deleteIcon: {
zIndex: 1,
width: 50,
height: 50,
backgroundColor: colors.black,
position: "absolute",
top: 20,
right: 20,
},
});
Remove flex:1 from VeiwImage and add it to container
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
},
VeiwImage: {
width: "80%",
height: 10,
},
closeIcon: {
width: 50,
height: 50,
backgroundColor: colors.red,
position: "absolute",
zIndex: 1,
top: 20,
left: 20,
},
deleteIcon: {
zIndex: 1,
width: 50,
height: 50,
backgroundColor: colors.black,
position: "absolute",
top: 20,
right: 20,
},
});
Related
import React from "react";
import { StyleSheet,Text,Image,TextInput,TouchableOpacity, View, Dimensions } from 'react-native';
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
export default function login() {
return (
<View style={styles.container}>
<Image source={require('../components/assets/login/logo.jpg')} style={styles.logo} />
<TextInput style={styles.ButtonEmail} placeholder='Email' />
<TextInput style={styles.ButtonPassword} placeholder='Password'/>
<View style={styles.forgotContainer}>
<TouchableOpacity>
<Text style={styles.forgotText}>Esqueceu-se da senha?</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.ButtonLogin}>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
<View style={styles.divisor}>
<View style={styles.divisorLine}></View>
<Text style={{marginHorizontal: '3%'}}>OU</Text>
<View style={styles.divisorLine}></View>
</View>
<TouchableOpacity style={styles.ButtonGoogle}>
<Text style={styles.GoogleText}>Login com a conta Google</Text>
</TouchableOpacity>
<Image source={require('../components/assets/login/google.jpg')} style={styles.logoGoogle} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
width: 200,
height: 200,
position: 'relative',
top: height*0.17,
},
ButtonEmail: {
position: 'absolute',
top: height*0.35,
height: height*0.08,
width: width*0.85,
borderRadius: 50,
padding: 20,
backgroundColor: '#D6ECF3',
},
ButtonPassword: {
position: 'absolute',
top: height*0.45,
height: height*0.08,
width: width*0.85,
borderRadius: 50,
padding: 20,
backgroundColor: '#D6ECF3',
},
forgotContainer: {
position: 'absolute',
left: width*0.55,
top: height*0.55,
},
forgotText: {
color: '#399fff',
},
ButtonLogin: {
position: 'absolute',
top: height*0.63,
height: height*0.08,
width: width*0.425,
borderRadius: 50,
padding: 20,
backgroundColor: '#399fff',
},
loginText: {
textAlign: 'center',
color: 'white',
},
divisor: {
position: 'absolute',
top: height* 0.75,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
divisorLine: {
width: width*0.3,
height: height*0.005,
borderRadius: 5,
backgroundColor: '#EFEDED',
},
ButtonGoogle: {
position: 'absolute',
top: height*0.8,
height: height*0.08,
width: width*0.77,
borderRadius: 50,
padding: 20,
paddingRight: 50,
backgroundColor: '#399fff',
},
GoogleText: {
textAlign: 'center',
color: 'white',
},
logoGoogle: {
position: 'absolute',
top: height*0.82,
left: width* 0.72,
height: 30,
width: 28,
}
});
I'm creating a list with ScrollView and trying to use touchable opacity on all of the rendered items. There is only 6 items in the list but I can only get touchableOpacity to work on the last 2 items.
I'm using touchableOpacity in a components folder and then importing it into a ScrollView on another screen. Any idea what I'm doing wrong or how I can fix the issue?
component code below
const FlatBench = (props) => {
return (
<View>
<ImageBackground
style={Styles.secondaryImages}
source={require("../assets/images/FlatBenchPress.png")}
>
<TouchableOpacity style={Styles.textContainer}>
<Text style={Styles.text}>Flat Bench</Text>
</TouchableOpacity>
</ImageBackground>
</View>
);
};
const Styles = StyleSheet.create({
secondaryImages: {
width: "90%",
height: "80%",
marginTop: 200,
shadowColor: "black",
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
},
textContainer: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "black",
},
text: {
color: "#F5EDED",
fontSize: 20,
textAlign: "center",
},
});`
Screen ScrollView Code Below
const StatsScreen = (props) => {
return (
<View style={Styles.container}>
<View style={Styles.head}>
<BodyPartsImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Body Parts" />
</View>
</View>
<ScrollView style={Styles.scrollContainer}>
<View style={Styles.bottom}>
<View style={Styles.topItem}>
<TouchableOpacity>
<FlatBench />
</TouchableOpacity>
</View>
<View style={Styles.topItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
</View>
</ScrollView>
</View>
);
};
const Styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: {},
top: {
flex: 1,
height: "1%",
alignItems: "center",
justifyContent: "center",
},
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
marginTop: -100,
},
bottomItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
marginTop: -30,
},
buttonA: {
marginTop: -70,
marginLeft: "12%",
borderWidth: 5,
borderColor: "#d72323",
alignItems: "center",
justifyContent: "center",
width: 120,
height: 40,
backgroundColor: "#00000000",
borderRadius: 10,
},
head: {
paddingBottom: -100,
},
});
You need to refactor your spacings and find a better combination:
you have fixed height for every FlatBench but you are putting them in a fluid height container and doing negative margins.
So the FlatBench height and its (very big) margin are covering each other.
If you remove the following lines you can achieve your layout with positive margins on (bottom, bottomItem, topItem)
FlatBench style fix:
secondaryImages: {
// width: '90%',
// height: '80%',
// marginTop: 200,
shadowColor: 'black',
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
}
StatsScreen styles fix:
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
// marginTop: -100,
},
bottomItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
// marginTop: -30,
}
I have this problem and I have not been able to solve it, how can I make view 1 limited by view 2?
I need view 1 not to leave the edges of view 2, the image is on the outside, it should be cropped limited by view 2, I don't know if I make myself understood
<View style={styles.container}>
<View style={styles.progressBar}>
<Animated.View style={[styles.absoluteFill, { borderRadius: 30, backgroundColor: colors.blue2, width }]} />
</View>
<Text style={styles.progressText}>
{`${progress}%`}
</Text>
</View>
const styles = StyleSheet.create({
absoluteFill: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
progressText: {
position: 'absolute',
color: colors.white,
fontFamily: "OpenSans-Regular"
},
container: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: 30,
borderRadius: 30,
},
progressBar: {
//alignSelf: 'baseline',
height: 30,
width: '100%',
backgroundColor: colors.blue3,
borderRadius: 30
}
})
thank you
You need to add an overflow: hidden at your progressBar style.
progressBar: {
height: 30,
width: '100%',
overflow: 'hidden',
backgroundColor: colors.blue3,
borderRadius: 30
}
I did this live demo for you:
https://codesandbox.io/s/vibrant-fermi-49ztl?file=/src/App.js
How can I drop shadow for rounded View.
I'm setting borderRadius to a value for round corners. But elevation property makes it square again. And without elevation it won't drop a shadow.
The code I'm using is
<View style={styles.container}>
<View style={styles.box}></View>
</View>
And for styles
const styles = StyleSheet.create({
container: {
padding: 20,
paddingTop: 60,
flex: 1,
backgroundColor: "#efefef",
alignItems: "center",
justifyContent: "flex-start",
flexDirection: "column"
},
box: {
width: "95%",
height: 250,
elevation: 1,
padding: 10,
borderRadius: 10,
shadowOpacity: 0.5,
backgroundColor: "#FFFFFF",
alignItems: "center",
justifyContent: "center"
},
});
You have to set the shadow radius with shadowRadius, example:
const styles = StyleSheet.create({
container: {
elevation: 8,
shadowColor: 'black',
shadowOpacity: 0.3,
shadowOffset: {
width: 2,
height: 2
},
shadowRadius: 5, // <- Radius of the shadow
borderRadius: 5,
padding: 16,
margin: 8,
},
})
Check out the ShadowProps documentation in React Native docs:
https://reactnative.dev/docs/shadow-props
I want to make a button as the below.
Please help me.
Here are two ways to do it:
This one uses skewX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 120,
height: 70,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: -10,
top: -10,
backgroundColor: 'yellow',
borderLeftWidth: 5,
borderLeftColor: 'black',
transform: [{
skewX: '-45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
And here's the other way using rotateX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 100,
height: 150,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: 10,
top: -30,
backgroundColor: 'yellow',
borderLeftWidth: 4,
borderLeftColor: 'black',
transform: [{
rotate: '45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
I prefer the rotation method because the skew will mess with the border width of the diagonal line.