how can I reduce space between these View components React Native - css

Question

So I am just learning.... building a quiz app in react-native and I think the space between the first row of the buttons and the second row of the buttons is too much, how can I reduce it?
thanks
<LinearGradient colors={['#0D0B18','#28263E']} style={styles.container}>
<Text style={styles.question}>After Jesus rose from the dead, how long did he remain on earth before ascending to heaven? </Text>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>12 days</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>40 days</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle}onPress={this.onPress}>
<Text style={styles.buttonText}>3 months</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>1 year</Text>
</TouchableOpacity>
</View>
<View style={styles.progressStyle}>
<ProgressViewIOS
style={styles.progressView}
progress={(0.2)}
/>
</View>
</LinearGradient>
const styles = StyleSheet.create ({
container: {
flex: 3,
},
question: {
paddingTop: '20%',
padding: 30,
flex: 1,
color: '#fff',
fontSize: 25
},
buttonRow : {
marginTop: 0,
flexDirection: 'row',
color: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
},
buttonStyle: {
backgroundColor: '#fff',
width: '40%',
height: '50%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10
},
buttonText: {
color: '#000'
},
progressView: {
width: '90%',
},
progressStyle: {
padding: 20,
alignItems: 'center',
justifyContent: 'center',
}
});

Answer 1

Small, you don't need flex: 3 for an element with no siblings, it shouldn't really matter but you only need to assign it flex: 1 if it is alone and should not take up more space relative to it's siblings.
To get your buttons to display nicely you should give them a wrapper:
<View style={styles.buttonWrapper}>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>12 days</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>40 days</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>3 months</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>1 year</Text>
</TouchableOpacity>
</View>
</View>
where styles.buttonWrapper is just:
buttonWrapper: {
flex: 1,
justifyContent: "space-around"
},
Now your button group and question will occupy an even amount of space after the height of your progress bar is taken into account and the button group will be squished together thanks to justifyContent: 'space-around'
This alters the size of the buttons however, so for this to work you should change the button styles to something like:
buttonStyle: {
backgroundColor: "#fff",
flex: 1,
marginHorizontal: 5,
aspectRatio: 2,
justifyContent: "center",
alignItems: "center",
borderRadius: 10
},
You can see this in action here: https://snack.expo.io/HkWF-EsA7
Flex can be a little weird when you're just starting out, so I recommend experimenting a lot. There are interesting properties like aspectRatio, alignContent, alignSelf and many others (learn more about those here). It may be frustrating at first but your layouts will be much better if you can avoid using width and height and entirely use flex instead. This isn't always possible but I think it will work just fine for what you're trying to accomplish.
I hope this gave you some idea of what you could do moving forward, if you have any questions let me know!