[Android] [0.38] Position bug when the content change

[Kerumen]

Description

I have a red flex container. At the bottom I have a dynamic content (green) and a Button used to update this content. If I click the button, the height of the green view change. The button should stay below the green content but instead it moves up. See images below.

Layout at start:

After I clicked on the button:

Reproduction

See this GitHub repository: https://github.com/Kerumen/BugLayoutRN

Solution

On iOS this works as it should. It's only on Android since 0.38.

Additional Information

• React Native version: 0.38
• Platform: Android
• Operating System: macOS

[mkonicek]

Can you reproduce this on rnplay.org? Please provide a link. This makes it easier for us to repro without checking out the GitHub repo.

[Kerumen]

@mkonicek I did it but it behaves normally. (https://rnplay.org/apps/nBhNPQ)
Is rnplay running React Native 0.38? It happens only on 0.38, 0.37 worked well.

[desmond1121]

I've tried the demo and maybe this message is useful:

If I remove "flex: 1" in "red" region style, in other word, make red style to a static height, it would appear normally.

You can try to modify styles in his code to bellowing:

const styles = StyleSheet.create({
  //...
  red: {
    height: 200,
    backgroundColor: 'red',
  },
  //...
});

It seems strange and like a bug.

[Kerumen]

Thanks for the solution but I can't do this.
I need my red region to fill the entire size of the screen -- and that's the purpose of flex: 1. My green region is dynamic and I don't know what will be its size.

Sorry to insist but it worked well on 0.37 and on iOS. It's only on 0.38 and on Android. So it's definitely a bug.

[mkonicek]

Pinged @emilsjolander.

[mkonicek]

The code looks good to me: https://raw.githubusercontent.com/Kerumen/BugLayoutRN/master/index.android.js

[mkonicek]

Random guess - can you try using different values of justifyContent on the blue view?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Kerumen]

@mkonicek I tried every values, nothing changed.

[mkonicek]

@emilsjolander Tells me:

Nothing has changed with the android implementation in a while as it was deprecated. In the next version (0.39) it will use the latest csslayout same as iOS so that will resolve these things.

Can you try 0.39.0-rc.0 which is out now? See https://github.com/facebook/react-native/commits/0.39-stable

[Kerumen]

I still have the issue with 0.39.0-rc.0.

I also tried 0.38 and 0.39 with React 15.3 to see if it was React 15.4 related but I also have the problem.

[Kerumen]

@emilsjolander @mkonicek After a very long git bisect, I found that the commit which introduces the bug is this one: d4b8ae7

I'm unable to fix it myself so if someone can I have a look, I appreciate!