When marginBottom using percentage value, it works incorrect.

[laplaceliu]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native version: https://github.com/facebook/react-native/releases
• Run react-native info in your terminal and paste its contents under "Environment"
• Let us know how to reproduce the issue. Include a code sample, share a project, or
  share an app that reproduces the issue using https://snack.expo.io/

Environment

OS: macOS High Sierra 10.13.5
Node: 8.11.2
Yarn: 1.7.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4 Build version 9F1027a
Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

Description

When a parent View's marginBottom Props using a percentage value, the son View has marginBottom too, even though I didn't assign the Props.

Steps to Reproduce

I tried to use a percentage value for marginBottom, but it seems something incorrect.

To using the following code:

import React, {Component} from 'react';
import {View} from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                marginBottom: '25%',
                backgroundColor: "green",
            }}>
                <View style={{backgroundColor: 'yellow', flex: 1}}>
                </View>
            </View>
        );
    }
}

It comes out:

It seems like the 2nd View has a bottom margin too.

Then I Tried to add some children View:

render() {
        return (
            <View style={{
                flex: 1,
                marginBottom: '25%',
                backgroundColor: "green",
            }}>
                <View style={{backgroundColor: 'yellow', flex: 1}}>
                    <View style={{backgroundColor: 'blue', flex: 1}}>
                        <View style={{backgroundColor: 'red', flex: 1}}>
                            <View style={{backgroundColor: 'orange', flex: 1}}>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        );
    }

It comes out:



The blue/red/orange Views have no bottom margin.

I tried to change the percentage value to number value:

render() {
        return (
            <View style={{
                flex: 1,
                marginBottom: 25,
                backgroundColor: "green",
            }}>
                <View style={{backgroundColor: 'yellow', flex: 1}}>
                    <View style={{backgroundColor: 'blue', flex: 1}}>
                        <View style={{backgroundColor: 'red', flex: 1}}>
                            <View style={{backgroundColor: 'orange', flex: 1}}>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        );
    }

It comes out:

It works correct.

Expected Behavior

The 2nd View does not have a bottom margin.

Actual Behavior

The 2nd View do have a bottom margin.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.