Why does changing my margin percentage mess with the spacing of my custom buttons? - react-native

Question

I'm new to React-Native and web development, but I do have a smidge of CSS experience. I've come across an issue that I can't figure out and I haven't found anything online that expresses a similar problem so that I may figure out why this is happening.
I have custom hexagonal buttons that I want to space out in a similar fashion to an onscreen keyboard which I have done, but my buttons are a bit too far up. The first row is obscured by the notification bar. My StyleSheet for my rows look like this:
const style = StyleSheet.create({
screen: {
width: '100%',
height: '100%',
backgroundColor: '#lele19'
},
firstRow: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
paddingTop: '5%',
marginHorizontal: '5%'
}
row: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
marginHorizontal: '5%'
}
});
Each "row" of buttons is within a View component.
So to try to fix the position so that the notification bar was not in the way I changed my paddingTop: from 5% to 15% and as a result, it seems to move my row down as I want, but now the space between my buttons is increased as seen from this screenshot:
It seems that any padding I do that is past 5% causes the spacing of my buttons to be off. How can I prevent this? What am I doing wrong? It appears this way on any device whether it is a phone or a tablet. Any help is greatly appreciated.
EDIT:
Since people are asking for more here is my PortraitLayout.js:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import HexButton from './HexagonButton';
const PortraitLayout = props => {
return (
<View style={styles.screen}>
<View style={styles.firstRow}>
<HexButton>a</HexButton>
<HexButton>b</HexButton>
<HexButton>c</HexButton>
<HexButton>d</HexButton>
<HexButton>e</HexButton>
<HexButton>f</HexButton>
<HexButton>g</HexButton>
<HexButton>h</HexButton>
<HexButton>i</HexButton>
</View>
<View style={styles.row}>
<HexButton>j</HexButton>
<HexButton>k</HexButton>
<HexButton>l</HexButton>
<HexButton>m</HexButton>
<HexButton>n</HexButton>
<HexButton>o</HexButton>
<HexButton>p</HexButton>
<HexButton>q</HexButton>
<HexButton>r</HexButton>
</View>
<View style={styles.row}>
<HexButton>s</HexButton>
<HexButton>t</HexButton>
<HexButton>u</HexButton>
<HexButton>v</HexButton>
<HexButton>w</HexButton>
<HexButton>x</HexButton>
<HexButton>y</HexButton>
<HexButton>z</HexButton>
</View>
</View>
);
};
const styles = StyleSheet.create({
screen: {
width: '100%',
height: '100%',
backgroundColor: '#1e1e19'
},
firstRow: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
paddingTop: '5%',
marginHorizontal: '5%'
},
row: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
paddingTop: '5%',
marginHorizontal: '5%'
}
});
export default PortraitLayout;
HexagonButton.js:
import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Dimensions } from 'react-native';
const HexagonButton = props => {
return (
<TouchableOpacity>
<View style={styles.hexagon}>
<View style={styles.hexagonInner}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
<View style={styles.hexagonBefore} />
<View style={styles.hexagonAfter} />
</View>
</TouchableOpacity>
);
};
let buttonWidth = Dimensions.get('window').width / 11; //Make enough room for 16 even though I am only putting 13 per row.
let buttonHeight = buttonWidth * 0.55;
const styles = StyleSheet.create({
hexagon: {
width: buttonWidth,
height: buttonHeight
},
hexagonInner: {
width: '100%',
height: '100%',
backgroundColor: '#ffec33',
justifyContent: 'center',
alignItems: 'center'
},
hexagonAfter: {
position: 'absolute',
bottom: -1 * (buttonHeight * 0.45),
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: buttonWidth * 0.5,
borderLeftColor: 'transparent',
borderRightWidth: buttonWidth * 0.5,
borderRightColor: 'transparent',
borderTopWidth: buttonHeight * 0.45,
borderTopColor: '#ffec33'
},
hexagonBefore: {
position: 'absolute',
top: -1 * (buttonHeight * 0.45),
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: buttonWidth * 0.5,
borderLeftColor: 'transparent',
borderRightWidth: buttonWidth * 0.5,
borderRightColor: 'transparent',
borderBottomWidth: buttonHeight * 0.45,
borderBottomColor: '#ffec23'
},
buttonText: {
fontSize: 18
}
});
export default HexagonButton;
and App.js:
import React from 'react';
import { StyleSheet, View } from 'react-native';
import LandscapeLayout from './components/LandscapeLayout';
import PortraitLayout from './components/PortraitLayout';
export default function App() {
return (
<PortraitLayout/>
);
}
const styles = StyleSheet.create({
});
That is literally all of the code I have. I hope this will paint a better picture of the issue. I will try the borders thing and see what that yields.
EDIT:
Here is the result of the border color test. It looks like my buttons extend past the border. For simplicity, I only changed the top row so that the buttons were spaced incorrectly. Also for the sake of testing I added another style to the Portrait.js file that is just a copy of row.

Answer 1

I'm still not sure why it happens but I did manage to fix it. It had something to do with justifyContent and the fact that my button rows were not within a new of their own. I added a view around my button rows like this:
<View style={styles.screen}>
<View style={styles.keyboardLayout}>
<View style={styles.row}>
<HexButton>a</HexButton>
<HexButton>b</HexButton>
<HexButton>c</HexButton>
<HexButton>d</HexButton>
<HexButton>e</HexButton>
<HexButton>f</HexButton>
<HexButton>g</HexButton>
<HexButton>h</HexButton>
<HexButton>i</HexButton>
</View>
<View style={styles.row}>
<HexButton>j</HexButton>
<HexButton>k</HexButton>
<HexButton>l</HexButton>
<HexButton>m</HexButton>
<HexButton>n</HexButton>
<HexButton>o</HexButton>
<HexButton>p</HexButton>
<HexButton>q</HexButton>
<HexButton>r</HexButton>
</View>
<View style={styles.row}>
<HexButton>s</HexButton>
<HexButton>t</HexButton>
<HexButton>u</HexButton>
<HexButton>v</HexButton>
<HexButton>w</HexButton>
<HexButton>x</HexButton>
<HexButton>y</HexButton>
<HexButton>z</HexButton>
</View>
</View>
</View>
const styles = StyleSheet.create({
screen: {
width: '100%',
height: '100%',
backgroundColor: '#1e1e19'
},
row: {
justifyContent: 'space-between',
flexDirection: 'row',
paddingTop: '5%',
marginHorizontal: '5%'
},
keyboardLayout: {
height: '50%',
width: '100%',
alignItems: 'center',
justifyContent: 'flex-end'
}
});
I would still like to know the exact cause, but for now, my problem has been solved.