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
react-native infoin your terminal and paste its contents under "Environment"share an app that reproduces the issue using https://snack.expo.io/
Environment
Description
items on a flex container have random spacing between them
Steps to Reproduce
Bug example border
Bug example background
Workaround example
Expected Behavior
no random spacing between items
Actual Behavior
random spacing between items