React Native - View disappears when position is absolute on Android
Solution 1
The problem is the width and height of the TouchableOpacity
are zero! because the contents of that are absolute, so you need to set (left, right, top, bottom) for one of the children or set the width and the height for the TouchableOpacity
itself
Why it works in iOS?
because in iOS UIView
doesn't clip its children by default, so actually TouchableOpacity
's width and height are still zero but the children overflowed and you can see them,
there is a flag for that (Docs)
but in android ViewGroup
always clips its children
How to solve problems like this?
there are some tools that you can debug UI at runtime, but I think the easiest way in react-native is set backgroundColor
from the root view to the target view!
so for example in this case: first set backgroundColor
for mainView
then if it does show, set backgroundColor
for parentView
and then for TouchableOpacity
and you can see it doesn't show backgroundColor
of TouchableOpacity
because the width
and height
of that are zero, in each step you can set width
and height
manually to ensure about the problem
Solution 2
Add zIndex:100
to your attributes. Worked for me. Not exactly, you just have to put a high enough value for your zIndex param, to put it on top of others.
Solution 3
I've just experienced this problem and it seems like specifying minWidth and minHeight for the parent of 'absolute' positioned elements solves the problem.
EDIT: Actually specifying width and height also solves it.
Here is the updated snack. See line 11.
Solution 4
I solved mine by giving parent component a flex:
position:'relative',
flex:1
Just dropping it soo it could be helpful to people.
Solution 5
It looks like z-index works from top to bottom.
Without setting the zIndex manually, your absolutely positioned component should be lower in order of appearance/line number in your code for it to layer over the content below it.
so
<Underlay/>
then
<AbsolutelyPositioned/>
and not the other way around.
Related videos on Youtube
Ketan Malhotra
Software Engineer with 4+ years experience in Mobile App Development. Previously co-founded a couple of startups as the technical co-founder making the entire products from scratch. Also, have worked as a freelancer for multiple small startups to help them release the initial versions of their products.
Updated on June 04, 2022Comments
-
Ketan Malhotra almost 2 years
Whenever I made the position style 'absolute' for this view, it disappears. I have no idea why it is happening.
import React, { Component } from 'react'; import { Text, View, Image, TouchableOpacity, StyleSheet } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.mainView}> <View style={styles.parentView}> <TouchableOpacity activeOpacity={0.9} onPress={() => {}}> <View style={ [{position: 'absolute'}, styles.textView] }> <Text style={styles.textViewText}> Just Another Cat </Text> </View> <Image style={[{position: 'absolute'}, styles.imageView]} source={{ uri: 'https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg' }} /> </TouchableOpacity> </View> </View> ); } } const styles = StyleSheet.create({ mainView: { flexDirection: 'row', flex: 1 }, parentView: { alignSelf: 'center', flex: 0.5, left: 10, elevation: 3, alignItems: 'flex-start' }, textView: { width: 250, height: 250, opacity: 1, borderRadius: 125, backgroundColor: '#aaa034' }, textViewText: { textAlign: 'center', padding: 10, color: '#ffffff', fontSize: 18, top:0, right:0, bottom:0, left:0, textAlignVertical: 'center', position: 'absolute' }, imageView: { width: 250, height: 250, borderRadius: 125, borderColor: '#000000', borderWidth: 0.2 } });
When I remove the inline-style: (position: 'absolute') added alongside styles.textView and styles.imageView, they both will be visible again. But I want to make the position absolute for some reason, but then they just disappear. I don't know why. Can anyone explain this?
EDIT: It works in iOS. It's giving this bug on android. Snack URL: https://snack.expo.io/Hy_oRrvOM
-
Ketan Malhotra about 6 yearsIt's blank. It should show the image/option text like it does when they're not absolute. Do you see the image? Edit: just checked, it works in iOS but not on android. Run the code on iOS and you'll see the "cat" image but when you run it on android, it won't show you anything.
-
-
Zennichimaro over 4 yearsIs there a way to set TouchableOpacity's width and height? I googled and found "likely" similar issue, the proposed solution is to add a parent with width and height: github.com/GeekyAnts/NativeBase/issues/1322
-
ishab acharya over 4 yearsGlad to know ! @BuddhikaJayawardhana
-
Dorian about 3 yearsunderrated comment! Thanks!