react-native: 'absolute' property not working react native while back to screen android.
I’m working on react native video conferencing module. I showing complete view of remote video full screen and self video in small screen just bottom right, styles is,
remoteView: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
alignSelf:'center',
width: width,
height: height,
},
selfView: {
width:width*.2,
height:height*.2,
right: 5,
bottom: 5,
position: 'absolute',
},
My Code,
return (
<View style={styles.mainContainer}>
{
mapHash(this.state.remoteList, function(remote, index)
return (<RTCView key={remoteIndex} streamURL={remoteStreamURL} style={styles.remoteView} />);
})
}
<RTCView streamURL={this.state.selfViewSrc} style={styles.selfView}/>
<TouchableHighlight
style={styles.otherScreen}
onPress={this._openOtherScreen}>
{
(Platform.OS === 'android')
?
<Image style={styles.iconnav} source= require('./img/imageP.png')}/>
:
<Image style={styles.iconnav} source= require('image!imageP')}/>
}
</TouchableHighlight>
<TouchableHighlight
style={styles.quit}
onPress={ () => this.closeEvent()
}>
{
(Platform.OS === 'android') ?
<Image
style={styles.iconnav}
source={require('./img/exit.png')}/>
:
<Image
style={styles.iconnav}
source={require('image!exit')} />
}
</TouchableHighlight>
</View>
);
My mainContainer style is,
mainContainer: {
flex:1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
alignSelf : 'stretch',
right: 0,
bottom: 0,
top:0,
left:0,
position: 'absolute',
backgroundColor:'#424242',
},
Now the scenario is when i open other screen and come back video view screen then my remote view showing me properly but my self video view not showing. But icons showing proper position (Note : i run same code in iOS device it working properly not in android). I run one test case i make small frame of remote video and again run my application that time when i comeback other screen my self video showing on its position. That means in full remote video it also showing but self video view going back to remote video. How to bring to front my self video.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 31 (8 by maintainers)
@echo8795 Please see my comment above. In my Android & iOS app this work fine.
You need to add another root container: If you want red box to not be cut from @kpink224 's comment you need to add another container that have only one style property style={{flex: 1}}
full code ( work for android and iOS )
result
Is this still an issue for anyone else? I’ve figured out how to work around it but would love for this to work consistently on all devices.
As of now, in order to even get something to show up on android, the child has to either have specified height and width or inherit them from its parent. Also, the element has to fit entirely within it’s parent to be fully displayed - which may be more annoying.
Here are images of this issue:
Just tested today with latest version of react native.
Still facing the same issue, things get cut off in android but not in ios, like shown above. Any fixes apart from having a root view containing the items?
I think you have not resolved this issue,if I always want to an area in the mid but this area have no settled size，a circle covered this area Top,
Still facing the issue.
I am having this issue also. Any fix for this ?
so i need the onLayout because that components height is more dynamic and changes based on information it receives. however, i kinda fixed the problem by putting a height on the parent element. react native is absolute relative to its parent, the parent didn’t have a height and it didn’t know what to do haha. i think i got it now!
@robbykim
Does it work if you
onLayoutfunctionTry that, it might give you a hint on what to do next…!
Yea so this is an incredible nightmare for me. Essentially I have a dropdown menu from the header at the top. You click a button and the dropdown animates downwards showing you a list of options for navigation. Works fine on iOS with absolute positioning. However, absolute positioning won’t show up at all on Android so I have to set the style
width: '100%', height: 50to get it to show up. Which works. However, adding a width an height messes with the Animated.View component showing a permanent blank space where the animation view is supposed to be after animation has triggered (as my menu shows / hides itself on requested). So that’s not ideal, a giant blank space in my main viewport. So I have to toggledisplay: 'none'and throw away the animation to just show / hide the menu in Android. Next, because I have to set a width and height it actually gives a width and height to the ‘absolute positioned’ component pushing down the ENTIRE view. So if I click the dropdown it essentially inserts a component into the view pushing everything down. I mean - at that point its not even absolute positioned, its just a normal component with width and height. There is literally no way around this right now except for a sub par experience in Android - I guess I’ll have to go Native for this and build a component from scratch. Geezes.Edit: I also tried all of your black magic solutions above with varying efficacy. To be completely honest we shouldn’t need all these black magic approaches to get this to work. At this point this basic feature is just not supported in Android full stop regardless of how much water container juggling we do.
My case is absolute view inside ScrollView not working in Android.
@SudoPlz I tried putting a width and height on my absolute view and its still showing a white space where the component is supposed to render. It renders properly on iOS but doesn’t on Android. I’m not really sure what I’m doing wrong :\
my current render function and the mainContainer styles are below. I’ve tried adding a
height: 100to the styles and it renders the height but the component is still hidden somewhere with a white box in its place. Any ideas?