This code work different on iOS and Android - And I don`t understand why?
I try to make autocomplete, and list of suggestion render inside header component - but should be over header+Content
<View style={{flex: 1}}>
<View style={{
height: 50,
backgroundColor: 'red',
left: 0,
position: 'absolute',
right: 0,
top: 0,
zIndex: 1
}}>
<Text>Header</Text>
<View style={{
backgroundColor: '#3F9',
left: 50,
position: 'absolute',
height: 100,
right: 50,
top: 25,
zIndex: 1
}}><Text>Should overlay Content</Text></View>
</View>
<View style={{flex: 1, backgroundColor: 'yellow'}} >
<Text>Content</Text>
</View>
It's better to stay away from "zIndex" since it won't work as expected in Android. instead use the order of the elements along with position:'absolute' . it'll work fine.
reference - How to overlap in react-native
I think I found what happens.
As I read on Facebook documentation
The overflow style property defaults to hidden and cannot be changed on Android
Related
I want to create a UI like the picture below.
How can I implement it? Anyone have an idea for this. Pls help me.
Thanks
Yes.. you can design that arrow with position: 'absolute' css property.
try to implement below code!
<View style={{ marginTop: 10, marginHorizontal: 15 }}>
<View style={{ position: 'relative' }}>
<View style={{ borderWidth: 1, padding: 5, backgroundColor: '#e5f8ff', borderColor: '#007299' }}>
<Text>Top Note</Text>
</View>
<View style={{ position: 'absolute', top: 9, left: -5 }}>
<View style={{ borderBottomWidth: 1, borderLeftWidth: 1 ,backgroundColor: '#e5f8ff', borderColor: '#007299', width: 10, height: 10, transform: [{ rotate: '45deg'}] }}>
</View>
</View>
</View>
</View>
check this image
Here is a working Demo
As also #pds answer suggest you need to make the arrow component as absolute to position it over the message body.
Using CSS triangle and absolute positioning you can get the working demo.
Here are some libraries which will help you to achieve your whole UI :
triangle : https://github.com/Jpoliachik/react-native-triangle
timeline-listview : https://github.com/thegamenicorus/react-native-timeline-listview
timeline-theme : https://github.com/tomzaku/react-native-timeline-theme
So I'm setting a background image in react native but I need the position of the background image to be set to bottom. So if anyone knows how to achieve this.
I have tried adding backgroundPosition but it seems it is not supported
<ImageBackground
source={require("../assets/img/bg-top.png")}
// resizeMethod={'auto'}
style={{
width: "100%",
height: 120,
padding: 20,
paddingVertical: 40,
backgroundPosition: "bottom" // not working
}}
imageStyle={{
resizeMode: "cover",
alignSelf: "flex-end"
}}
>
<Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>;
I expect the image alignment should start from the bottom rather it starts from the top
React native provided bottom and position tag to set UI at bottom. Please replace backgroundPosition tag from image style into
position: 'absolute',
bottom:0
<ImageBackground
// resizeMethod={'auto'}
style={{
width: "100%",
height: 120,
backgroundColor:'#000',
padding: 20,
paddingVertical: 40,
position: 'absolute',
bottom:0
}}
imageStyle={{
resizeMode: "cover",
alignSelf: "flex-end"
}}
>
<Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>
Please check snack expo
https://snack.expo.io/#vishal7008/bottom-ui
The image inside ImageBackground has the default style:
position: 'absolute'
top: 0
bottom: 0
right: 0
left: 0
So, we can just remove the top: 0 by setting
top: undefined
together we have
<ImageBackground
source={require("../assets/img/bg-top.png")}
// resizeMethod={'auto'}
style={{
width: "100%",
height: 120,
padding: 20,
paddingVertical: 40,
overflow: 'hidden' // prevent image overflow the container
}}
imageStyle={{
resizeMode: "cover",
height: 200, // the image height
top: undefined
}}
>
<Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>
For implementing the position of the background image I use the following code, actually I use the ImageBackground component as the wrapper of the entire screen:
<ImageBackground
style={styles.screenWrapper}
imageStyle={styles.backgroundStyle}
source={{ uri: movieDetail?.image?.medium?.url }}
>
// children
~~~
const styles = createStyle({
screenWrapper: {
flex: 1,
position: 'relative',
},
backgroundStyle: {
resizeMode: 'cover',
position: 'absolute',
top: 0,
bottom: '45%',
},
Finally, I reach my desire:
Note: The above codes are not workable, it is just pseudo-code to convey my exact idea.
the backgroundPosition you know from CSS is not supported according the docs.
There is a similar question:
https://stackoverflow.com/a/53726116/9899193
Does this help you?
I'm trying to display a simple overlay, but over certain components only.
Example code:
<Animated.View style={{ flex: 1 }}>
<Text style={ [{zIndex: 0}, styles.titleText] }>Title under overlay</Text>
<Animated.View style={ [styles.overlay] } />
<View style={{ zIndex: 2, flex: 1, justifyContent: 'center' }}>
<Text style={{ zIndex: 2, fontSize: 32, fontWeight: 'bold', color: '#ffffff', textAlign: 'center' }}>Subtitle above overlay</Text>
<Text style={ [{ zIndex: 0 }, styles.descriptionText] }>Text under overlay</Text>
<Text style={ [{ zIndex: 0 }, styles.descriptionText] }>Text above overlay</Text>
</View>
</Animated.View>
As mentioned, I need some of the components above the Overlay and others under it.
Right now, all components written in code after the overlay view, comes above overlay. I want specifically the component saying "Text under overlay" to come under overlay but the other text should be above.
How do I go about it? zIndex is not working the way I want it to.
You can add the overlay the by the combination of position: 'absolute' and zIndex in the following way.
<View style={styles.container}>
<View style={{position: 'absolute', backgroundColor: 'transparent', top: 0, bottom: 0, right: 0, left: 0, zIndex: 0}} /> //... Here is the overlay
<View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 200, right: 0, left: 0, zIndex: 1}} >
// Set the elements over the overlay here
</View>
<View style={{backgroundColor: 'blue', position: 'absolute', top: 0, bottom: 100, right: 0, left: 0, zIndex: -1}} >
// Set the elements under the overlay here
</View>
</View>
Here's the sample snack demo
I'm trying to have a card shown on top of a card in React Native and set zIndex = 1 for the top card and zIndex = 0 for the bottom card and placed them in a view like below:
<View style={{paddingVertical: MARGIN_1, justifyContent: 'center'}}>
{this.props.subscribed ? (
<CardSubscribe
style={{zIndex: 2}}
/>
) : (null)}
{this._renderTextItems()}
</View>
However, there's no overlap between two cards. The bottom card starts after the top card:
I have also tried to debug with inspector and it shows the top card has the property of zIndex = 1 :
and the bottom card has the property of zIndex = 0 :
I have also tried to place the top card after the bottom card but it just shows below the bottom card, like zIndex isn't doing anything. How should I fix this?
z-index working fine in IOS. but again you will get isssue in android. In android z-index is not working you need to use elevation. But please do not forget to add z-index.
<TouchableOpacity
style={{
alignSelf: 'center',
position: 'absolute',
right: 10,
top: 10,
zIndex: 15,
elevation: (Platform.OS === 'android') ? 50 : 0
}}
onPress={() => {}}
>
<Image
source={require('dummy.png')}
/>
</TouchableOpacity>
In React Native we have position: relative by default. If you want to make the correct use of zIndex, you might need to add position: 'absolute', for them to overlap as described in your use case.
For example:
<View style={{flex: 1}}>
<View style={{width: 200, height: 200, zIndex: 1, position: 'absolute', backgroundColor: 'red'}} />
<View style={{width: 200, height: 200, zIndex: 2, position: 'absolute', backgroundColor: 'blue'}} />
</View>
I want to fix my Image. I use position: 'absolute', in iOS it works fine, but in android the image disappear. This is my code:
<Image style={{width: width, zIndex: 0, position: 'absolute', top: 0}}
source={require('../assets/2piano.png')}
resizeMode="contain"
/>
Please HELP!!!
This will work on both Android and iOS. Since your image is from the local resources you should give it a width:null and height:null in order to apply your own dimensions on it.
<View style={{width: 500, height:500}}>
<Image style={{width: null, height:null, zIndex: 0, position: 'absolute', top: 0, bottom:0, left:0, right:0}}
source={require('../assets/2piano.png')}
resizeMode="contain"
/>
</View>
For style:
twoPianoStyle: {
position: 'absolute',
height: '100%',
width: '100%'
}