DOCSEARCHbyAlgolia
Submit Docs

Blossom UI

website·Indexed 31 days ago

https://docs-react-native-blossom-ui.vercel.app/docs/intro

A customizable UI library for React Native designed with mobile best practices for Android and iOS. It features built-in light and dark theme support, a comprehensive design system for typography and colors, and a variety of components including overlays (Modal, Dialog, Toast, BottomSheet, Popover), date pickers, and basic UI elements like Buttons, Checkboxes, and Switches.

Tokens
31.6K
Snippets
195
Records
225
Agent score
72%

What's inside Blossom UI

  1. Overview of Blossom UI Features

    Blossom UI is a mobile component library designed according to Android and iOS design guidelines. It provides over 30 components with native support for Light and Dark themes and allows for customization at both the local and global manager levels.

  2. Overview of ShimmerView component

    The ShimmerView component is used to display loading placeholders with a shimmer animation. It supports custom shapes (rectangular or circular), custom colors, animation duration, and visibility control. It can wrap children, which are revealed when the shimmer is hidden.
    import { ShimmerView } from "@react-native-blossom-ui/components";

function Usage() {
    return (
        <ShimmerView height={140} borderRadius={20} />
    );
}

  4. Implement ActivityIndicator from @react-native-blossom-ui

    The ActivityIndicator component is an extension of the standard React Native ActivityIndicator. It provides a native loader for Android, iOS, and Web, with added support for visibility toggling and descriptive labels displayed below the indicator.
    import { ActivityIndicator } from "@react-native-blossom-ui/components";

function Usage() {
    return (
        <ActivityIndicator />
    );
}

  5. Use the Icon component for consistent vector icons

    The Icon component is a wrapper around react-native-vector-icons that allows for consistent theming, sizing, and color management across Blossom UI components.
    import { Icon } from "@react-native-blossom-ui/components";

function Usage() {
    return (
        <Icon name="add" size={24} />
    );
}

  6. Avatar component overview

    The Avatar component is used to display a user's profile image, initials, or an icon. It supports different shapes (modes) and sizes, and provides built-in fallback mechanisms for when images fail to load.
    import { Avatar } from "@react-native-blossom-ui/components";

function Usage() {
    return (
        <Avatar url="https://picsum.photos/200/300?random=1" />
    );
}

  7. Add a label to a Divider

    Use the label prop to add text inside the divider and the labelPosition prop to control its alignment. Supported positions are left, center, and right.
    <Divider label="Left" labelPosition="left" />
<Divider label="Center" labelPosition="center" />
<Divider label="Right" labelPosition="right" />

  11. Truncate blog post summaries in list view

    To limit the amount of content displayed for a blog post in the list view, insert the <!-- truncate --> HTML comment at the point where the summary should end.
    This is the summary that will appear in the list view.

<!-- truncate -->

This content will only be visible on the full blog post page.

  12. Manage Switch state and interactivity

    Control the switch's initial state using defaultValue or manage it as a controlled component using value and onValueChange. Use the disabled prop to make the switch non-interactive.
    function SwitchStateExample() {
  const [isOn, setIsOn] = useState(true);

  return (
    <View>
      {/* Uncontrolled switch with default value */}
      <Switch defaultValue={true} label="Default On" />

      {/* Controlled switch */}
      <Switch
        label="Controlled Switch"
        value={isOn}
        onValueChange={setIsOn}
      />

      {/* Disabled switch */}
      <Switch label="Disabled Switch" disabled />
    </View>
  );
}