Skip to content

Position relative & bottom not working in Android #16875

@yooouuri

Description

@yooouuri

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:)

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

Expected Behavior

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

screen shot 2017-11-18 at 01 49 54

(Write what you thought would happen.)

Actual Behavior

But in android it cuts the top off...

screen shot 2017-11-18 at 01 51 58

(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.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions