Position relative & bottom not working in Android

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra 10.13.1 Node: 8.6.0 Yarn: 1.2.1 npm: 5.5.1 Watchman: 4.9.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed) react: ^16.1.1 => 16.1.1 react-native: ^0.50.3 => 0.50.3

Steps to Reproduce

(Write your steps here:)

Put 5 views in a view with flexDirection: 'row' and add a top border
The centred view (3e one) make the position: 'relative' and bottom: 12

Expected Behavior

Like in iOS, the button goes over the top border.

(Write what you thought would happen.)

Actual Behavior

But in android it cuts the top off...

(Write what happened. Add screenshots!)

Reproducible Demo

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  Platform
} from 'react-native';

class CustomTabBar extends Component {
  render() {
    let navigation = this.props.navigation;
    let router = this.props.router;

    const { routes, index } = navigation.state;

    return (
      <View style={styles.tabContainer}>
        <View style={styles.tab}>
          <TouchableOpacity>
            <Image source={require('./images/promos.png')} style={styles.icon}/>
            <Text style={styles.tabText}>
              Promo @'s
            </Text>
          </TouchableOpacity>
        </View>

        <View style={styles.tab}>
          <TouchableOpacity>
            <Image source={require('./images/vices.png')} style={styles.icon}/>
            <Text style={styles.tabText}>
              @Vice
            </Text>
          </TouchableOpacity>
        </View>

        <View style={{flex:1}}>
          <TouchableOpacity>
            <Image source={require('./images/button.png')} style={styles.button}/>
          </TouchableOpacity>
        </View>

        <View style={styles.tab}>
          <TouchableOpacity>
            <Image source={require('./images/chat.png')} style={styles.icon}/>
            <Text style={styles.tabText}>
              Ch@t
            </Text>
          </TouchableOpacity>
        </View>

        <View style={styles.tab}>
          <TouchableOpacity>
            <Image source={require('./images/more.png')} style={styles.icon}/>
            <Text style={styles.tabText}>
              More
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: '#ffff',
    borderWidth: 1,
    borderColor: '#e1e1e1',
  },
  tab: {
    flex:1,
    height: 48,

    marginTop: 10,
    zIndex: 10
  },
  tabText: {
    fontSize: 11,
    fontWeight: '100',
    color: '#848484',
    alignSelf: 'center',
    padding: 4
  },
  icon: {
    height: 22,
    width: 20,
    alignSelf: 'center',
    resizeMode: 'contain'
  },
  button: {
    height: 65,
    width: 65,
    resizeMode: 'contain',
    alignSelf: 'center',
    ...Platform.select({
      ios: {
        position: 'relative',
        bottom: 12,
      },
      android: {
        position: 'relative',
        bottom: 12,
      },
    }),
  }
});

export default CustomTabBar;

(Paste the link to an example project and exact instructions to reproduce the issue.)

facebook / react-native