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.

What's New in This Release

Image

• Animation Support: Now includes animation capabilities, enhancing visual interactivity.

List

• Enhanced Pressability: New prop allows triggering an onPress event across the entire List item component.
• Outline Customization: Props showOutline, outlineWidth, and outlineColor enable full control over List item borders.
• Background Flexibility: showDefaultBg prop added to toggle background color support.
• Soft Radius Option: New softRadius prop for rounded corners on List items.

Text

• Dynamic Color Control: color prop allows dynamic text color changes.
• Animation Support: Added animation options.
• Code Optimization: Improved performance and readability.

Input

• Square Corners: New square prop to control border radius.
• Hide Label: Added hideLabel prop for optional label visibility.
• Code Optimization: Enhanced performance with refactored code.

Button

• Shape Customization: Added square and round props for customizable shapes.
• Forward Ref Fix: Improved ref handling.

Box

• Animation Support: Animation options added for engaging design.

Theme

• Simplified Theme Creation: New createTheme function for easy theme setup.
• Theme Config Optimization: Spacing config is now optimized with a dedicated prop, eliminating redundancy.

Fixes

• Forward Ref Consistency: Forward ref issues resolved across all components.

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.

| Property | Description | Usage | | -------- | -------------------------------------- | ------------------------------------------- | | sx? | Custom styles for the image list item. | Specifies custom styles using BaseStyles. | | items? | Number of items to display. | Specifies the number of items to display. |

ImageListItemBarProps

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

| Property | Description | Usage | | ------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | | listContentWrapperStyles? | Custom styles for the list content wrapper. | Specifies custom styles using ViewStyle. | | title? | Title text to display. | Specifies the title text as a string. | | titleProps? | Props for the title text component. | Specifies properties for the title text component, omitting children. | | subtitle? | Subtitle text to display. | Specifies the subtitle text as a string. | | subtitleProps? | Props for the subtitle text component. | Specifies properties for the subtitle text component, omitting children. | | endAdornment? | Node to display at the end of the list item bar. | Specifies a React node (e.g., an icon or button) for the end of the list item bar. | | endAdornmentContainerStyles? | Styles for the container of the end adornment. | Specifies styles for the end adornment container using Pick<BoxProps, 'style' 'sx'>. |

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

| Property | Type | Description | | ----------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------- | | duration | number | Duration of the animation in milliseconds. Defines how long the animation should run. | | delay | number | Delay before the animation starts in milliseconds. This allows you to postpone the start of the animation. | | repeatCount | number | Number of times the animation should repeat. Sets how many times the animation should loop before stopping. | | style | StyleProp<ViewStyle> | Additional styles for the container. Allows you to apply custom styles to the container view. | | children | React.ReactNode | Children components to apply the animation effect. The elements that will undergo the animation. | | applyTransition | boolean | State for the animation effect. Determines whether the transition animation should be applied or not. |

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.

| Property | Type | Description | | -------- | -------- | -------------------------------- | | height | number | Sets the bounce effect's height. |

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.

| Property | Type | Description | | -------- | -------- | ---------------------------------------------- | | scale | number | Adjusts the size scaling for the pulse effect. |

ShakeProps

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

| Property | Type | Description | | -------- | ---------- | ---------------------------------------------------------------- | | type | 'x' 'y' | Defines the axis of shaking: horizontal ('x') or vertical ('y'). |

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.

| Property | Type | Description | | -------------- | ----------------------------- | ------------------------------------------------ | | type | 'down' 'left' 'right' 'up' | Specifies the direction of the backIn animation. | | initialValue | number | Sets the starting value for the animation. |

FadingProps

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

| Property | Type | Description | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | | type | 'fadeIn' 'fadeInDown' 'fadeInDownBig' 'fadeInLeft' 'fadeInLeftBig' 'fadeInRight' 'fadeInRightBig' 'fadeInUp' 'fadeInUpBig' 'fadeInTopLeft' 'fadeInTopRight' 'fadeOut' 'fadeOutDown' 'fadeOutUp' | Specifies the exact type of fade animation to be applied. |

FlipProps

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

| Property | Type | Description | | -------- | --------------------------------------------------- | ------------------------------------- | | type | 'flip' 'flipInX' 'flipInY' 'flipOutX' 'flipOutY' | Specifies the type of flip animation. |

SlideProps

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

| Property | Type | Description | | ----------- | --------------------------------------------------------- | ------------------------------------------ | | type | 'slideInDown' 'slideInLeft' 'slideInRight' 'slideInUp' | Specifies the type of slide animation. | | fromValue | number | Sets the starting value for the animation. | | toValue | number | Sets the ending value for the animation. |

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

| Property | Description | Usage | | ------------------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------- | | checkedImage | Image to display when the checkbox is checked. | Can be any React node, such as an icon or an image. | | unCheckedImage | Image to display when the checkbox is unchecked. | Can be any React node, such as an icon or an image. | | isChecked | Boolean value indicating whether the checkbox is checked. | This is a required prop. | | isIndeterminate | Boolean value indicating whether the checkbox is in an indeterminate state. | Represents a mixed selection, often used in hierarchical checkboxes. | | checkBoxColor | Color of the checkbox border when it is not checked. | Accepts any valid color string. | | disabled | Boolean value indicating whether the checkbox is disabled. | When true, the checkbox is not interactive and visually appears disabled. | | indeterminateImage | Image to display when the checkbox is in an indeterminate state. | Can be any React node, such as an icon or an image. | | checkBoxWrapperStyles | Style object to apply to the wrapper view of the checkbox. | Accepts any valid ViewStyle properties. | | startAdornment | React node to display at the start (left side) of the checkbox. | Commonly used for adding icons or labels. | | startAdornmentContainerProps | Props to apply to the container of the startAdornment. | Omits the 'children' prop from BoxProps to avoid conflicts. | | endAdornment | React node to display at the end (right side) of the checkbox. | Commonly used for adding icons or labels. | | endAdornmentContainerProps | Props to apply to the container of the endAdornment. | Omits the 'children' prop from BoxProps to avoid conflicts. |

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

| Property | Description | Usage | | ---------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | | value | The current value of the quantity stepper. | Should represent the number that is being incremented or decremented. | | labelProps | Props to be passed to the label text component, excluding the 'children' prop. | Used to style and configure the label that displays the current value. | | labelWrapperProps | Props to be passed to the label wrapper view component, excluding the 'children' prop. | Used to style and configure the container of the label. | | onIncrement | Callback function that is called when the increment button is pressed. | Receives the gesture event as a parameter. | | onDecrement | Callback function that is called when the decrement button is pressed. | Receives the gesture event as a parameter. | | incrementButtonStyle | Style to be applied to the increment button view. | Used to customize the appearance of the increment button. | | decrementButtonStyle | Style to be applied to the decrement button view. | Used to customize the appearance of the decrement button. | | disabledIncrement | Determines whether the increment button is disabled. | If true, the increment button will be non-interactive. | | disabledDecrement | Determines whether the decrement button is disabled. | If true, the decrement button will be non-interactive. | | maxIncrement | Specifies the maximum limit for the value when incrementing. | If provided, the value cannot exceed this limit when the increment button is pressed. | | minDecrement | Specifies the minimum limit for the value when decrementing. | If provided, the value cannot go below this limit when the decrement button is pressed. | | buttonType | Different options for button styles. | Options are 'square' or 'round'. |

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:

| Property | Description | Usage | | --------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | | expandIcon | Icon displayed to indicate expansion state. | Can be any React node, such as an icon or image. | | summaryChildWrapperStyles | Styles for the wrapper around summary child elements. | Use to customize the appearance of the summary child elements. | | expandIconWrapperStyles | Styles for the wrapper around the expand icon. | Use to customize the appearance of the expand icon wrapper. | | rotateAnimationDuration | Duration of the rotation animation for the expand icon. | Specifies the time for the expand icon rotation animation. | | heightValueAnimationDuration | Duration of the height value animation. | Specifies the time for the height value animation. | | accordionDetailsOpacityDuration | Duration of the accordion summary animated view. | Specifies the time for the opacity transition in the accordion details. | | rotateAnimationRange | Range of rotation animation values. | Specifies the start and end values for the rotation animation. | | accordionDetails | Content to display in the expanded accordion details. | Can be any React node, such as text or images, shown when expanded. | | accordionWrapperStyles | Styles for the wrapper around the entire accordion component. | Use to customize the appearance of the accordion wrapper. | | defaultExpanded | Determines if the accordion is expanded or collapsed. | If true, the accordion starts in the expanded state. | | topBorder | Show the accordion top border. | If true, a border is shown at the top of the accordion. | | bottomBorder | Show the accordion bottom border. | If true, a border is shown at the bottom of the accordion. | | onExpand | Callback function when the accordion is collapsed or expanded. | Function to handle expand/collapse events. | | startAdornment | A React node to be displayed at the start of the accordion. | Commonly used for icons or labels at the start of the accordion. | | startAdornmentContainerStyle | Style for the start adornment container. | Use to customize the appearance of the start adornment container. | | contentKey | Prop to identify when the content of accordionDetails changes. | Helps manage the state of accordion details when content changes. | | square | Determines if the accordion has square corners. | If true, the accordion corners will be square. | | disable | Disables the accordion. | If true, the accordion will be non-interactive. |

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:

| Property | Description | Usage | | ----------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------- | | variation | Defines the shape of the image (default: 'square'). | Options include 'square', 'rounded', 'rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl'. | | size | Size of the image. | Specifies the dimensions of the image. | | sx | Custom styles for the image. | Allows for additional styling of the image. |

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

| Property | Description | Default | Usage | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------- | | initialToggleState | Indicates the initial toggle state of the switch. If true, the switch will be in the "on" position initially. | false | Determines whether the switch starts in the "on" position. | | onToggle | Callback function that is called when the switch is toggled. The function receives the new toggle state as a boolean. | - | Used to handle changes in the switch state. | | toggleDuration | Duration of the toggle animation in milliseconds. Controls how long the animation takes to transition from one state to another. | 200 | Adjusts the duration of the switch's toggle animation. | | thumbStyles | Custom styles for the thumb (the movable part) of the switch. Accepts a style object to customize the appearance of the thumb. | - | Allows for styling the movable part of the switch. | | style | Custom styles for the switch container. Accepts a style object to customize the appearance of the switch container. | - | Customizes the appearance of the switch container. | | sx | Additional styles that can be applied to the switch component. This property allows for the inclusion of any base styles, making the component more flexible. | - | Provides flexibility for additional styling. |

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:

| Property | Description | Default | Usage | | ------------------------ | --------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------- | | badgeContent | Content to be displayed inside the badge. Can be a string or a number. | - | Sets the text or number shown inside the badge. | | max | Maximum value for the badge content. | - | Limits the number displayed in the badge if it exceeds the maximum. | | variation | Style variation of the badge. Options include 'primary', 'secondary', 'error', 'info', 'success', or 'warning'. | - | Determines the color and style of the badge. | | variant | Style variant of the badge. Currently supports 'dot'. | - | Defines the badge style; 'dot' creates a small dot badge. | | invisible | Indicates whether the badge should be invisible. | - | Controls the visibility of the badge. | | badgeAnimationDuration | Duration of badge animation in milliseconds. | - | Specifies how long the badge animation takes. | | badgeContentProps | Props for customizing the content displayed inside the badge, excluding 'children'. | - | Allows customization of the badge content component. | | anchorOrigin | Anchor origin configuration to position the badge. Includes vertical and horizontal options ('top' | 'bottom' | 'left' 'right'). - Positions the badge relative to its container. | | badgeContainerProps | Badge container props for customizing the badge wrapper element. | - | Customizes the wrapper element around the badge. | | overlap | Wrapped shape the badge should overlap. Options include 'circular' or 'rectangular'. | - | Determines the shape of the badge's overlap area. |

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

| Property | Description | Usage | | ----------- | -------------------------- | ------------------------------------------------------------------------------ | | p | Padding | Specifies the padding space around an element. | | px | Horizontal Padding | Specifies the horizontal padding space around an element. | | py | Vertical Padding | Specifies the vertical padding space around an element. | | ps | Padding Start | Specifies the padding space at the start of an element. | | pe | Padding End | Specifies the padding space at the end of an element. | | pt | Padding Top | Specifies the padding space at the top of an element. | | pb | Padding Bottom | Specifies the padding space at the bottom of an element. | | m | Margin | Specifies the margin space around an element. | | mx | Horizontal Margin | Specifies the horizontal margin space around an element. | | my | Vertical Margin | Specifies the vertical margin space around an element. | | ms | Margin Start | Specifies the margin space at the start of an element. | | me | Margin End | Specifies the margin space at the end of an element. | | mt | Margin Top | Specifies the margin space at the top of an element. | | mb | Margin Bottom | Specifies the margin space at the bottom of an element. | | r | Border Radius | Specifies the radius of the element's corners. | | ret | Border Top End Radius | Specifies the radius of the top end corner of the element. | | rlt | Border Top Left Radius | Specifies the radius of the top left corner of the element. | | ree | Border End End Radius | Specifies the radius of the end end corner of the element. | | rrt | Border Top Right Radius | Specifies the radius of the top right corner of the element. | | rse | Border Start End Radius | Specifies the radius of the start end corner of the element. | | res | Border Start End Radius | Specifies the radius of the start end corner of the element. | | rst | Border Top Start Radius | Specifies the radius of the top start corner of the element. | | reb | Border Bottom End Radius | Specifies the radius of the bottom end corner of the element. | | rlb | Border Bottom Left Radius | Specifies the radius of the bottom left corner of the element. | | rss | Border Start Start Radius | Specifies the radius of the start start corner of the element. | | rrb | Border Bottom Right Radius | Specifies the radius of the bottom right corner of the element. | | rsb | Border Bottom Start Radius | Specifies the radius of the bottom start corner of the element. | | pos | Position | Specifies the positioning method of an element. | | posB | Position Bottom | Specifies the bottom position of an element. | | posL | Position Left | Specifies the left position of an element. | | posR | Position Right | Specifies the right position of an element. | | posT | Position Top | Specifies the top position of an element. | | index | Z-Index | Specifies the stack order of an element. | | w | Width | Specifies the width of an element. | | h | Height | Specifies the height of an element. | | minW | Minimum Width | Specifies the minimum width of an element. | | minH | Minimum Height | Specifies the minimum height of an element. | | maxW | Maximum Width | Specifies the maximum width of an element. | | maxH | Maximum Height | Specifies the maximum height of an element. | | color | Color | Specifies the text color of an element. | | family | Font Family | Specifies the font family of an element's text. | | size | Font Size | Specifies the font size of an element's text. | | style | Font Style | Specifies the font style of an element's text. | | weight | Font Weight | Specifies the font weight of an element's text. | | lSpacing | Letter Spacing | Specifies the spacing between characters in an element's text. | | lHeight | Line Height | Specifies the height of each line of text in an element. | | dLine | Text Decoration Line | Specifies the decoration line type for text in an element. | | dStyle | Text Decoration Style | Specifies the decoration style for text in an element. | | dColor | Text Decoration Color | Specifies the decoration color for text in an element. | | sColor | Shadow Color | Specifies the color of the shadow for an element. | | sOpacity | Shadow Opacity | Specifies the opacity of the shadow for an element. | | sOffset | Shadow Offset | Specifies the offset of the shadow for an element. | | sRadius | Shadow Radius | Specifies the radius of the shadow for an element. | | transform | Text Transform | Specifies the text transformation for an element. | | select | User Select | Specifies the user selection behavior for an element. | | align | Align Content | Specifies the alignment of content within a flex container. | | content | Justify Content | Specifies the alignment of content along the main axis of a flex container. | | items | Align Items | Specifies the alignment of items within a flex container. | | self | Align Self | Specifies the alignment of an individual flex item within a flex container. | | ratio | Aspect Ratio | Specifies the aspect ratio of an element. | | d | Display | Specifies the display behavior of an element. | | end | End | Specifies the end position of an element. | | f | Flex | Specifies the flexibility of an element within a flex container. | | fBasis | Flex Basis | Specifies the initial size of a flex item in a flex container. | | fDirection | Flex Direction | Specifies the direction of the main axis in a flex container. | | rGap | Row Gap | Specifies the gap between rows in a grid container. | | gap | Gap | Specifies the gap between grid items in a grid container. | | cGap | Column Gap | Specifies the gap between columns in a grid container. | | fGrow | Flex Grow | Specifies the ability of a flex item to grow to fill available space. | | fShrink | Flex Shrink | Specifies the ability of a flex item to shrink if necessary. | | wrap | Flex Wrap | Specifies whether flex items should wrap if they exceed the container's width. | | bVisibility | Backface Visibility | Specifies the visibility of the backface of an element. | | bg | Background Color | Specifies the background color of an element. | | o | Opacity | Specifies the opacity level of an element. | | e | Elevation | Specifies the elevation level of an element. | | pEvents | Pointer Events | Specifies whether an element can be the target of pointer events. | | c | Cursor | Specifies the type of cursor to display when hovering over an element. | | bColor | Border Color | Specifies the border color of an element. | | bWidth | Border Width | Specifies the width of the border of an element. | | overflow | Overflow | Specifies how content that overflows the element's box is handled. |

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

| Property | Type | Default | Description | | -------------------- | ------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | disabled | boolean | false | Determines whether the button is disabled. When true, the button becomes non-interactive. | | children | ReactNode | - | The content to be displayed inside the button, such as text, icons, or other components. | | disableRipple | boolean | false | Determines whether the ripple effect is disabled. If true, the button will not display a ripple effect on press. | | rippleProps | RippleProps | - | Props for configuring the ripple effect, such as ripple color, duration, and radius. | | rippleEdge | RipplePosition | center | Determines the position of the ripple effect relative to the button. Options include 'center', 'topLeft', 'topRight', 'bottomLeft', and 'bottomRight'. | | sx | BaseStyles | - | Additional styles for the button container using the BaseStyles type from styleTypes. | | variation | ButtonVariations | contained | Specifies the visual style variation of the button. Can be 'contained', 'outlined', or 'text'. | | fullWidth | boolean | false | Specifies whether the button should take up the full width available. | | disableElevation | boolean | false | Specifies whether to disable elevation for the button. Elevation adds a shadow effect to the button. | | buttonColor | ButtonColorTypes | - | Specifies the color variation of the button. Can be 'primary', 'secondary', 'success', 'error', 'info', or 'warning'. | | square and round | boolean | round | props for flexible shape styling. |

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: Specif