How to remove spaces between Touchable Opacity components in React Native - reactjs

Question

Problem:
I have created a react native component with three touchable opacity components. It is showing like this.
This is how my code is looking.
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import LangaugeCard from './LanguageCard';
import styles from '_styles/homescreen';
class Localization extends Component {
render() {
return (
<View style={styles.localization_container}>
<TouchableOpacity>
<LangaugeCard language="Hindi" />
</TouchableOpacity>
<TouchableOpacity>
<LangaugeCard language="English" />
</TouchableOpacity>
<TouchableOpacity>
<LangaugeCard language="French" />
</TouchableOpacity>
</View>
);
}
}
export default Localization;
My LanguageCard looks like this.
/* eslint-disable prettier/prettier */
import React from 'react';
import {View, Text} from 'react-native';
import styles from '_styles/homescreen';
const LanguageCard = (props) => {
const {language, instruction} = props;
return (
<View style={styles.langauge_card}>
<View style={styles.langauge_view}>
<Text style={styles.language}>{language}</Text>
</View>
<View style={styles.instruction_view}>
<Text style={styles.instruction}>{instruction}</Text>
</View>
</View>
);
};
export default LanguageCard;
This is my styling file.
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
backgroundColor: '#eeeeee',
height: '100%',
justifyContent: 'center',
},
localization_container: {
flex: 1,
},
langauge_card: {
backgroundColor: '#ffffff',
height: '46%',
marginLeft: '5%',
marginRight: '5%',
borderRadius:35,
flexDirection:'row',
elevation: 1,
},
langauge_view:{
backgroundColor:'#007aff',
marginTop: '8%',
marginBottom: '8%',
marginLeft:'8%',
borderRadius: 15,
width:'30%',
justifyContent: 'center',
},
language:{
fontFamily:'IskoolaPota',
fontSize:24,
textAlign:'center',
color:'#ffffff',
justifyContent:'center',
},
instruction_view:{
marginTop: '8%',
marginBottom: '8%',
marginLeft:'5%',
justifyContent: 'center',
},
instruction:{
color:'#444444',
fontSize: 15,
},
});
export default styles;
What I want to do is to reduce the space between touchable components and put all three buttons center of the screen I tried a lot to find a way to do so but It was unable to do so. Can someone help me to achieve this one by modifying the code? Thank you

Answer 1

I don't think its a good idea to use percentages as height in this case. Right now, your TouchableOpacity is going off the screen because you have height: '46%', Since you have 3 of those, its height is 138% + padding and margins.
I prefer to use flex and use justifyContent for aligning horizontally and align-items for aligning vertically
So in your case,
langauge_card:{
flex: 1,
}
langauge_view:{
flex: 1,
alignItems: "center",
justifyContent: "center"
}
instruction_view:{
flex: 1,
alignItems: "center",
justifyContent: "center"
}
You can play around wth flex, margin, and "flex-start", "center", "flex-end" for justify content and alignItem.
Hope this helped a bit.

Answer 2

Put these styles in localization_container
{
flex: 1,
alignItems: 'center',
JustifyContent: 'center'
}
These styles will make sure items inside the child's view will be shown in the center of the screen then remove the hight of your containers (if you have any) one by one, Try to avoid usage of % as this can unpredictable.