DOCSEARCHbyAlgolia
Submit Docs

NativeFlow UI Library

website·Indexed 30 days ago

https://nexara-nativeflow-docs.onrender.com

A UI library for building responsive interfaces with pre-styled components including Button, Grid, Stack (HStack, VStack), Avatar, and UserInput. Features customizable props for styling and supports installation via npm, yarn, and expo. Currently in pre-release v0.1.13.

Tokens
8.4K
Snippets
52
Records
54
Agent score
56%

What's inside NativeFlow

  1. Overview of the React Native UI Library

    This React Native UI library (currently in pre-release v0.1.13) provides a set of modern components designed for building responsive user interfaces. Key features include:

    • Responsive Design: Components automatically adjust size based on screen dimensions.
    • Adaptive Theming: Built-in support for Light, Dark, and custom themes.
    • Customizability: Components are configurable via flexible props and dynamic styling.
    • Modern Aesthetics: Includes smooth animations and transitions.

  2. Use the Chip component for tags and categories

    The Chip component from @nexara/nativeflow renders a compact, customizable element used for tags, categories, or selectable items. It supports optional left and right icons and is interactive via an onPress handler.
    import { Chip } from '@nexara/nativeflow';
import { Camera } from 'lucide-react-native';

const Component = () => {
  return (
    <Chip 
      label="Camera"
      renderLeftIcon={<Camera color='#000' size={14} />} 
      onPress={() => console.log('Chip pressed')}
    />
  );
}
export default Component;

  3. Use the Surface component to create customizable containers

    The Surface component renders a container with customizable padding, border radius, and visual styles (elevated or outlined). It is used as a versatile wrapper for other components.

    Note: This component is currently experimental and may change in future releases.

    import { Surface, Button } from '@nexara/nativeflow';
import { Camera } from 'lucide-react-native';

const Component = () => {
  return (
    <Surface>
        <Button
          renderIcon={<Camera size={17} />} 
        />
    </Surface>
  );
}
export default Component;

  5. Set up PortalProvider for Dialog usage

    To use the Dialog component, you must wrap your application's root component with both NativeProvider and PortalProvider from the @nexara/nativeflow library.
    import { PortalProvider, NativeProvider } from '@nexara/nativeflow';
import Component from './path';

const App = () => {
    return (
        <NativeProvider>
            <PortalProvider>
                <Component/>
            </PortalProvider>
        </NativeProvider>
    )
}
export default App;

  6. Control Dialog programmatically via Ref

    The Dialog component exposes a ref of type DialogRefProps that allows developers to trigger the dialog's visibility from external components.
    // Methods available on the Dialog ref:

 dialogRef.current.open();  // Opens the dialog
 dialogRef.current.close(); // Closes the dialog

  8. Apply typography variants to StyledText

    Use the variant prop to set the default text color based on the content's role:
    // Available variants:
'primary'   // Default text color for standard content
'secondary' // Secondary text color, usually less prominent
'tertiary'  // Tertiary text color, used for hints or info
'disabled'  // Color for disabled or inactive text
'inverse'    // Color for text over dark backgrounds

  9. Configure Grid component props

    The Grid component uses the following props to control layout, spacing, and responsiveness. The grid system defaults to a total of 12 columns.
    interface GridProps {
  container: boolean;       // Default: false. Acts as a grid container.
  item: boolean;            // Default: false. Acts as a grid item (must be inside a container).
  spacing: number;          // Default: 0. Gap between grid items.
  spacingH: number;         // Default: 0. Horizontal padding (left & right) of the container.
  spacingV: number;         // Default: 0. Vertical padding (top & bottom) of the container.
  size: number;             // Default: 12. Total number of columns in the grid system.
  xs: number;               // Default: 12. Columns spanned on extra-small screens.
  sm: number;               // Default: 0. Columns spanned on small screens.
  md: number;               // Default: 0. Columns spanned on medium screens.
  lg: number;               // Default: 0. Columns spanned on large screens.
  xl: number;               // Default: 0. Columns spanned on extra-large screens.
  containerStyle: ViewStyle; // Additional styles for the grid container or item.
}

  10. Use the Divider component to separate content

    The Divider component renders a separator line used to visually divide two components. It supports both vertical and horizontal separation depending on the layout of the parent container (e.g., using flexDirection='row' for vertical dividers).
    import { StyledView, StyledText, Divider } from '@nexara/nativeflow';

const Component = () => {
  return (
    <>
      {/* Horizontal Divider */}
      <StyledView gap={20}>
          <StyledText primary>Item 1</StyledText>
          <Divider />
          <StyledText primary>Item 2</StyledText>
      </StyledView>

      {/* Vertical Divider */}
      <StyledView gap={20} flexDirection='row'>
          <StyledText primary>Item 1</StyledText>
          <Divider />
          <StyledText primary>Item 2</StyledText>
      </StyledView>
    </>
  );
}
export default Component;

  11. Implement an internally controlled CheckBox

    Use the CheckBox component with defaultValue to let the component manage its own checked state internally. The onPress callback will return the new checked state when the user interacts with the checkbox.
    import { CheckBox } from '@nexara/nativeflow';

const Component = () => {
  return (
    <CheckBox
      label='CheckBox'
      defaultValue={true}
      onPress={(e) => console.log(e)}
    />
  );
}
export default Component;

  12. Configure Link component props

    The Link component accepts the following props to control its behavior and appearance:
    PropTypeDefaultDescription
    titlestring'Link'The text to be displayed as the link.
    hrefstringN/AThe URL that will be opened when the link is pressed.
    styleTextStyleN/AOptional custom styles for the link text.