Reat Native - position absolute not show on top of View - react-native

I use React Native 0.55, and I want to display a kind of icon on top of a , like this : http://b3.ms/qpknagGre9BR
For now, I use this :
<View style={styles.cardContainer}>
<Image source={iconPlayers} style={styles.iconTop} />
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
</View>
And my styles :
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
zIndex: 999,
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
It's crazy because now it works, but I have a problem, I can't put elevation: 4 on styles for an <Image /> element, I have a Warning.
If I remove the elevation: 4, of my styles, the image is shown behind the cardBox.
How can I achieve what I want without any warning ... ? Thanks.
** EDIT **
I wrapper the <Image /> in a <View />, and I put elevation property to the wrapper, and it works.
I thought elevation was for boxShadow for android, but it impacts the zIndex.

I am trying your code in snack expo, which uses the latest react-native version (55.4). There is no warning in applying elevation to Image property, it just works fine and the image is also above the card. If your react-native version gives warning just wrap it in a View and apply elevation to that View. Also, remember zIndex gets affected by your Views elevation (only Android). Since you have applied elevation: 4 to card box, you must give elevation >= 4 for your Image component else it will draw beneath the card box.
snack example: https://snack.expo.io/B14UPA9Bm
You can also avoid Zindex by changing the order of components,
// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
<Image source={iconPlayers} style={styles.iconTop} />
</View>
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
//zIndex: 999, not required now
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
Check and tell if it works in Android and iOS. thanks

Related

Underline behind text React Native

I want to make a specific underline behind text in a specific area of the title, like this:
How do I do it with React Native?
This is the situation right now:
<View style={[styles.container, {width}]}>
<Image source={item.image} style={[styles.image, {width, resizeMode: 'contain'}]}/>
<View style={{flex: 0.2}}>
<Text style={[styles.title]}>{item.title}</Text>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
image: {
flex: 0.6,
justifyContent:'center'
},
title: {
fontWeight: "600",
fontSize: "26",
color: 'black',
textAlign: 'center',
}
})
I've seen this thread with css Thick underline behind text
You have to position the title absolute to achieve that.
In the following code, I have implemented an example I hope it will help you.
<View style={{marginTop: 20, height: 200, position: 'relative'}}>
<View style={styles.line}></View>
<Text style={styles.title}>Specific Title</Text>
</View>
const styles = StyleSheet.create({
title: {
fontSize: 44,
fontWeight: '500',
lineHeight: 45,
position: 'absolute',
top: 20,
},
line: {
marginTop: 40,
marginLeft: 50,
borderRadius: 10,
height: 15,
width: 100,
backgroundColor: '#3F8ED6',
},
})
result

React native margin: 'auto' working on web but not on device

I am building an application which uses react native on expo dev. I am trying to add a button in the top left corner which is adjacent to some text o the right hand side, I have used marginRight: 'auto' for this and it does display as expected on the web version but on the app version on Android it appears centered as if the margin styling is ignored, any solutions?
<View style={styles.header}>
<View style={styles.headerTop}>
<Text style={styles.headerText}>Question {currentQuestion+1}/{questions.length}</Text>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style= {styles.exitButton}
>
<Text style={styles.buttonText}>Exit</Text>
</TouchableOpacity>
</View>
<Text style={styles.timer}>{timer}</Text>
</View>
header: {
flexGrow: 0,
padding: 8,
},
headerTop: {
flexDirection: 'row-reverse',
},
headerText: {
fontSize: 24,
textAlign: 'right',
},
exitButton: {
padding: 12,
paddingHorizontal: 12,
backgroundColor: '#1BA7F9',
borderRadius: 12,
marginRight: 'auto',
},
buttonText: {
fontSize: 20,
}
You have specified 'row-reverse' for header-top
headerTop: {
flexDirection: 'row-reverse',
},
So, instead of marginRight: 'auto', try using marginLeft: 'auto',
exitButton: {
padding: 12,
paddingHorizontal: 12,
backgroundColor: '#1BA7F9',
borderRadius: 12,
marginLeft: 'auto',
},
This should fix the issue. I tried it in the emulator and works fine. Attaching the screenshot.

Text element has right padding when text wraps

I have a simple <Text> element in my react-native application and I can't figure out what's going on with this behavior.
When I provide a longer string and the <Text> element wraps the text, it seems to be adding a bunch of padding to the right side of the view.
Note: I've made the <Text> element have a red background just so it's easier to see what's going on in this image.
The left button has the wrapped text, the right button does not. Only when the text wraps do I see the strange padding.
Note that I'm using flexShrink: 1 so that my icon doesn't get stomped out by the text element.
<View style={styles.buttonContainer}>
<View style={styles.buttonContent}>
<Grid fill={'#fff'} style={[styles.buttonIcon, {marginRight: 6}]} />
<Text style={styles.buttonText}>
Something Longer Here
</Text>
</View>
</View>
const styles = StyleSheet.create({
buttonContainer: {
justifyContent: 'center',
paddingVertical: 14,
paddingHorizontal: 12,
borderRadius: 16,
backgroundColor: '#27292d',
opacity: 0.90,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1},
shadowOpacity: 0.8,
shadowRadius: 1,
elevation: 5
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
buttonIcon: {
width: 16,
height: 16,
flexShrink: 1
},
buttonText: {
color: 'white',
fontSize: 14,
lineHeight: 16,
backgroundColor: '#ff0000',
fontFamily: 'GeezaPro',
flexShrink: 1
}
});
Update
I've put together this small example to demonstrate the problem.
https://snack.expo.dev/72_24tf4O
When run on the web it looks like this:
But when run on android, it looks like this:

How to prevent the style of the annotation point from appearing to be lost, it turns completely black?

I am using the react-native-mapbox-gl library and I am showing some points on a map. Each has its own callout to display additional information when the respective point is pressed.
I have found the docs/Callout.md and Callout.js source and and example using it in example/src/examples/ShowPointAnnotation.js. This was a great help, thank you so much for the example... I might though doing something really wrong and I have spent days already on this...
My issue is that when I press one annotation, the styling of the annotations appears to be lost (they go all black). Similarity, the styling for the callouts don't seem to be applied. They all black, too. I have shared code and screenshots bellow.
<MapboxGL.PointAnnotation
key={id}
id={id}
coordinate={coordinate}
title={title}
onSelected={feature => {
debugger
this.onAnnotationSelected(i, feature)
}}
onDeselected={this.onAnnotationDeselected}
>
<View
style={[
styles.annotationContainer,
{
backgroundColor: bgColour,
borderRadius: ANNOTATION_SIZE / 2,
borderWidth: StyleSheet.hairlineWidth,
borderColor: borderColor
}
]}
>
<Text style={[styles.annotationFill, { color: borderColor }]}>
{studio.id}
</Text>
</View>
<MapboxGL.Callout
style={[
styles.calloutContainer,
{ backgroundColor: bgColour, borderColor: borderColor }
]}
title={title}
>
<View
style={[
styles.calloutContent,
{
backgroundColor: bgColour,
borderColor: borderColor
}
]}
>
<Text style={[styles.annotationFill, { color: borderColor }]}>
{title}
</Text>
</View>
<View
style={[
styles.tip,
styles.calloutContent,
{
backgroundColor: bgColour,
borderColor: borderColor
}
]}
/>
</MapboxGL.Callout>
</MapboxGL.PointAnnotation>
And stylings
const ANNOTATION_SIZE = 32
const styles = StyleSheet.create({
annotationContainer: {
width: ANNOTATION_SIZE,
height: ANNOTATION_SIZE,
alignItems: 'center',
justifyContent: 'center'
},
annotationFill: {
color: 'black'
},
container: {
flex: 1
},
calloutContainer: {
alignItems: 'center',
justifyContent: 'center',
width: 180,
zIndex: 9999999
},
calloutContent: {
flex: 1,
position: 'relative',
padding: 8,
borderRadius: 3,
borderWidth: 1
},
calloutTitle: {
width: ANNOTATION_SIZE,
height: ANNOTATION_SIZE,
color: 'black',
textAlign: 'center'
},
calloutTip: {
zIndex: 1000,
marginTop: -2,
elevation: 0,
backgroundColor: 'transparent',
borderTopWidth: 16,
borderRightWidth: 8,
borderBottomWidth: 0,
borderLeftWidth: 8,
borderTopColor: 'white',
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: 'transparent'
}
})
I am concerned though as well that I should not be using PointAnnotation, as it is marked to be deprecated. Is there an alternative way to achieve the same? Could someone point me into right direction? I am happy to contribute too if needed.

Flex Layout with React Native

I'm having an issue where my container is collapsing on my child components which consists of a list of 4 images and one icon at the end of the container in a row. If I set the height explicitly then I can make it large enough to fit the content for one device. However, I have the images resizing themselves right now based off of width of the phone and a percent and then scaling to conserve aspect ratio. Is there a way to make my container grow just large enough to ensure it fits its child components when its child components scale based off of device width?
I thought that React Native flex default was to do this but for whatever reason my container is not fitting the images inside it but instead shrinking and all inside content is shrinking down except the images which lay over the top of my now shrunk containers.
export default function BadgeQuickView() {
return (
<View style={styles.badgeViewContainer}>
<View style={styles.badgeContainerTop}>
<View style={styles.badgeContainerLeftBorder}></View>
<Text style={styles.badgeContainerTitle}>FEATURED BADGES</Text>
<View style={styles.badgeContainerRightBorder}></View>
</View>
<View style={styles.quickBadgeList}>
{TEST_BADGE_ARRAY.map(option => (
<View style={styles.badgeInfoContainer} key={option.id}>
<Image style={styles.badgeImage} source={{uri: option.url}} fadeDuration={0} />
<Text style={styles.badgeDescText}>{option.name}</Text>
</View>
))}
<View style={styles.moreBadgesButtonContainer}>
<TouchableOpacity style={styles.moreBadgesButton}>
<Text style={styles.moreBadgesText}>All {`\n`} Badges</Text>
<Entypo name={'dots-three-horizontal'} size={moderateScale(20)} color={profileColors.editProfileText}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
badgeViewContainer: {
width: '100%',
height: moderateScale(130),
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderBottomWidth: 2,
backgroundColor: 'white',
paddingBottom: 5
},
moreBadgesText: {
color: 'black',
fontFamily: 'montserrat',
fontSize: moderateScale(8),
textAlign: 'center',
color: profileColors.editProfileText,
textAlign: 'center',
},
badgeDescText: {
color: 'black',
fontFamily: 'montserrat',
fontSize: moderateScale(8),
textAlign: 'center',
color: profileColors.editProfileText,
textAlign: 'center',
},
quickBadgeList: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingLeft: 15,
},
badgeImage: {
aspectRatio: 1,
width: '100%',
height: undefined,
resizeMode: 'contain',
marginBottom: 10,
},
moreBadgesButton: {
height: '100%',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center'
},
moreBadgesButtonContainer: {
height: '100%',
width: '15%',
},
badgeInfoContainer: {
height: '100%',
width: '20%',
flexDirection: 'column',
padding: 5,
},
badgeContainerTop: {
flexDirection: 'row',
alignItems: 'center',
},
badgeContainerLeftBorder: {
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderTopWidth: 2,
width: '5%',
bottom: moderateScale(13) / 2,
},
badgeContainerTitle: {
fontFamily: 'montserrat-bold',
color: profileColors.editProfileText,
marginHorizontal: 10,
fontSize: moderateScale(13),
bottom: moderateScale(13) /2,
},
badgeContainerRightBorder: {
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderTopWidth: 2,
width: '100%',
bottom: moderateScale(13) / 2,
},
});
** Edit: Added current working code for reference. moderateScale(...) is just taking the screenHeight and scaling the height and working for most devices that I have tested thus far. I would like to not have to set this explicitly though if possible and instead have it expand based on its content.
Below is the desired and undesired looks. When I comment out the height: from the view container and set it to flex it won't expand to fit its content. When real images are added in the images show over the top of the bottom border and the text is not visible at all that will show under the red box typically. Added the red just as an indicator of where the image and text renders.