Related
I have some react-native code, where I have a pop-up modal. I created it using flex, but for some reason the text will not vertically align. I solved it using top = 30%, but then my touchable opacities(surrounding the texts) do not span all of the free space available. And I feel this is a hacky solution.
Curious if there is a better one, to automatically align the text vertically and make sure the touchable opacities take up the free space available to them?
Below is my code:
<Modal
isVisible={confirmationVisible}
onBackdropPress={() => toggleConfirmation()}
style={styles.confirmationModal}
>
<Text style={styles.confirmationTitle}>Would you like to add a beacon to {assetName}?</Text>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
<Text style={styles.confirmationText}>No, I'm done</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconExistingScreen")}>
<Text style={styles.confirmationText}>Yes, an existing Beacon</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconScreen")}>
<Text style={styles.confirmationText}>Yes, a new Beacon</Text>
</TouchableOpacity>
</Modal>
Below is my styling:
confirmationModal: {
flex: 0.3,
width: "60%",
alignItems: "center",
justifyContent: "space-evenly",
backgroundColor: "white",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
borderRadius: 8
},
confirmationTitle: {
fontWeight: "bold",
textAlign: "center",
margin: 5,
paddingLeft: 20,
paddingRight: 20
},
confirmationContainer: {
borderTopColor: "lightgrey",
borderTopWidth: 1,
width: "100%"
},
confirmationText: {
textAlign: "center",
color: COLORS.purple
},
Edit:
using this modal if curious
Also, have tried justifyContent on confirmationContainer but it does not work, unsure why
Edit2:
Got the solution. Seems flex is scaling the height and width had to be set manually for my text element. Removing the justifyContent and alignItems from a parent container, I was able to use textAlignVertical for my title and scale titleContainer vs touchableContainers with flex 2 and flex 1 respectively. Not sure what is going on, but the touchable now scales the whole free space and the text is aligned vertically...used AnthonyDev220's solution and reworked it so marked him as best answer, updated styles jsx did not change:
confirmationModal: {
flex: 0.3,
width: "60%",
backgroundColor: "white",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
borderRadius: 8
},
confirmationTitle: {
fontWeight: "bold",
textAlign: "center",
textAlignVertical: "center",
flex: 2,
paddingLeft: 20,
paddingRight: 20
},
confirmationContainer: {
borderTopColor: "lightgrey",
borderTopWidth: 1,
flex: 1,
width: "100%"
},
confirmationText: {
marginTop: "auto",
marginBottom: "auto",
textAlign: "center",
color: COLORS.purple
},
You could try adding textAlignVertical: "center" to your confirmationText
or
Try wrapping your component inside a component and then style your componenet.
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={styles.confirmationText}>No, I'm done</Text>
</TouchableOpacity>
</View>
same for your other two <Text> components.
confirmationContainer: {
display: flex,
justifyContent: center,
alignItems:center,
borderTopColor: "lightgrey",
borderTopWidth: 1,
width: "100%"
}
I have a screen where I want to place the first, main text item (Filter)in the exact middle of the screen while the second item (All Delete) should be at the right end. Both of them should be in the same line.
I would prefer not to use padding/margins since they can vary in different phone sizes. I am already using text-align but it doesn't work for me.
export default function App() {
return (
<View style={styles.container}>
<View style={styles.topTextContainer}>
<Text style={styles.filterText}>Filter</Text>
<Text style={styles.deleteAllText}>All Delete</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
marginLeft: moderateScale(75),
},
});
Codesandbox: https://snack.expo.io/#nhammad/frowning-bagel
You can use a absolute position for the delete button and set right:0 like below.
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: 'absolute',
right: 0
}
The other option is to use marginLeft:'auto' for the both the texts which can help but wont keep the first one in center.
With exact milld do you mean in the middle of the screen width and height like this:
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: "100%"
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: "absolute",
right: 0
//marginLeft: moderateScale(75),
},
});
If yes, you should set the height: "100%"
if you want to have it on the top middle than this should be the right approach:
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: "absolute",
right: 0
//marginLeft: moderateScale(75),
},
});
setting deleteAllText position: absolute and right: 0
I am trying to drawing circle shape view for textview inside that some text.
It is working with Android, But, iOS not working properly. Text is coming top of the view.
<Text style={styles.na}> NA </Text>
styles
na: {
width: 60,
height: 60,
borderRadius: 60 / 2,
backgroundColor: 'orange',
alignItems: 'center',
textAlign: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
textAlignVertical: 'center',
marginRight: 10,
overflow: 'hidden',
},
Any suggestions?
try this code, works for me
<View style={{
width: 60,
height: 60,
justifyContent: "center",
borderRadius: 60 / 2,
backgroundColor: 'orange',
}}>
<Text style={{
alignSelf: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
}}>NA</Text>
</View>
try alignSelf : center
alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.
Reference
I have a blue header which i want to take part of that on another view with an animate event. but before i execute animate function i set the zIndexes manually and knew it doesn't work at all!! means nothing will change when i give 1 or 100 or other value to zIndex property of my components :(
<View style={{ flex: 1 }}>
<Animated.View style={{
position: 'absolute',
top: 0,
left: 0, right: 0,
backgroundColor: 'lightskyblue',
height: headerHight,
zIndex: 1,//Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
alignItems: 'center',
}}>
<Animated.View style={{ position: 'absolute', top: titleTop }}>
<Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
</Animated.View>
</Animated.View>
<ScrollView style={{ flex: 1 }}
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
)}>
<Animated.View style={{
height: profileImageHight,
width: profileImageHight,
borderRadius: PROFILE_IMAGE_MAX_HIGHT / 2,
borderColor: 'white',
borderWidth: 3,
overflow: 'hidden',
marginTop: profileImageMarginTop,
zIndex:0, //Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
marginLeft: 10,
}}>
<Image source={require('./assets/avatar.jpg')} style={{ flex: 1, width: null, height: null}} />
</Animated.View>
<Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
<View style={{ height: 1000 }}></View>
</ScrollView>
</View>
like you see above: there are two components which has zIndex. so taking one which has zIndex:1 on the other is expected but there is no change bout them in run time.
Try elevation with zIndex and absolute position.
Apply below style on component which you want to show on front layer
style={{ position: 'absolute', elevation: 100,zIndex:100, //other style }}
Let me know if still facing issue
Try using elevation, that might help you to differentiate between the views.
I am using an image as the background for one of my pages. I'd like to add a backgroundColor with an opacity over the image. I'm not sure how I can achieve this with React Native.
render() {
return (
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
<Text>Hello</Text>
</Image>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
}
Here is how I'd achieve this on a web page: How to make in CSS an overlay over an image?
A cool thing you can do is drop an absolutely positioned view over it.
<View>
<Image source={require('./assets/climbing_mountain.jpeg')} style= {StyleSheet.absoluteFillObject}} resizeMode='cover'>
<Text>Hello</Text>
</Image>
<View style={styles.overlay} />
</View>
...
const styles = StyleSheet.create({
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)'
}
})
absoluteFillObject is the same as
{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
If you want to be able to tap through your overlay, just set the pointerEvents prop on the view to none
docs: https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject
I was able to get this working thanks to #Kevin Velasco.
render() {
return (
<View style={styles.container}>
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
</Image>
<View style={styles.overlay} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
},
imageContainer: {
flex: 1,
width: null,
height: null,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(69,85,117,0.7)',
}
})
Here I use to solve my project, thansk to all:
<View>
<View
style = {{
//make overlay
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
//change this color to the other one which you want
backgroundColor: 'green',
}}
/>
<Image
source = {{ uri: Your-Image-Here }}
style = {{ height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 }}
/>
</View>
Make an overlay on react native image background: If you want to make an overlay on the background image ONLY in react native and not affect other elements that are inside the < ImageBackground> tag, do this:
//Fetching the background image from online, you can use any image source of your choice.
const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };
// Setting the background image for the view:
<View style={styles.GoProBox}>
<ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
<View style={styles.overlayView}/>
<Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
<GoProButton />
</ImageBackground>
//Stylesheet
const styles = StyleSheet.create({
GoProBox: {
width: '95%',
height: 200,
margin: 5,
backgroundColor: '#00cc00',
borderRadius: 10,
alignSelf: 'center',
overflow: 'hidden'
},
goProBgImage: {
width: '100%', height: '100%',
},
goProText: {
textAlign: 'center',
fontSize: 20,
marginTop: 10,
fontWeight: 'bold',
padding: 10,
color: 'white'
},
GoProButton: {
height: 60,
width: 200,
backgroundColor: 'red',
borderRadius: 15,
alignSelf: 'center',
justifyContent: 'center',
top: 50
},
overlayView: {
height: "100%",
width: "100%",
position: 'absolute',
backgroundColor: 'rgba(0, 204, 0, 0.5)',
}
})
this is how i dit it to get it work for me
const visaCard = require('../Images/card_visa.png');
const [iscardBloqued, setIsCardBolqued] = useState(false);
const [hideInfos, setHideInfos] = useState(true);
Here is How the component looks like
<View style={styles.imageContainer}>
<ImageBackground
source={visaCard}
imageStyle={{ borderRadius: wp(3) }}
style={styles.imageStyle}
resizeMode="cover"
>
{hideInfos && (
<TouchableOpacity activeOpacity={0.8} style={styles.cardWhiteButton}>
<FText style={styles.whiteButtonText}>Afficher les infos</FText>
</TouchableOpacity>
)}
{iscardBloqued && (
<View style={styles.overlay}>
<TouchableOpacity
activeOpacity={0.7}
style={{ alignItems: 'center' }}
>
<Lock />
<FText style={styles.overlayText}>Carte bloqueé</FText>
</TouchableOpacity>
</View>
)}
</ImageBackground>
</View>
And her is my Style page: "i prefered to separate it from my component"
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
alignSelf: 'center',
marginTop: hp(3),
},
imageStyle: {
height: hp(25),
width: wp(85),
},
cardWhiteButton: {
marginHorizontal: wp(8),
backgroundColor: 'white',
marginTop: hp(17),
height: hp(5),
width: wp(32),
alignItems: 'center',
justifyContent: 'center',
borderRadius: wp(5),
},
whiteButtonText: {
fontSize: hp(1.4),
color: 'white',
fontFamily: 'Roboto',
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.89)',
justifyContent: 'center',
alignItems: 'center',
borderRadius: wp(3),
},
overlayText: {
color: 'white',
fontSize: hp(1.6),
fontFamily: 'Roboto',
marginTop: hp(2),
},
});