How do I put space between each element of a list?

Question

I have an appendable list of View and I want to add space to between each element of my list.

Here is an overview of my code -

    list = []
    function func(){
        button(){
            list.append(
                 <View style = {1}> 
                      ...
                      ...
                      ...
                 <\View>
             )
        }

        return(
            <View>
                 <View>
                      <Text onPress = {() => button()}> + </Text> 
                 <\View>

                 <ScrollView style = {3}>
                      <View style = {2}>
                          {list}
                      <\View>
                 <\ScrollView>
            <\View>
        ) 
}

My app currently looks something like this -

My question is which CSS component should I style - {1}, {2} or {3}?

Here is my actual code -

import React, { Component, useState, useEffect } from "react";
import {
  View, 
  Text,
  StyleSheet,
  TextInput, 
  ScrollView
} from 'react-native';

function WeatherApp(){
    const [data, setData] = useState([])
    const[i, setI] = useState(0)
    
    const dates = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    const temperatures = [20, 21, 26, 19, 30, 32, 23, 22, 24]
    const cities = ['LA', 'SAN', 'SFO', 'LGA', 'HND', 'KIX', 'DEN', 'MUC', 'BOM']

    const buttonPressed = () => {
        if(i < 9){
            data.push(
                <View style = {styles.weatherBoard}>
                    <Text key = {dates[i]} style = {styles.date}>{dates[i]}</Text>
                    <Text key = {temperatures[i]} style = {styles.temperature}>{temperatures[i]}</Text>
                    <Text key = {cities[i]} style = {styles.cityName}>{cities[i]}</Text>
                </View>
            )
            setData(data)
            setI(i => i + 1)
        }
    }
    useEffect(()=>{}, [i])
    return(
        <View style = {styles.appBackground}>
            <View style = {styles.searchBar}>
                <TextInput style = {styles.searchText} placeholder = "Search City"></TextInput>
                <Text onPress={() => buttonPressed()} style = {styles.addButton}>+</Text>
            </View>
            
            {/* ScrollView can only have one view in it */}
            <ScrollView style = {styles.weatherPanel} >
                <View>
                    {data}
                </View>
            </ScrollView>

        </View>
    )
}

Here is my css file -

const styles = StyleSheet.create({
    appBackground:{
        flex: 1,
        backgroundColor: 'black', 
        flexDirection: 'column'
    },

    searchBar:{
        flex: 0.1,
        flexDirection: 'row',
        backgroundColor: 'white', 
        fontSize: 25
    },
    searchText:{
        flex: 8,
        borderWidth: 1
    },
    addButton:{
        flex: 2,
        textAlign: 'center',
        fontSize: 40,
        borderWidth: 1
    },
    // Place where all cities' weather are shown
    weatherPanel:{
        flex: 0.9,
        flexDirection: 'column',
        padding: 15
    },

    // Style for each city 
    weatherBoard:{
        flex: 9, 
        backgroundColor: 'blue',
        borderRadius: 10,
        padding: 10
    },

    // Temorary styles - 
    date: {
        fontSize: 20,
        color: 'white'
    },
    temperature:{
        fontSize: 30
    },
    cityName:{
        fontSize: 30
    }
})

Does this answer your question? [Space between components in React Native styling](https://stackoverflow.com/questions/45503294/space-between-components-in-react-native-styling) — Henry Woody, Dec 04 '22 at 01:51
That doesn't change anything as it relates to styling and spacing elements. — Henry Woody, Dec 04 '22 at 01:54
I tried their way, but it wasn't working. So I assumed the reason might be because I am using list. — Parth Gupta, Dec 04 '22 at 01:57
To use that solution, just put `padding: 10` in the `1` slot you have. — Henry Woody, Dec 04 '22 at 01:58
So are you suggesting to put `padding` for each element ? Edit: It is not working — Parth Gupta, Dec 04 '22 at 02:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/250126/discussion-between-jezues-and-henry-woody). — Parth Gupta, Dec 04 '22 at 02:07
You can give margin bottom with required space. For list item view for 1 — Sujit Libi, Dec 04 '22 at 02:10

score 1 · Accepted Answer · edited Dec 04 '22 at 03:21

1

Placing a style={{marginTop: 12}} should be fine

list.append(
    <View style={{marginTop: 12}}> 
       ...
       ...
       ...
    </View>
)

edited Dec 04 '22 at 03:21

Abe

4,500
2
11
25

answered Dec 04 '22 at 02:24

Jason Lee

26
2

It worked. Could you tell me why padding and other styles were not working? – Parth Gupta Dec 04 '22 at 02:30
1

@Jezues padding doesn't add space between elements. It adds to the height and width (e.g., style weatherBoard would add 10px width to the left and right side and 10px at the top and bottom. It would work if you had another outer view where it has the padding and the inner view will contain the style of the weather board. Technically, there would still be no spaces between the elements but it will give the illusion that it has since the outerview(the one with padding) would have no background color only the innerview will have the background color – fctmolina Dec 04 '22 at 03:33
@fctmolina dont I have an outer view as ScrollView and View as the inner view? – Parth Gupta Dec 05 '22 at 02:52
@Jezues. The ScrollView encompasses all items on the list. If you're gonna use padding. You need to have an Outer view for each item on the list and set the padding there. Padding will add width and height to the outer view but the item inside still has the same width and height and centered on the outer view which will give the look where each item has a gap between each other since only the outerviews are touching each other Or to make it simpler just add margin on each item on the list – fctmolina Dec 12 '22 at 00:24

score 1 · Answer 2 · answered Dec 04 '22 at 14:41

1

You can use ItemSeparatorComponent property for your list and provide any separator component you want. https://reactnative.dev/docs/virtualizedlist#itemseparatorcomponent

answered Dec 04 '22 at 14:41

Kirill Novikov

2,576
4
20
33

How do I put space between each element of a list?

2 Answers2