DOCSEARCHbyAlgolia
Submit Docs

React Native Elements Documentation

website·Indexed 35 days ago

https://reactnativeelements.com/

A comprehensive UI toolkit for React Native featuring a wide array of customizable components including ListItems, Dialogs, SearchBars, Skeletons, and PricingCards. The documentation covers version 5.0.0, 4.0.0-rc.8, and bleeding edge releases, providing guidance on theme customization, TypeScript extensions, and component implementation.

Tokens
343.6K
Snippets
2K
Records
2.9K
Agent score
53%

What's inside React Native Elements

  1. Overview of the React Native Elements Image component

    The Image component is a drop-in replacement for the standard React Native Image component. It provides built-in support for displaying placeholders and implementing smooth transitions when an image finishes loading.

  2. Overview of the AirbnbRating component

    The AirbnbRating component is used to collect measurable feedback from users through a visual rating interface. It is a 'Tap Rating' version of the rating system and is imported from the react-native-ratings library.

  3. Overview of ButtonGroup component

    The ButtonGroup component is a linear set of segments where each segment functions as a button. It is primarily used to offer choices that are closely related but mutually exclusive. The component inherits all native TouchableHighlight and TouchableOpacity props from React Native.

  4. Overview of ListItem sub-components

    The ListItem component is used to display rows of information (e.g., contact lists, menus). It is highly customizable via the following sub-components:

    • ListItem.Accordion: Creates a collapsible list to show/hide content.
    • ListItem.ButtonGroup: Integrates a ButtonGroup into the item (inherits ButtonGroup props).
    • ListItem.CheckBox: Integrates a CheckBox into the item (inherits CheckBox props).
    • ListItem.Chevron: Adds a chevron arrow icon (inherits Icon props).
    • ListItem.Content: A wrapper for the main content of the item (inherits View props).
    • ListItem.Input: Adds a text input within the item (inherits Input props).
    • ListItem.Subtitle: Adds a subtitle (inherits Text props).
    • ListItem.Swipeable: A specialized item that can be swiped from both ends to reveal actions.
    • ListItem.Title: Adds a title (inherits Text props).

  5. Overview of the Tile component

    The Tile component is used to display related content about a single subject, similar to Cards. It inherits all props from TouchableNativeFeedback on Android and TouchableOpacity on iOS.

  6. Overview of the Floating Action Button (FAB) component

    The Floating Action Button (FAB) is used to perform the primary or most common action on a screen. It is rendered in front of all screen content, typically as a circular shape with a center icon. The FAB component inherits all props available to the standard Button component.

  8. Use the Avatar component

    The Avatar component is used to represent users in UI designs (e.g., lists or profile screens). It can display a photo via the source prop, an icon via the icon prop, or text via the title prop. If both source and icon are provided, the icon serves as the placeholder while the image loads.

  10. Configure the LinearProgress component

    The LinearProgress component provides a visual indicator for ongoing processes. It supports two modes: 'determinate' (where a specific value is tracked) and 'indeterminate' (where a continuous animation is shown). It also inherits all standard React Native View props.

  11. Use specialized ListItem variants

    Beyond the basic ListItem, the library provides specialized variants for specific interaction patterns:

    • ListItem.Accordion: Used for collapsible list items.
    • ListItem.Swipeable: Used for items that can be swiped to reveal actions.
    • ListItem.CheckBox: Used for list items that function as checkboxes.

  12. Use the Divider component for visual content separation

    The Divider component is used to create visual separators between sections of content. It supports customization of color, orientation, insets, and the addition of a sub-header. Because it is built on top of the React Native View, it accepts all standard View props.