I have texts listed one below the other. I want the spaces between the list to be bigger but I have no idea how to do it.
const CustomInput = () => {
return (
<View style={styles.container}>
<Text>Book Titles</Text>
<Text>Genre</Text>
<Text>Author</Text>
<Text>Number of pages</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
height: '50%',
borderColour: '#e8e8e8',
borderWidth: 1,
borderRadius: 5,
paddingHorizontal: 10,
marginVertical: 5,
},
});
export default CustomInput;
CodePudding user response:
Vertically space added between your text
const CustomInput = () => {
return (
<View style={styles.container}>
<Text>Book Titles</Text>
<Text>Genre</Text>
<Text>Author</Text>
<Text>Number of pages</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
height: '50%',
borderColour: '#e8e8e8',
borderWidth: 1,
borderRadius: 5,
justifyContent:'space-between',
paddingHorizontal: 10,
marginVertical: 5,
},
});
export default CustomInput;
Horizontally space added between your text
const CustomInput = () => {
return (
<View style={styles.container}>
<Text>Book Titles</Text>
<Text>Genre</Text>
<Text>Author</Text>
<Text>Number of pages</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
height: '50%',
flexDirection:'row',
borderColour: '#e8e8e8',
borderWidth: 1,
borderRadius: 5,
justifyContent:'space-between',
paddingHorizontal: 10,
marginVertical: 5,
},
});
export default CustomInput;