random spacing between borders #19512
Description
- 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 infoin 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