React-native: 'absolute' property not working react native while back to screen android.

[reformer]

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.

[alzalabany]

same here, android position absolute not showing correctely

`
users.map(u=>(
source={p}
defaultSource={Logo}
style={{
width: u.id===id?80:40,
height: u.id===id?80:40,
borderRadius: u.id===id?40:20,
top: i < 3 ? 0 : u.id===id ?0 : 50,
position:'absolute',
right:u.id===id?null:(i<3?i:i-3)*50,
left:u.id===id?10:null,
}}
/>);

this renders as expected in ios but not in android
`

[mishig25]

+1

[gorjanz]

+1

[reformer]

I resolved this issue. just swapping my code line.. the correct code lines are,

<RTCView streamURL={this.state.selfViewSrc} style={styles.selfView}/>
 {
      mapHash(this.state.remoteList, function(remote, index) 
      return (
      <RTCView key={remoteIndex} streamURL={remoteStreamURL} style={styles.remoteView} />);
     })
 }

RTC self View line write first then RTC remote view.

[SudoPlz]

I have the same problem... @reformer where did you swap this code at?

[SudoPlz]

Never mind, I found that most of the times, the view that is styled with position: 'absolute' must always have a defined width and height, otherwise it disappears in Android. I solved the problem, by simply defining a width and a height on the absolute view.

[robbykim]

@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: 100 to the styles and it renders the height but the component is still hidden somewhere with a white box in its place. Any ideas?

      <View
        onLayout={event => setTabHeight(event.nativeEvent.layout.height)}
        style={styles.mainContainer}
      >
        <View style={demographicStyle}>
          {demographicDetails}
        </View>
        <ResultsPatientCompareContainer
          results={results[calculatorType]}
          comparedResults={comparedResults}
        />
      </View>

mainContainer: {
    width: Dimensions.get('window').width,
    position: 'absolute',
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowOffset: { height: 1 },
},

[SudoPlz]

@robbykim
Does it work if you
1) remove the onLayout function
2) set the width and height in a static way,
3) Add a top: 0 value ?

mainContainer: {
    width: 100,
    height: 100,
    position: 'absolute',
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowOffset: { height: 1 },
},

Try that, it might give you a hint on what to do next..!

[robbykim]

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!

[SudoPlz]

Cool!! Good job man.

[kpink224]

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.

[thevishnupradeep]

I'm also having the same issue. @kpink224 @christopherdro

[johuder33]

I have had similar issue with that, I realized that remove elevation prop fixex the issue, maybe you can try adding elevation property in android instead zIndex.

[markdowney]

Another example showing how broken this is on Android: https://snack.expo.io/BkRSSXylZ

[cinder92]

this issue is braking my head!!! any fix about this? :(

[vbahtev]

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 )

            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text> Some content here</Text>
                <View style={{flex: 1}}>
                    <View style={{width: 150, height: 150, backgroundColor: '#C6C6C6'}}>
                    </View>
                    <View style={{position: 'absolute', top: 0,  right: -50, width: 70, height: 70, backgroundColor: '#FF0000'}}>
                    </View>
                </View>
                <Text> Some content here</Text>
            </View>

result

[kpink224]

@vbahtev While you are right in your implementation and it works for this specific situation, the problem still persists when the view is not within the parents boundaries (something that iOS handles). The wrapping view here provides that parent boundary that stretches to the sides of the screen so that the red box can be seen.

[vbahtev]

@kpink224 yes understand you.
But can you provide example source code ?
Thanks

[kpink224]

@vbahtev I feel the code above and what @markdowney provided shows the problem pretty accurately. I guess for how I'm using it, I want to show a progress bar (not the one provided in react-native. I wanted a custom one) that has a arrow that points up at the progress. When progress is 0% or 100%, the arrow must go outside the boundaries of the bar component. I can fix it by adding a margin but prefer not to solve it that way due to UX constraints. It works obviously with iOS but is cut off in android. Thanks for helping out with this!

[yuhanle]

mark

[cinder92]

:( problem still persist on android, any fix?

[vbahtev]

@cinder92 I have the same problem with your "yellow circle with 80" and i resolve with code that i show above. Please just test it or send me your layout code to show you how to fix

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[echo8795]

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?

[vbahtev]

@echo8795 Please see my comment above. In my Android & iOS app this work fine.

[rashtay]

Still facing the issue.

[solominh]

My case is absolute view inside ScrollView not working in Android.

• contentContainerStyle will have the same height as children views
• In ios, children views can overflow => absolute with Width and Height works
• In android, children views is contained inside => overflow not working
  => Quick fix is specify contentContainerStyle flex:1

[herman-rogers]

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: 50 to 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 toggle display: '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.

[jdl7758258]

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,

[vanskins]

I am having this issue also. Any fix for this ?

[ArthurInTheShell]

@vbahtev Thanks! Your solution fixed my problem!