How to add spaces between Texts React Native

September 14, 2022

I’m very new to React Native. I have texts that are listed one below the other but I want the spaces between the list to be bigger but I have no idea how to do it. Any help would be very appreciated.

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;

>Solution :

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;