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>
Related
I'm trying to position the callout at the bottom of the screen and have it fixed to this position even though the map is moving? Has anyone had any luck in achieving this with React Native Maps?
All my attempts have not fixed the callout to the bottom of the screen.
The only way I have found is to avoid using the callout component provided by react-native-maps.
Here is the code for the callout:
<Callout
tooltip
style={styles.itemContainer}
>
<CalloutSubview
style={styles.button}
onPress={closeCallout}
>
<Ionicons name="ios-close-circle" size={30} style={styles.icon} />
</CalloutSubview>
<SemiBoldHeadline
fontSize={18}
text={title}
marginTop={0}
marginBottom={4}
marginRight={30}
/>
<BodyText
fontSize={14}
lineHeight={18}
marginRight={30}
>
{editedString}
</BodyText>
<View style={styles.inlineContainer}>
<CalloutSubview onPress={() => RouteService.openMaps(coordinates.latitude, coordinates.longitude, title)}>
<SmallDirectionsButton />
</CalloutSubview>
<CalloutSubview onPress={readMoreFunction}>
<ReadMoreButton
text={'Read More'}
/>
</CalloutSubview>
</View>
</Callout>
Here is the styling of the callout:
const styles = StyleSheet.create({
itemContainer: {
borderRadius: 5,
borderWidth: 1,
borderColor: Colors.borderColor,
width: Layout.window.width - 100,
backgroundColor: Colors.white,
padding: 20,
paddingRight: 25
},
inlineContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
},
button: {
position: 'absolute',
top: 0,
right: 0,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 30,
zIndex: 10,
},
icon: {
color: Colors.almostBlack,
opacity: 0.5
}
});
If you need to render custom react components "statically" above the map you shouldn't build it with using the map's callout component. Instead, create a view and position it absolutely above the map component:
<>
<Map .../>
<View style={{ position: "absolute", bottom: "20"}}>
{/* Your custom view content goes here*/}
</View>
</>
The callout components are just build to be used directly within the map's context and are expected to move when the map moves.
Everybody.
I am going to make one screen (top: flatList, bottom: some component), but the component should be posited at the bottom of the screen.
I tried several times like this, but I could not do that.
I tired:
bottom component style:
position: 'absolute',
bottom: 0,
padding: 20,
But not working for me and this component just hidden.
I am not sure why this happened.
Please help me...
Thanks
You can do something like this. The flatlist would be scrollable, you can place the view above or below based on your requirement.
//data=['aa','bb','cc']
<View style={{ flex: 1 }}>
<View style={{ backgroundColor: 'blue', height: 100, width: '100%' }} />
<FlatList
style={{ flexGrow: 0 }}
renderItem={({ item }) => (
<Text style={{ height: 100 }}>{item}</Text>
)}
data={data}
/>
<View
style={{
backgroundColor: 'red',
height: 100,
width: '100%',
marginTop: 'auto',
}}
/>
</View>
Explanation
flexGrow: 0 will make sure that the flatlist will use only available space otherwise it will grow and take the full screen.
marginTop: 'auto' will move the view to the bottom part this works for marginLeft and marginRight as well which can help when moving item to corners.
So the view at the bottom would take height:100 and full width and move to the bottom and flatlist would take the rest.
Output will be like below
Do you mean something like that?
<View style={{ flex: 1 }}>
<FlatList
style={{ flex: 1, .... }}
...
/>
<SomeComponent style={{height:80, width:'100%'}}>
...
</SomeComponent>
</View>
How to align close button icon on top right corner of ImageBackground component in react-native
Code:
<ImageBackground
source={require('../images/AppIntro/1.png')}
style={{ width: '100%', height: 150 }}
>
<TouchableOpacity>
<Icon name="md-close" style={styles.closeButton} />
</TouchableOpacity>
</ImageBackground>
Edit: i am trying to create a modal(pop up) which will be displayed on button click, so absolute position may not work.
<View>
<Image
source={require('../images/AppIntro/1.png')}
style={{
width: '100%',
height: 150
}}/>
<Icon
name="md-close"
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0
}}/>
</View>
The above code snipped will put your icon on top on the image horizontally and vertically centered of the image. You can adjust the top, left, right, and bottom and move it anywhere on top the of the image.
<View>
<Image
source={require('../images/AppIntro/1.png')}
style={{ width: '100%', height: 150 }}
/>
<Icon name="md-close"
style={{
position: 'absolute',
right: 5,
top: 5,
}} />
</View>
This working right side top corner..
You need to use position: 'absolute' to align children anywhere you want with in parent. In your case you need to use top, and right along with absolute position. Consider following example:
<Parent>
<Child style={{position: 'absolute', top: 5, right: 5}}>
{...}
</Child>
</Parent>
You can read more about position here
I have some code to have an image of random size spread to the full width of a container + vertically center inside the container. But what I need is to anchor it at the top.
In CSS i would use background-position, but it's not supported in React Native. I feel I've tried every combination of resizeMode, absolute positioning, etc - but still haven't been able to figure it out.
<View style={{
flex: 1,
height: 120,
}}>
<Image source={{uri: source}} style={{
flex: 1,
width: '100%',
resizeMode: 'cover'
}}>
</Image>
</View>
It seems crazy that there is still not a standard way of anchoring an image in React Native as there is in regular css (at least if there is, I stall haven't found it). But this lib does the trick for me:
react-native-scalable-image
Hope it helps!
If you can get the height of the image h, then you can show the full image first then hide the bottom part with a view container of static height eg. 250:
<View style={{ height: 250 }}>
<Image source={{ uri: source }} style={{ width: null, height: h }} />
</View>
I have found a trick to do that
You need to wrap the wanted height in a View with a overflow hidden
And set a large height in the image style
const WANTED_HEIGHT = 170
<View style={{ height: WANTED_HEIGHT, overflow: 'hidden' }}>
<Image
source={{ uri }}
style={{
width: '100%',
height: 500,
}}
/>
</View>
return (
<View
style={{
flex: 1,
height: 120,
justifyContent: "center",
alignContent: "center"
}}
>
<TouchableOpacity onPress={() => alert("Hello ")}>
<Text style={{ alignSelf: "center" }}>Anchor Tag</Text>
</TouchableOpacity>
<Image
source={{
uri: "https://shoutem.github.io/img/ui-toolkit/examples/image-3.png"
}}
style={{
width: "100%",
height: 100,
resizeMode: "cover"
}}
/>
</View>
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