rn-nex-ui v0.0.27

RN NEX Ui

A sophisticated UI library crafted to enhance your React Native development workflow. Designed for simplicity and elegance, nex-ui provides a rich collection of components and utilities to effortlessly create polished mobile applications.

Table of Contents

• Dropdown
• Stack
• ActivityIndicator
• Transition
• ImageList
• CheckBox
• QuantityStepper
• Accordion
• Avatar
• Switch
• Badge
• BaseStyles
• Box
• Button
• Card
• Chip
• Dialog
• Divider
• List
• Menu
• Pagination
• Text
• TextInput
• ThemeProvider
• Portal
• Thank You

Dropdown Component

The Dropdown component provides a customizable dropdown menu that supports single and multiple item selection, optional search functionality, light and dark mode, and adornments for both the input and dropdown items.

Props

The Dropdown component accepts all props from the React Native View component, in addition to the following custom props:

DropDownData

Defines the structure of data to be displayed in the dropdown.

• id: string - Unique identifier for the dropdown item.
• title: string - Display title for the dropdown item.

DropDownListContainerProps<T extends DropDownData>

Props for the container that renders the list of dropdown items, extending from ViewProps and FlatListProps.

• open?: boolean - Indicates whether the dropdown is open.
• maxHeight?: number - Maximum height of the dropdown container when open.
• onClose?: () => void - Callback triggered when the dropdown closes.
• inputLayoutRectangle: LayoutRectangle - Layout rectangle for the input element.
• dropDownContainerRect: MeasureElementRect - Measured dimensions of the dropdown container element.
• onItemClicked?: (item: DropDownData) => void - Callback triggered when an item is clicked.
• selectedListItems?: Array<DropDownData> | null - Currently selected dropdown items.
• showSelectedItem?: boolean - Whether to display the selected item in the dropdown list.
• listItemEndAdornment?: React.ReactNode - React node displayed at the end of each list item.
• listItemStartAdornment?: React.ReactNode - React node displayed at the start of each list item.
• activeItemColor?: ColorValue - Color applied to the active or selected dropdown item.
• listItemTextProps?: Pick<ListItemTextProps, 'disablePadding' | 'alignItems'> - Props for styling the text inside list items.
• listItemMinHeight?: number - Minimum height for each list item in the dropdown.
• displaySelectedAdornment?: boolean - Whether to show an adornment for the selected item.
• disableTextPadding?: boolean - Removes padding from the list item text component.
• multiselect?: boolean - Allows multiple items to be selected.
• search?: boolean - Enables or disables the search functionality.
• searchPlaceholder?: string - Placeholder text inside the search input when it is empty.
• searchProps?: IconInputProps - Customizes the search input, allowing styling, events, or icons.
• searchContainerProps?: Omit<BoxProps, 'children'> - Props for customizing the search container.

DropDownProps<T extends DropDownData>

The primary props interface for the dropdown component, extending from View and omitting some properties from DropDownListContainerProps.

• inputStartAdornment?: React.ReactNode - React node displayed at the start of the input field (e.g., an icon).
• inputEndAdornment?: React.ReactNode - React node displayed at the end of the input field (e.g., an icon).
• placeholder?: string - Placeholder text for the input field when no value is selected.
• listContainerProps?: Omit<DropDownListContainerProps<T>, 'open' | 'onClose' | 'inputLayoutRectangle' | 'dropDownContainerRect'> - Props for customizing the dropdown list container.
• variation?: TextFiledVariation | 'icon' - Allows different styles or icons for the input field.
• onDropDownClicked?: (event: GestureResponderEvent) => void - Callback triggered when the dropdown input field is clicked.
• onListItemClicked?: (event: GestureResponderEvent, item: DropDownData) => void - Callback triggered when a dropdown item is clicked.
• multiselectMessage?: string - Message displayed when multiple items are selected.
• onItemClicked?: (item: Array<DropDownData>) => void - Callback triggered when selected items are confirmed.

Examples

import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import { Avatar, Container, DropDown, ThemeProvider } from 'rn-nex-ui/src';

const DATA = [
  { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', title: 'First Item' },
  { id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', title: 'Second Item' },
  { id: '58694a0f-3da1-471f-bd96-145571e29d72', title: 'Third Item' },
  { id: '58694a0f-3da1-471f-bd96-145571e29d12', title: 'Four Item' },
  { id: '58694a0f-3da1-471f-bd96-145571e29415', title: 'Five Item' },
  { id: '58694a0f-3da1-471f-bd96-145571e29419', title: 'Six Item' },
  { id: '58694a0f-3da1-471f-bd96-145571e29412', title: 'Seven Item' },
];

function App(): React.JSX.Element {
  return (
    <SafeAreaView>
      <ScrollView>
        <Container>
          <ThemeProvider>
            <DropDown
              onItemClicked={item => console.log(item)}
              listItemEndAdornment={
                <Avatar
                  source={{
                    uri: 'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
                  }}
                  size={20}
                  variation="rounded"
                />
              }
              displaySelectedAdornment
              inputStartAdornment={
                <Avatar
                  source={{
                    uri: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
                  }}
                  size={30}
                  variation="rounded"
                />
              }
              variation="outlined"
              data={DATA}
            />
          </ThemeProvider>
        </Container>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

Stack Component

The Stack component is a layout utility that arranges its children in a row or column with optional spacing.

Props

The Stack component accepts all props from the Box component, in addition to the following custom props:

• spacing?: number - Defines the spacing between children in the stack (default: 0).
• direction?: 'column' | 'row' - Defines the direction of the stack layout, either vertically (column) or horizontally (row) (default: row).
• display?: FlexStyle['display'] - Controls the display style, typically flex.
• justifyContent?: FlexStyle['justifyContent'] - Adjusts how children are aligned along the main axis (e.g., flex-start, center).
• alignItems?: FlexStyle['alignItems'] - Controls how children are aligned along the cross axis (e.g., stretch, center).
• flex?: FlexStyle['flex'] - Allows the stack to grow and shrink based on the available space.
• flexWrap?: FlexStyle['flexWrap'] - Controls whether the stack's children should wrap onto multiple lines.
• padding?: ViewStyle['padding'] - Sets the padding for the stack component.
• margin?: ViewStyle['margin'] - Sets the margin for the stack component.

ActivityIndicator Component

The ActivityIndicator component displays a loading indicator in your React Native application.

Props

The ActivityIndicator component accepts all props from the React Native ActivityIndicator component, in addition to the following props:

• size?: 'small' | 'large' - Size of the indicator (default: 'small').
• color?: string - Color of the indicator (default: system default).

Examples

import React from 'react';
import { Box, ActivityIndicator } from 'rn-nex-ui/src';

export const Ex1: React.FC = () => {
  return (
    <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <ActivityIndicator size="small" />
    </Box>
  );
};

ImageList Component

The ImageList component is designed to display a list of images with customizable styling options. It extends the properties of the React Native ScrollView component. Additional subcomponents, ImageListItem and ImageListItemBar, provide further customization options for individual items within the list.

ImageListProps

Interface for properties that can be passed to the ImageList component, extending the React Native ScrollView component.

• ... - (Inherits all props from ScrollView)

ImageListItemProps

Interface for properties that can be passed to an individual item (ImageListItem) within the ImageList.

ImageListItemBarProps

Interface for properties that can be passed to the ImageListItemBar component, which provides additional information for an ImageListItem.

Examples

import React from 'react';
import { Avatar, Box, Image, ImageList, ImageListItem, ImageListItemBar } from 'rn-nex-ui/src';

export const App: React.FC = () => {
  return (
    <Box>
      <ImageList
        style={{
          width: '100%',
          marginTop: 100,
          height: '80%',
        }}>
        {itemData.map(item => (
          <ImageListItem items={2} key={item.img}>
            <Image
              source={{
                uri: `${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`,
              }}
              sx={{ w: '100%' }}
              height={140}
            />
            <ImageListItemBar
              subtitle={item.author}
              title={item.title}
              endAdornment={
                <Avatar
                  source={{
                    uri: 'https://imgs.search.brave.com/IA-a4lUg47kM0FW6vtr7Lz_eIaEWKTc1EHlAv1FFPVg/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9idXJz/dC5zaG9waWZ5Y2Ru/LmNvbS9waG90b3Mv/YS1kcm9wLW9mLXBp/bmstYW5kLXllbGxv/dy1wYWludC1pbi13/YXRlci5qcGc_d2lk/dGg9MTAwMCZmb3Jt/YXQ9cGpwZyZleGlm/PTAmaXB0Yz0w',
                  }}
                  size={30}
                  variation="rounded"
                />
              }
            />
          </ImageListItem>
        ))}
      </ImageList>
    </Box>
  );
};

const itemData = [
  {
    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
    title: 'Breakfast',
    author: '@bkristastucchio',
  },
  {
    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
    title: 'Burger',
    author: '@rollelflex_graphy726',
  },
];

Transition Animation Components

These components provide various transition animations to apply to child elements. All specific animation components extend from BaseTransitionProps, which defines common properties.

BaseTransitionProps

WobbleProps

The WobbleProps interface inherits from BaseTransitionProps and uses default wobble animation parameters.

BounceProps

The BounceProps interface inherits from BaseTransitionProps with an additional height property.

FadeProps

The FadeProps interface inherits from BaseTransitionProps and applies fading animation parameters. It excludes repeatCount.

FlashProps

The FlashProps interface inherits from BaseTransitionProps and applies flash animation parameters.

PulseProps

The PulseProps interface inherits from BaseTransitionProps with an additional scale property.

ShakeProps

The ShakeProps interface inherits from BaseTransitionProps with an additional type property.

TadaProps

The TadaProps interface inherits from BaseTransitionProps and applies tada animation parameters.

HeartBeatProps

The HeartBeatProps interface inherits from BaseTransitionProps and applies heartbeat animation parameters.

BackInProps

The BackInProps interface inherits from BaseTransitionProps with additional type and initialValue properties. It excludes repeatCount.

FadingProps

The FadingProps interface excludes repeatCount from BaseTransitionProps and adds a type property.

FlipProps

The FlipProps interface inherits from BaseTransitionProps with an additional type property.

SlideProps

The SlideProps interface inherits from BaseTransitionProps with additional type, fromValue, and toValue properties.

CheckBox Component

The CheckBox component is a customizable checkbox for React Native applications. It allows users to create checkboxes with various states, including checked, unchecked, and indeterminate, along with customizable styles and adornments.

Props

QuantityStepper Component

The QuantityStepper component is a customizable stepper for React Native applications. It allows users to increment or decrement a numeric value with configurable styles, callbacks, and constraints.

Props

Accordion Component

The AccordionSummary component is a customizable component for displaying collapsible content in a React Native application. It offers various properties to control the appearance and behavior of the accordion.

Props

The AccordionSummary component accepts all props from the React Native TouchableWithoutFeedback component, in addition to the following props:

The AccordionDetails component accepts all props from the React Native View component, in addition to the following props:

• disable?: boolean - Disables the accordion details.

Example

<Accordion square>
  <AccordionSummary
    bottomBorder
    expandIcon={<Text>d</Text>}
    accordionDetails={
      <AccordionDetails>
        <Text variation="h5">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam expedita, aut aspernatur odio fugiat harum temporibus
          inventore asperiores eaque sunt.
        </Text>
      </AccordionDetails>
    }>
    <Text>Accordion 1</Text>
  </AccordionSummary>
  <AccordionSummary
    topBorder
    expandIcon={<Text>d</Text>}
    accordionDetails={
      <AccordionDetails>
        <Text variation="h5">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam expedita, aut aspernatur odio fugiat harum temporibus
          inventore asperiores eaque sunt.
        </Text>
      </AccordionDetails>
    }>
    <Text>Accordion 2</Text>
  </AccordionSummary>
</Accordion>

Avatar Component

The Avatar component is a versatile component that displays an image with various styling options. It extends the properties of the React Native Image component and includes additional styling options for variations and size.

Props

The Avatar component accepts all props from the React Native Image component, in addition to the following props:

Examples

import React from 'react';
import { Avatar, Box } from 'rn-nex-ui/src';

export const Ex1: React.FC = () => {
  return (
    <Box sx={{ f: 1, d: 'flex', items: 'center', content: 'center' }}>
      <Avatar source={{ uri: 'your-image-source' }} sx={{ w: 100, h: 100, o: 0.9, bg: 'red', d: 'flex' }} />
    </Box>
  );
};

Switch Component

The Switch component is a customizable toggle switch for React Native applications. It allows users to toggle between "on" and "off" states with smooth animations and customizable styles.

Props

Example Usage

import React, { useState } from 'react';
import { Switch } from './Switch';
import { View, Text, StyleSheet } from 'react-native';

const Example = () => {
  const [isOn, setIsOn] = useState(false);

  const handleToggle = newState => {
    setIsOn(newState);
  };

  return (
    <View style={styles.container}>
      <Text>{`Switch is ${isOn ? 'On' : 'Off'}`}</Text>
      <Switch
        initialToggleState={isOn}
        onToggle={handleToggle}
        toggleDuration={300}
        thumbStyles={styles.thumb}
        style={styles.switch}
        sx={styles.additionalStyles}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  switch: {
    marginTop: 20,
  },
  thumb: {
    backgroundColor: 'blue',
  },
  additionalStyles: {
    borderColor: 'gray',
    borderWidth: 1,
  },
});

Badge Component

The Badge component is a flexible component for displaying badges with various styles, variants, and positioning options. It extends the properties of the React Native View component and includes additional options for customization.

Props

The Badge component accepts all props from the React Native View component, in addition to the following props:

Examples

import React from 'react';
import { Badge, Box, useTheme } from 'rn-nex-ui/src';

export const Ex1: React.FC = () => {
  const { theme } = useTheme();

  return (
    <Box sx={{ f: 1, d: 'flex', items: 'center', content: 'center' }}>
      <Badge badgeContent={100}>
        <Box sx={{ w: 200, h: 50, bg: theme.colors.grey[400], r: 10 }} />
      </Badge>
    </Box>
  );
};

BaseStyles Interface

Overview

The BaseStyles interface provides a mapping of style properties used in React Native development. These styles can be accessed and applied to components for consistent styling throughout your application.

Props

Box Component

The Box component is a versatile container element that allows for easy layout and styling in React Native applications.

Props

• sx' - Object containing style properties for the Box (uses BaseStyles from styleTypes).
• children - React node(s) to be rendered inside the Box..

Examples

import React from 'react';
import { Box, Text, useTheme } from 'rn-nex-ui/src';

export const Ex1: React.FC = () => {
  return (
    <Box sx={{ f: 1, d: 'flex', items: 'center', content: 'center' }}>
      <Box
        sx={{
          w: 50,
          h: 50,
          bg: 'white',
          r: 10,
          sColor: 'red',
          sOffset: { width: 0, height: 1 },
          sOpacity: 0.8,
          sRadius: 1,
        }}
      />
    </Box>
  );
};

GenerateContainerStylesProps Interface

Props interface for generating styles for the Container component.

• maxWidth?: ContainerMaxWidth - The maximum width of the Container to generate styles for.
• disableGutters?: boolean - Whether to disable gutters when generating styles for the Container.

Button Component

The Button component provides an interactive element that users can tap to trigger an action in your React Native application.

Props

Examples

<Button onPress={() => console.log('pressed')}>
  <Text>Click here</Text>
</Button>

Card Component

The Card component is used to display content in a visually appealing card format in your React Native application.

Interfaces

CardProps

The CardProps interface defines the properties that can be passed to a card component.

Props

• sx?: BaseStyles: Additional styles for the card container.
• children?: React.ReactNode: Children elements to be rendered within the card.
• variation?: CardVariations: Variation of the card, such as 'outlined' or undefined.

CardMediaProps

The CardMediaProps interface extends from ImageProps and defines the properties for the card media component.

CardHeaderProps

The CardHeaderProps interface defines the properties for the card header component.

Props

• sx?: BaseStyles: Additional styles for the card header.
• children?: React.ReactNode: Children elements to be rendered within the card header.

CardContentProps

The CardContentProps interface extends from CardHeaderProps and defines the properties for the card content component.

CardActionProps

The CardActionProps interface extends from BaseButtonProps and defines the properties for the card action component.

Examples

import React from 'react';
import { Avatar, Box, Card, CardHeader, CardMedia, CardContent, Text, useTheme } from 'rn-nex-ui/src';

export const Ex1: React.FC = () => {
  const { theme } = useTheme();

  return (
    <Box sx={{ f: 1, d: 'flex', items: 'center', content: 'center', px: 10, fDirection: 'column', gap: 10 }}>
      <Card sx={{ maxW: 350, bg: theme.colors.grey[500], r: 10, overflow: 'hidden' }}>
        <CardHeader sx={{ p: 10, d: 'flex', items: 'center', fDirection: 'row', gap: 10 }}>
          <Avatar source={{ uri: 'your-image-source' }} size={40} variation="rounded" />
          <Box>
            <Text>Shrimp and Chorizo Paella</Text>
            <Text variation="h5">September 14, 2016</Text>
          </Box>
        </CardHeader>
        <CardMedia src="card-media-image" sx={{ w: 'auto', h: 200 }} />
        <CardContent sx={{ px: 10, py: 10 }}>
          <Text variation="h5">
            This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen
            peas along with the mussels, if you like.
          </Text>
        </CardContent>
        <Box sx={{ py: 10, px: 10, d: 'flex', items: 'center', content: 'flex-end' }}></Box>
      </Card>
    </Box>
  );
};

Chip Component

The Chip component is used to represent small blocks of information or actions in a compact manner.

Interfaces

ChipProps

The ChipProps interface defines the properties that can be passed to a chip component.

Props

• label?: string: The label text to display inside the chip.
• labelContainerProps?: Omit<TextProps, 'children'>: Props to be passed to the label text component.
• variant?: ChipVariant: The variant of the chip, either 'outlined' or 'filled'.
• endAdornment?: React.ReactNode: A React node to be displayed at the end of the chip.
• endAdornmentContainerStyle?: StyleProp<ViewStyle>: Style for the end adornment container.
• endAdornmentTouchableProps?: Omit<TouchableWithoutFeedbackProps, 'children' | 'style'>: Props to be passed to the touchable component wrapping the end adornment.
• startAdornment?: React.ReactNode: A React node to be displayed at the start of the chip.
• startAdornmentContainerStyle?: StyleProp<ViewStyle>: Style for the start adornment container.
• startAdornmentTouchableProps?: Omit<TouchableWithoutFeedbackProps, 'children' | 'style'>: Props to be passed to the touchable component wrapping the start adornment.
• color?: ChipVariations: The color variation of the chip.

GenerateChipStylesProps

The GenerateChipStylesProps interface extends from ChipProps and defines additional properties for generating chip styles.

Examples

Below are examples demonstrating the usage of the Chip component:

import React from 'react';
import { Box, Chip } from 'rn-nex-ui/src';

const ChipExamples: React.FC = () => {
  return (
    <Box
      sx={{
        f: 1,
        d: 'flex',
        items: 'center',
        content: 'center',
        px: 10,
        fDirection: 'column',
        gap: 10,
      }}>
      <Chip label="Chip" />
      <Chip label="Outlined chip" variant="outlined" />
      <Chip label="Custom chip" variant="outlined" labelContainerProps={{ style: { color: 'green' } }} />
      <Chip label="Disabled chip" variant="outlined" disabled />
      <Chip
        label="Chip with start adornment chip"
        variant="outlined"
        startAdornment={<Avatar source={{ uri: 'your-image-source' }} size={25} variation="rounded" />}
      />
      <Chip
        label="Chip with start adornment chip"
        variant="outlined"
        startAdornment={
          <IconButton onPress={() => console.log('pressed')}>
            <Avatar source={{ uri: 'your-image-source' }} size={25} variation="rounded" />
          </IconButton>
        }
      />
    </Box>
  );
};

Dialog Component

The Dialog component is used to display a popup dialog with customizable content and actions.

Interfaces

DialogTitleProps

The DialogTitleProps interface defines the properties that can be passed to a dialog title component.

Props

• variation?: string: The variation of the dialog title.

DialogProps

The DialogProps interface extends PortalProps and defines additional properties for the dialog component.

Props

• dialogContainerProps?: Omit<BoxProps, 'children'>: Props to be passed to the dialog container.

DialogActionsProps

The DialogActionsProps interface extends BoxProps and defines additional properties for the dialog actions component.

Props

• dialogActionsContainerProps?: Omit<BoxProps, 'children'>: Props to be passed to the dialog actions container.

Examples

Below are examples demonstrating the usage of the Dialog component:

export const Ex1: React.FC = () => {
  const [showDialog, setShowDialog] = useState(false);

  return (
    <PortalProvider key="un">
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          paddingHorizontal: 10,
        }}>
        <Dialog visible={showDialog} portalKey="modal_key" onClose={() => setShowDialog(false)}>
          <DialogTitle>Subscribe</DialogTitle>
          <DialogContent>
            <DialogContentText gutterBottom>
              To subscribe to this website, please enter your email address here. We will send updates occasionally.
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button
              style={{
                paddingHorizontal: 30,
                paddingVertical: 8,
                borderRadius: 0,
              }}
              variation="text"
              onPress={() => setShowDialog(false)}>
              <Text>Close</Text>
            </Button>
          </DialogActions>
        </Dialog>
        <Button fullWidth onPress={() => setShowDialog(!showDialog)}>
          <Text>Open</Text>
        </Button>
      </View>
    </PortalProvider>
  );
};

Divider Component

The Divider component is used to create a visual divider between sections of content.

Interfaces and Types

DividerVariants

Variants for the divider, specifying its appearance.

• 'fullWidth': The divider spans the full width or height of its container.
• 'middle': The divider is centered within its container, with additional spacing considerations.

DividerOrientation

Orientation of the divider.

• 'horizontal': The divider is oriented horizontally.
• 'vertical': The divider is oriented vertically.

DividerChildAlignment

Alignment options for a child component within the divider.

• 'left': The child component is aligned to the left.
• 'right': The child component is aligned to the right.
• 'center': The child component is centered.

DividerProps

Props for the Divider component, extending the base View component props.

Props

• variant?: DividerVariants: Specifies the variant of the divider.
• textAlign?: DividerChildAlignment: Specifies the alignment of a child component within the divider.
• orientation?: DividerOrientation: Specifies the orientation of the divider.
• dividerBorderStyles?: StyleProp<ViewStyle>: Custom style for the divider border elements.
• leftDividerBorderStyle?: StyleProp<ViewStyle>: Specifies styles for the left divider border element.
• rightDividerBorderStyle?: StyleProp<ViewStyle>: Specifies styles for the right divider border element.

DividerRootContainerProps

Props for the root container of the Divider, extending base View props and including relevant divider props.

Props

• variant?: DividerVariants: Specifies the variant of the divider.
• orientation?: DividerOrientation: Specifies the orientation of the divider.

GenerateDividerStylesProps

Props for generating the styles of the Divider.

Props

• variant?: DividerVariants: Specifies the variant of the divider.
• textAlign?: DividerChildAlignment: Specifies the alignment of a child component within the divider.
• orientation?: DividerOrientation: Specifies the orientation of the divider.
• theme: ThemeType: Theme object for styling.
• dividerType: 'left' | 'right': Specifies the type of the divider, either 'left' or 'right'.
• childWrapperLayoutRect?: LayoutRectangle: Layout rectangle of the child wrapper, if it exists.
• hasChild?: boolean: Indicates whether the divider has a child component.
• dividerRootLayoutRect?: LayoutRectangle: Layout rectangle of the root divider.

You can use these interfaces and types as props and options when using the Divider component in your React Native application.

Examples

export const Ex1: React.FC = () => {
  const { theme } = useTheme();

  return (
    <Box sx={{ f: 1, d: 'flex', items: 'center', content: 'center', px: 10 }}>
      <Box sx={{ w: 350, bg: theme.colors.grey[800], r: 2, pb: 20 }}>
        <Box sx={{ p: 10 }}>
          <Text>This is first line</Text>
        </Box>
        <Divider />
        <Box sx={{ p: 10 }}>
          <Text>This is second line</Text>
        </Box>
        <Divider variant="middle" />
        <Box sx={{ p: 10 }}>
          <Text>Other line</Text>
        </Box>
        <Divider variant="fullWidth" />
        <Box sx={{ p: 10 }}>
          <Text>Other line</Text>
        </Box>
        <Divider>
          <Text>Center</Text>
        </Divider>
        <Box sx={{ p: 10 }}>
          <Text>Other line</Text>
        </Box>
        <Divider textAlign="right">
          <Text>Right</Text>
        </Divider>
        <Box sx={{ p: 10 }}>
          <Text>Other line</Text>
        </Box>
        <Divider textAlign="left">
          <Text>Left</Text>
        </Divider>
        <Bo