React Native Components disappear on re-render - react-native

Question

My app has a homescreen built out of hexagons. Since flex doesn't handle diagonal alignment well I used the transform prop to move the hexagons manually into alignment. However, when the app is re-rendered, the hexagons seem to disappear and reappear at random. It usually takes ~8 renders and then the hexagons will all magically reappear.
EDIT: The invisible hexagons can still be pressed, and when the user navigates back to the homescreen, all the hexagons are visible.
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Dimensions, TouchableOpacity } from 'react-native';
class Home extends Component {
constructor(props){
super(props);
}
render() {
return (
<View style={style.columnHexView}>
<View>
<TouchableOpacity
activeOpacity = {.5}
style={style.HexOpacity}
>
<Image style={style.Hex}source={require('./images/logo.png')} />
</TouchableOpacity>
</View>
<View>
<TouchableOpacity
activeOpacity = {.5}
style={style.HexOpacity}
>
<Image style={style.Hex}source={require('./images/emptyhex.png')}/>
</TouchableOpacity>
</View>
<View style={{transform:([
{translateY:(Dimensions.get('window').height/10)*-2.5},
{translateX:(Dimensions.get('window').height/10)*-.84}
])}}>
<TouchableOpacity
activeOpacity = {.5}
style={style.HexOpacity}
onPress={() => this.props.navigation.navigate("documentList")}
>
<Image style={style.Hex}source={require('./images/documenthex.png')} />
</TouchableOpacity>
</View>
<View style={{transform:([
{translateY:(Dimensions.get('window').height/10)*-3.5},
{translateX:(Dimensions.get('window').height/10)*.84}
])}}>
<TouchableOpacity
activeOpacity = {.5}
style={style.HexOpacity}
onPress={() => this.props.navigation.navigate("Settings")}
>
<Image style={style.Hex}source={require('./images/cog.png')} />
</TouchableOpacity>
</View>
<View style={{transform:([
{translateY:(Dimensions.get('window').height/10)*-5}
])}}>
<TouchableOpacity
activeOpacity = {.5}
style={style.HexOpacity}
onPress={() => this.props.navigation.navigate("ToDo")}
>
<Image style={style.Hex}source={require('./images/todohex.png')}/>
</TouchableOpacity>
</View>
<View style={{transform:([
{translateY:(Dimensions.get('window').height/10)*-4.5},
{translateX:(Dimensions.get('window').height/10)*.84}
])}}>
<TouchableOpacity
activeOpacity = {.5}
style={style.HexOpacity}
>
<Image style={style.Hex}source={require('./images/emptyhex.png')}/>
</TouchableOpacity>
</View>
<View style={{transform:([
{translateY:(Dimensions.get('window').height/10)*-5.5},
{translateX:(Dimensions.get('window').height/10)*-.84}
])}}>
<TouchableOpacity
activeOpacity = {.5}
style={style.HexOpacity}
>
<Image style={style.Hex}source={require('./images/emptyhex.png')}/>
</TouchableOpacity>
</View>
</View>
);
}
}
const style = StyleSheet.create({
columnHolder: {
flex: 0,
height: Dimensions.get('screen').height,
width: Dimensions.get('screen').width,
backgroundColor: '#424242',
flexDirection: 'row',
},
columnHexView: {
backgroundColor:'#424242',
alignItems: "center",
justifyContent: 'center',
flex: 1,
},
Hex: {
aspectRatio: 100/85,
maxHeight: Dimensions.get('window').height/10,
resizeMode: 'contain',
flexDirection: 'column',
flex: 0,
flexWrap: 'wrap'
},
hexHold:{
},
HexOpacity: {
justifyContent: 'center',
resizeMode: 'stretch',
display: 'flex',
maxHeight: Dimensions.get('window').height/5
}
}
)
export default Home

Answer 1

In case anyone sees this, the solution was to use cover resize mode instead of contain. I suspect that it was only rendering some hexagons due to slight overlap in between the hexagons.