Skip to content

LazyColumn put space between scrollable elements #198

@Angelk90

Description

@Angelk90

Library Version

2.0.0

React Native Version

0.86.0

React Version

19.2.3

Expo Version

53.0.0

Minimal Reproduction

Here's an example I tried, also it seems that LazyColumn forces a white background by default.

Screenshot_20260616_230238_One UI Home.jpg

import React from 'react';
import { VoltraAndroid } from '@use-voltra/android';

export const Widget = () => {
    const people = [
        { name: 'James', gender: 'male' },
        { name: 'Emma', gender: 'female' },
        { name: 'John', gender: 'male' },
        { name: 'Olivia', gender: 'female' },
        { name: 'Michael', gender: 'male' },
        { name: 'Charlotte', gender: 'female' },
        { name: 'William', gender: 'male' },
        { name: 'Amelia', gender: 'female' },
        { name: 'David', gender: 'male' },
        { name: 'Sophia', gender: 'female' },
        { name: 'Liam', gender: 'male' },
        { name: 'Ava', gender: 'female' },
        { name: 'Noah', gender: 'male' },
        { name: 'Mia', gender: 'female' },
        { name: 'Oliver', gender: 'male' },
        { name: 'Isabella', gender: 'female' },
        { name: 'Elijah', gender: 'male' },
        { name: 'Evelyn', gender: 'female' },
        { name: 'Lucas', gender: 'male' },
        { name: 'Harper', gender: 'female' },
    ];

    return (
        <VoltraAndroid.LazyColumn
            style={{
                padding: 20,
                paddingTop: 3,
                backgroundColor: '#FFFFFF00',
            }}
        >
            {people.map((item, rowIndex) => {
                return (
                    <VoltraAndroid.Row>
                        <VoltraAndroid.Box
                            key={rowIndex}
                            style={{
                                width: '100%',
                                borderRadius: 4,
                                padding: 14,
                                backgroundColor: item.gender === 'male' ? '#1E88E5' : '#d88bff'
                            }}
                        >
                            <VoltraAndroid.Text
                                style={{
                                    fontWeight: 'bold',
                                    color: '#000000',
                                }}
                            >
                                {item.name}
                            </VoltraAndroid.Text>
                        </VoltraAndroid.Box>
                        <VoltraAndroid.Spacer style={{ height: 10, width: 1, backgroundColor: '#ff0000' }} />
                    </VoltraAndroid.Row>
                );
            })}
        </VoltraAndroid.LazyColumn>
    );
};

Additional Information (Optional)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions