Divider

This is a component that creates empty space between elements, functioning as a native divider. It's useful when you want to visually separate different parts of your interface without adding visible lines.

NOTE

Lists, Items and Buttons already have native spacing.

Light Theme
Dark Theme

Light Theme

Usage

import React from 'react';
import { ScrollView } from 'react-native';

// React Native UI DevKit
import { Divider, List, Item, Button } from 'react-native-ui-devkit';

const App = () => {
    return (
        <ScrollView>
            <Divider />
            <Item data={{ title: 'Item 1' }} marginTop={false} />
            <Divider />
            <Item data={{ title: 'Item 2' }} marginTop={false} />
            <Divider />
            <List data={[
                { title: 'Item 1' },
                { title: 'Item 2' }
            ]} marginTop={false} />
            <Divider />
            <Button blue data={{ title: 'Button', onPress: async () => { } }} marginTop={false} />
        </ScrollView>
    );
}

export default App;

This component does not accept any props.

Usage​

Usage