random spacing between borders

[burabure]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https:/facebook/react-native/issues
• Use the latest React Native version: https:/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

Environment:
  OS: Linux 4.13
  Node: 9.3.0
  Yarn: 1.6.0
  npm: 5.5.1
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

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

Description

items on a flex container have random spacing between them

Steps to Reproduce

Bug example border

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default () => {
  return (
    <View style={styles.wrapper}>
      <View style={styles.tabs}>
        <View style={styles.tab}>
          <Text>1</Text>
        </View>
        <View style={styles.tab}>
          <Text>2</Text>
        </View>
        <View style={styles.tab}>
          <Text>3</Text>
        </View>
        <View style={styles.tab}>
          <Text>4</Text>
        </View>
      </View>
      <View style={styles.tabContent}>
        <Text>TAB CONTENT</Text>
      </View>
    </View>
  )
}

const BORDER_COLOR = '#333'
const styles = StyleSheet.create({
  tab: {
    borderColor: BORDER_COLOR,
    borderStyle: 'solid',
    borderWidth: 1,
    padding: 10,
  },
  tabContent: {
    borderColor: BORDER_COLOR,
    borderStyle: 'solid',
    borderWidth: 1,
    flex: 1,
    padding: 20,
  },
  tabs: {
    flex: 1,
    flexDirection: 'column',
  },
  wrapper: {
    flexDirection: 'row',
    padding: 20,
  },
})

Bug example background

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default () => {
  return (
    <View style={styles.wrapper}>
      <View style={styles.tabs}>
        <View style={styles.tab}>
          <Text>1</Text>
        </View>
        <View style={styles.tab}>
          <Text>2</Text>
        </View>
        <View style={styles.tab}>
          <Text>3</Text>
        </View>
        <View style={styles.tab}>
          <Text>4</Text>
        </View>
      </View>
      <View style={styles.tabContent}>
        <Text>TAB CONTENT</Text>
      </View>
    </View>
  )
}

const BORDER_COLOR = '#333'
const styles = StyleSheet.create({
  tab: {
    backgroundColor: 'red',
    padding: 10,
  },
  tabContent: {
    backgroundColor: 'blue',
    flex: 1,
    padding: 20,
  },
  tabs: {
    flex: 1,
    flexDirection: 'column',
  },
  wrapper: {
    flexDirection: 'row',
    padding: 20,
  },
})

Workaround example

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default () => {
  return (
    <View style={styles.wrapper}>
      <View style={styles.tabs}>
        <View style={[styles.tab, styles.tabTop]}>
          <Text>1</Text>
        </View>
        <View style={styles.tab}>
          <Text>2</Text>
        </View>
        <View style={styles.tab}>
          <Text>3</Text>
        </View>
        <View style={styles.tab}>
          <Text>4</Text>
        </View>
      </View>
      <View style={styles.tabContent}>
        <Text>TAB CONTENT</Text>
      </View>
    </View>
  )
}

const BORDER_COLOR = '#333'
const styles = StyleSheet.create({
  tab: {
    borderBottomWidth: 0,
    borderColor: BORDER_COLOR,
    borderLeftWidth: 0,
    borderRightWidth: 1,
    borderStyle: 'solid',
    borderTopWidth: 1,
    padding: 10,
  },
  tabContent: {
    borderBottomWidth: 1,
    borderColor: BORDER_COLOR,
    borderLeftWidth: 0,
    borderRightWidth: 1,
    borderStyle: 'solid',
    borderTopWidth: 1,
    flex: 1,
    padding: 20,
  },
  tabTop: {
    borderTopWidth: 0,
  },
  tabs: {
    borderBottomWidth: 1,
    borderColor: BORDER_COLOR,
    borderLeftWidth: 1,
    borderRightWidth: 0,
    borderStyle: 'solid',
    borderTopWidth: 1,
    flex: 1,
    flexDirection: 'column',
  },
  wrapper: {
    flexDirection: 'row',
    padding: 20,
  },
})

Expected Behavior

no random spacing between items

Actual Behavior

random spacing between items

[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.

[burabure]

this is still happening!

[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.

[burabure]

that moment when you spend a couple hours investigating an issue/bug and submit a good detailed report and all you get is a bot asking if this issue magically solved itself...

[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 a "Discussion" or add it to the "Backlog" 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.