rn-central-dls

Cars24 React native DLS

Installation

npm install rn-central-dls

Usage

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

Release Notes

TextInput/FormTextInput

The FormTextInput is DLS component specific for form type inputs.

Usage

import React from 'react';
import { FormTextInput } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <FormTextInput label="Priyesh" hint="Hint" type={TextInputType.TEXT} />
    </View>
  );
};

export default App;

Props

• type: (Mandatory) Manages text input UI and Formatting -> AMOUNT, AMOUNT_RUPEE, TEXT, PHONE_NUMBER, ADHAAR, EMAIL, VEHICLE_NO.

• label: (Optional) text for the button.

• hint: (Optional) Hint is bottom text of text input .

• isMandatory: (Optional) if field is mandatory (Show Asteriks).

• onPressContainer: (Optional) if given, text input will behave like a button and won't be editable.

• onChangeText: (Optional) if given, get called for event text change,

  • With (text:string,isCompleted:boolean) as props

• initialValue: (Optional) initial value of text input.

• rightActionComponent: (Optional) Used to provide LinkButton as Right Action on FormTextInput.

• charCount: (Optional) Displays the number of characters typed by the user at the footer of multiline FormTextInput.

Notes

• The size prop accepts values AMOUNT, TEXT, PHONE_NUMBER, ADHAAR, EMAIL, VEHICLE_NO.
• The component uses the Design Language System (DLS) and provides a default style based on the size prop.

Link Button

The Link Button component is type of button mainly for inline button or for button without borders.

Usage

import React from 'react';
import { LinkButton } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <LinkButton title="I'm Link Button" size="LARGE" type="GHOST" />
    </View>
  );
};

export default App;

Props

• title: (Mandatory) text for the button.
• size: (Optional) The size of the button. Defaults to 'MEDIUM'.
• type: (Optional) Whether the button is disabled. Defaults to BRAND.
• onPress: (Optional) Callback function triggered when the button button is pressed.
• style: (Optional) style of button, use this with care (Only to change paddings, margins only).
• isLoading: (Optional) provide loading state to button.
• leftIcon: (Optional) icon on left side.
• rightIcon: (Optional) icon on right side.
• inverse: (Optional) inverse variant of each type prop. Defaults to false.

Notes

• The size prop accepts values 'SMALL' or 'MEDIUM' to set the link button size accordingly.
• The type prop accepts values 'GHOST' or 'BRAND' to set the link button type accordingly.
• The component uses the Design Language System (DLS) and provides a default style based on the size prop.

Radio Button

The RadioButton component is a customizable radio button implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { RadioButton } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <RadioButton
        size="MEDIUM"
        disabled={false}
        checked={false}
        onPress={() => console.log('Radio button pressed')}
        style={{ marginTop: 10 }}
        label="This is a label"
        textState="DEFAULT"
      />
    </View>
  );
};

export default App;

Props

• size: (Optional) The size of the radio button. Defaults to 'MEDIUM'.
• disabled: (Optional) Whether the radio button is disabled. Defaults to false.
• checked: (Optional) Whether the radio button is checked. Defaults to false.
• onPress: (Optional) Callback function triggered when the radio button is pressed.
• style: (Optional) Custom styles for the container of the radio button.
• label: (Optional) Custom label to be passed.
• textState: (Optional) Variant of label. Defaults to DEFAULT
  • Values - DEFAULT | EMPHASIS

Notes

• The size prop accepts values 'SMALL' or 'MEDIUM' to set the radio button size accordingly.
• The component uses the Design Language System (DLS) and provides a default style based on the size prop.

ProgressBar Component

The ProgressBar component is a customizable progress bar implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { ProgressBar } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <ProgressBar
        isIndetermined={false}
        progressValue={50}
        isRTL={false}
        animationDuration={250}
        progressTimeLeft=""
        showProgressPercent={true}
        type="BOTTOM_LEFT_RIGHT"
      />
    </View>
  );
};

export default App;

Props

• isIndetermined: (Optional) Whether the progress bar is indeterminate. Defaults to false.
• progressValue: (Optional) The progress value, in percentage (0-100). Defaults to 0.
• isRTL: (Optional) Whether the component should be displayed right-to-left. Defaults to false.
• animationDuration: (Optional) The duration of the animation in milliseconds. Defaults to 250.
• progressTimeLeft: (Optional) Time left for the progress completion (e.g., "2 mins left").
• showProgressPercent: (Optional) Whether to show the progress percentage. Defaults to false.
• type: (Optional) The type of progress bar layout ("BOTTOM_LEFT_RIGHT", "BOTTOM_CENTER", "TOP_CENTER").

Notes

• The ProgressBar component supports various layouts ("BOTTOM_LEFT_RIGHT", "BOTTOM_CENTER", "TOP_CENTER").
• Customize the appearance and behavior of the progress bar using the provided props.

FileUpload Component

The FileUpload component is a customizable file upload component implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { FileUpload } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <FileUpload
        title="Upload File"
        subtitle="Select a file to upload"
        linkBtnText="Choose File"
        retryButtonText="Retry"
        onPress={() => console.log('Pressed')}
        errorMessage=""
        state="DEFAULT"
        handleStopUpload={() => console.log('Stop upload')}
        handleRetryUpload={() => console.log('Retry upload')}
        handleRemoveUpload={() => console.log('Remove upload')}
        handleViewDocument={() => console.log('View document')}
        containerStyle={{ marginBottom: 20 }}
        progressBarProps={{
          isIndetermined: false,
          progressValue: 50,
          isRTL: false,
          animationDuration: 250,
          progressTimeLeft: '',
          showProgressPercent: true,
          type: 'BOTTOM_LEFT_RIGHT',
        }}
      />
    </View>
  );
};

export default App;

Props

• title: (Optional) Title of the file upload component.
• subtitle: (Optional) Subtitle or description of the file upload component.
• linkBtnText: (Optional) Text for the link or button to choose a file.
• retryButtonText: (Optional) Text for the retry button when upload fails.
• onPress: (Optional) Callback function triggered on button press.
• errorMessage: (Optional) Error message to display, if any.
• customStyle: (Optional) Custom styles for the file upload component.
• state: (Optional) State of the file upload ("DEFAULT", "PRESSED", "UPLOADING", "UPLOAD_COMPLETE", "UPLOAD_FAILED", "ERROR", "DISABLED", "CUSTOM").
• handleStopUpload: (Optional) Callback function to stop the upload process.
• handleRetryUpload: (Optional) Callback function to retry the upload process.
• handleRemoveUpload: (Optional) Callback function to remove the uploaded file.
• handleViewDocument: (Optional) Callback function to view the uploaded document.
• containerStyle: (Optional) Custom styles for the container of the file upload component.
• progressBarProps: (Optional) Props for the progress bar component used in the file upload.
• showEditButton: (Optional) Flag to show Edit Button on state ("UPLOAD_COMPLETE").
• handleEditDocument: (Optional) Callback function to edit the uploaded document.
• showDeleteButton: (Optional) Flag to show the remove button on state ("UPLOAD_COMPLETE").
• label: (Optional) Label text for the file upload component.
• isMandatory: (Optional) Flag to indicate if file upload is mandatory.
• customBadge: (Optional) Custom badge component to display, works only in state (CUSTOM).
• showFilePreview: (Optional) Flag to show file preview in (CUSTOM) state.
• config: (Optional) Configuration object to customize behavior for different file upload states. For example, you can hide the cross button during uploading state.

Notes

• Customize the appearance and behavior of the FileUpload component using the provided props.
• The component supports various states ("DEFAULT", "PRESSED", "UPLOADING", "UPLOAD_COMPLETE", "UPLOAD_FAILED", "ERROR", "DISABLED") to handle different upload scenarios.
• Use the containerStyle prop to apply container styles to handle component alignments.

InfoStrip Component

The InfoStrip component is a customizable Info Strip implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { InfoStrip } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <InfoStrip
        color="success"
        text="Info Strip Component - success"
        type="endToEnd"
      />
    </View>
  );
};

export default App;

Props

• color: (Optional) Colour of the info strip. Defaults to neutral.
  • Values - warning | info | success | error | neutral
• type: (Optional) Type of info stripe, Defines the corner radius. Defaults to card.
  • Values - card | endToEnd
• text: (Required) Text to display in the info strip.
• icon: (Optional) Icon to display before the text.

Alert Component

The Alert component is a customizable Alert Dialog implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { Alert } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <Alert
        priority={'HIGH'}
        type={'SUCCESS'}
        title="Alert Title"
        desc="Alert Desc"
        showCross
      />
    </View>
  );
};

export default App;

Props

• priority: (Optional) To set the colour of the Alert. Defaults to HIGH.
  • Values - HIGH, LOW
• type: (Optional) To set the colour of the Alert. Defaults to INFO
  • Values - ERROR, WARNING, SUCCESS, INFO
• title: (Required) Title message to display in the Alert.
• desc: (Optional) Description message to be displayed.
• leftIcon: (Optional) Icon to display before the text.
• rightIcon: (Optional) Icon to display at rightmost end of Alert Dialog. Note: This overrides the showCross icon
• showCross: (Optional) Generic close icon, positioned at the rightmost end.
• onPress: (Optional) Callback to be executed on press event.
• containerStyle: (Optional) custom ViewStyle to wrap up the parent AlertBox.

Tags Component

The Tags component is a customizable tag display component implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { View } from 'react-native';
import { Tags } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <Tags label="" type="Dot" size="LARGE" />
      <Tags label="Test" appearance="RED" size="SMALL" />
    </View>
  );
};

export default App;

Props

• size: (Optional) The size of the tags. Can be either 'SMALL' or 'LARGE'. Defaults to 'SMALL'. 'MEDIUM' is deprecated, use 'LARGE' instead.
• appearance: The appearance style of the tags. Must be one of WHITE, RED, BLACK, GRAY.
• style: (Optional) Custom styles to apply to the container.
• label: label to display inside the tag.
• disabled: (Optional) will display 'GRAY' variant.
• type: (Optional) 'Characters' (default), 'Dot' (RED variants only).

Notes

• The Tags component supports different sizes ('SMALL', 'LARGE').
• Customize the appearance and behavior of the tags using the provided props.

Chip Component

The Chip component is a customizable chip display component implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { View } from 'react-native';
import { Chip } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <Chip
        label="Chip Label"
        size="SMALL"
        onPress={() => console.log('Chip pressed')}
        disabled={false}
        labelColor="#000000"
        withBadge={true}
        withCross={true}
        selected={true}
        theme="LIGHT"
        style={{ margin: 10 }}
        leftIcon={<Svgs.CheckCircle />}
        rightIcon={<Svgs.CheckCircle />}
        tagsProps={{
          appearance: 'PRIMARY',
          tagsCount: 3,
        }}
      />
    </View>
  );
};

export default App;

Props

• label: The text to display inside the chip.
• size: (Optional) The size of the chip. Can be either 'SMALL' or 'MEDIUM'. Defaults to 'SMALL'.
• onPress: (Optional) Function to call when the chip is pressed.
• disabled: (Optional) Whether the chip is disabled. Defaults to false.
• labelColor: (Optional) The color of the chip's label.
• withBadge: (Optional) Whether the chip includes a badge. Defaults to false.
• withCross: (Optional) Whether the chip includes a cross icon. Defaults to false.
• selected: (Optional) Whether the chip is selected. Defaults to false.
• style: (Optional) Custom styles to apply to the container.
• leftIcon: (Optional) Icon to display on the left side of the chip.
• rightIcon: (Optional) Icon to display on the right side of the chip.
• tagsProps: (Optional) Props to pass to the Tags component inside the chip.
• theme: (Optional) The theme of the chip, based on the background. Can be either 'LIGHT' or 'DARK'. Defaults to 'LIGHT'.

Notes

• The Chip component supports different sizes ('SMALL', 'MEDIUM').
• Customize the appearance and behavior of the chip using the provided props.
• The Chip component supports different themes ('LIGHT', 'DARK').

StandaloneTextInput Component

The StandaloneTextInput component is a customizable Text Input implemented in the Design Language System (DLS) for screens having single input component.

Usage

import React from 'react';
import { StandaloneTextInput, StandaloneTextInputType } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <StandaloneTextInput
        hint="Hint"
        type={StandaloneTextInputType.PHONE_NUMBER}
        onChangeText={(text, isValid) => {
          console.log('>>>', { text, isValid });
        }}
      />
    </View>
  );
};

export default App;

Props

• hint: (Optional) Hint to be shown below the input component. Defaults to ('').
• type: (Optional) Type of StandaloneTextInput, Defaults to TEXT.
  • Values - PHONE_NUMBER | TEXT | VEHICLE_NO
• onPressContainer: (Optional) Custom action to be fired on press of container.
• onChangeText: (Optional) Get the value of text on user changes the text.
• showError: (Optional) If field is errored. Defaults to false.
• disabled: (optional) If field is disabled. (ie. Not editable). Defaults to false.
• rightAction: (optional) To show the cross button in the right side of input box.
• throttle: (optional) Throttle time for onPressContainer function Defaults to 250ms, to be passed in ms.
• rightActionComponent: (Optional) Used to provide LinkButton as Right Action on StandaloneTextInput.

Dropdown Component

The Dropdown component is used for selecting data from list, its type of input.

Usage

import React from 'react';
import { View } from 'react-native';
import { Dropdown } from 'rn-central-dls';
const App = () => {
  return (
    <View>
      <Dropdown
        label="Label"
        value="Value"
        onPress={() => {
          Alert.alert('Dropdown pressed');
        }}
        isMandatory
      />
    </View>
  );
};
export default App;

Props

• label: The text to display as a label at the top of dropdown.
• onPress: (Optional) Function to call when the dropdown is pressed.
• disabled: (Optional) Whether the dropdown is disabled. Defaults to false.
• value: (Optional) The text to display inside the dropdown component.
• isMandatory: (Optional) if field is mandatory (Show Asteriks).
• throttle: (optional) Throttle time for onPressContainer function Defaults to 250ms, to be passed in ms.

Checkbox Component

The Checkbox component is a customizable Checkbox implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { View } from 'react-native';
import { Checkbox } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <Checkbox
        type="CIRCLE"
        size="SMALL"
        onPress={() => setRadioBtnChecked((toggle) => !toggle)}
        disabled
        indeterminate={isRadioBtnChecked}
        label="This is a label"
        textState="DEFAULT"
      />
    </View>
  );
};

Props

• type: Type of checkbox to render. Defaults to SQUARE. SQUARE | CIRCLE
• onPress: (Optional) Function to call when the checkbox is pressed.
• disabled: (Optional) Whether the checkbox is disabled. Defaults to false.
• checked: (Optional) Whether the checkbox is checked. Defaults to false.
• size: (Optional) size of checkbox. Defaults to MEDIUM. MEDIUM | SMALL
• label: (Optional) Custom label to be passed.
• textState: (Optional) Variant of label. Defaults to DEFAULT
• autoCompleteThreshold: (Optional) Percentage after which the slide auto-completes. Defaults to 0.92
  • Values - DEFAULT | EMPHASIS

DLS FontIcon Component

The FontIcon component is a customizable icon component that provides access to the DLS icon library using font icons. It supports both icon names and unicode values for rendering icons.

Installation

Step 1: Configure Font Assets

Add the following configuration to your react-native.config.js file:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./node_modules/rn-central-dls/lib/module/assets/fonts'],
  dependencies: {
    // ... other dependencies
  },
};

Step 3: Link Font Assets

After adding the configuration, run the following command to link the font assets:

# For React Native 0.60+
npx react-native-asset

# For older versions
react-native link

Step 4: Rebuild Your App

Make sure to rebuild your app after linking the fonts:

• iOS: npx react-native run-ios or rebuild in Xcode
• Android: npx react-native run-android or rebuild in Android Studio

Note: For iOS, you may also need to add the font files to your Info.plist if they don't appear automatically after linking.

Usage

import React from 'react';
import { View } from 'react-native';
import { FontIcon } from 'rn-central-dls';

const App = () => {
  return (
    <View>
      {/* Basic usage with icon name */}
      <FontIcon name="Add-Layer-Icon-fill" size={20} />

      {/* With custom color */}
      <FontIcon name="Add-User-Icon-filled" size={20} color="green" />

      {/* With theme color */}
      <FontIcon name="ai-filled" size={20} color={colors.icon.warning} />

      {/* With custom dimensions */}
      <FontIcon name="Settings---filled" width={24} height={24} />

      {/* Using unicode instead of name */}
      <FontIcon unicode={0xe900} size={20} />

      {/* With custom style */}
      <FontIcon
        name="Heart-fill"
        size={20}
        color="red"
        style={{ marginHorizontal: 10 }}
      />
    </View>
  );
};

export default App;

Props

• name: (Optional) The name of the icon to display. Must be one of the predefined icon names from the DLS icon library. Cannot be used together with unicode.
• unicode: (Optional) The unicode value of the icon to display. Cannot be used together with name.
• size: (Optional) The size of the icon in pixels. Cannot be used together with width and height.
• width: (Optional) The width of the icon in pixels. Must be used together with height. Cannot be used with size.
• height: (Optional) The height of the icon in pixels. Must be used together with width. Cannot be used with size.
• color: (Optional) The color of the icon. Accepts hex codes, color names, or theme color tokens. Defaults to #0F0F10.
• style: (Optional) Custom styles to apply to the icon container.

Available Icon Names (Examples)

The FontIcon component supports a wide variety of icons. Here are some commonly used examples:

// UI Icons
<FontIcon name="Add-Layer-Icon-fill" size={20} />
<FontIcon name="Add-User-Icon-filled" size={20} />
<FontIcon name="Settings---filled" size={20} />
<FontIcon name="Search-fill" size={20} />
<FontIcon name="Close-fill" size={20} />

// Navigation Icons
<FontIcon name="Arrow-right0-fill" size={20} />
<FontIcon name="Arrow-left0-fill" size={20} />
<FontIcon name="Arrow-up0-fill" size={20} />
<FontIcon name="Arrow-down0-fill" size={20} />

// Car Related Icons
<FontIcon name="Car---filled" size={20} />
<FontIcon name="Car-Garage---filled" size={20} />
<FontIcon name="Car-Inspection---filled" size={20} />
<FontIcon name="Tyre-Filled" size={20} />

// Common Actions
<FontIcon name="Heart-fill" size={20} />
<FontIcon name="Star-filled" size={20} />
<FontIcon name="Share---filled" size={20} />
<FontIcon name="Download---filled" size={20} />

Notes

• Either name or unicode prop must be provided, but not both.
• When using size, you cannot specify width and height separately.
• When using width and height, you cannot use size.
• The component uses the icomoon font family for rendering icons.
• All icons are vector-based and scale without quality loss.
• The component supports both filled and line variants of icons (e.g., "Car---filled" and "Car---line").
• Use theme color tokens (e.g., colors.icon.warning) for consistent theming across the app.

Font Icon Update

To update icons in the glyphmap.ts, follow these steps:

1. Update icomoon.ttf: Replace the existing icomoon.ttf with the new one
2. Add selection.json: Place your IcoMoon selection.json file in the src/assets/fonts/ directory
3. Generate glyphmap: Run the glyphmap generation script to create the icon mapping:

yarn generate-glyphmap
# or
npm run generate-glyphmap

This will generate src/fontIcon/glyphmap.ts with all your icons mapped to their Unicode codes. 4. Clean up: Remove the selection.json file after glyphmap.ts creation

4. Link assets: Run the React Native asset linking command:

npx react-native-asset

5. Rebuild your app: Make sure to rebuild your app after linking the fonts:

   • iOS: npx react-native run-ios or rebuild in Xcode
   • Android: npx react-native run-android or rebuild in Android Studio

   Note: For iOS, you may also need to add the font files to your Info.plist if they don't appear automatically after linking.

Slide Button Component

The SlideButton component is used for selecting data from list, its type of input.

import React from 'react';
import { View } from 'react-native';

import { SlideButton } from 'rn-central-dls';
const App = () => {
  return (
    <View>
      <SlideButton
        onSwipeEnd={() => {}}
        onSwipeStart={() => {}}
        title={'Button'}
        isLoading={false}
        variant="EMERGENCY"
        disabled
        size="LARGE"
      />
    </View>
  );
};
export default App;

Props

• title: The text to display inside the slide button.
• onSwipeEnd: (Optional) Function to call when the slide is completed.
• onSwipeStart: (Optional) Function to call when the slide is started.
• disabled: (Optional) Whether the slide button is in disabled state. Defaults to false.
• size: (Optional) Size of the slide button component. Defaults to MEDIUM. MEDIUM | LARGE
• variant: (Optional) Variant of the slide button component. Defaults to NORMAL. NORMAL | EMERGENCY
• isLoading: (Optional) show loading indicator inside the slide button component. Defaults to false

Rating Component

The Rating component is a customizable rating display component implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { View } from 'react-native';
import { Rating } from 'rn-central-dls';
const App = () => {
  return (
    <View>
      <Rating
        size="SMALL"
        count={5}
        defaultRating={3}
        onRatingChange={(rating) => console.log('Rating changed', rating)}
        readonly={false}
        disabled={false}
        layoutAnimation={true}
      />
    </View>
  );
};
export default App;

Props

• size: (Optional) The size of the rating component. Can be either 'SMALL' or 'LARGE'. Defaults to 'SMALL'.
• count: The number of rating stars or icons.
• defaultRating: (Optional) The initial rating value.
• onRatingChange: (Optional) Function to call when the rating is changed.
• readonly: (Optional) Whether the rating component is read-only. Defaults to false.
• disabled: (Optional) Whether the rating component is disabled. Defaults to false.
• layoutAnimation: (Optional) Whether the rating component is disabled. Defaults to true.

Notes

• The Rating component supports different sizes ('SMALL', 'LARGE').
• Customize the appearance and behavior of the rating component using the provided props.
• The Rating component internally uses the BaseRating component and adapts its styles based on the theme context.

Divider Component

The Divider component is used for creating a separation between two components.

Usage

import React from 'react';
import { View } from 'react-native';
import { Divider } from 'rn-central-dls';
const App = () => {
  return (
    <View>
      <Divider type="OR" />
    </View>
  );
};
export default App;

Props

• type: (Optional) The type of divider to display as a label at the top of dropdown.Defaults to DEFAULT.

DateTimeSlot Component

The DateTimeSlot component is a customizable date/time display component implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { View } from 'react-native';
import { DateTimeSlot } from 'rn-central-dls';

const App = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <DateTimeSlot disabled label={'10 AM - 10 PM'} type={'TIME'} />
      <DateTimeSlot selected label={'SUN'} subLabel="07 Jul" type={'DATE'} />
    </View>
  );
};

export default App;

Props

• label: The text to display inside the datetime component.
• type: Whether the component is of type -> DATE,TIME. Defaults to TIME.
• onPress: (Optional) Function to call when the date/time slot is pressed.
• disabled: (Optional) Whether the datetime component is disabled. Defaults to false.
• labelColor: (Optional) The color of the datetime label.
• selected: (Optional) Whether the datetime component is selected. Defaults to false.
• customStyle: (Optional) Custom styles to apply to the container.
• subLabel: Required when type is date .

DateTimeSlot Component

The Page Controls Dot component is a customizable dot indicator display component implemented in the Design Language System (DLS).

Usage

import React from 'react';
import { View } from 'react-native';
import { DateTimeSlot } from 'rn-central-dls';

const App = () => {
  const colorsArr = [
    '#FF0000',
    '#00FF00',
    '#0000FF',
    '#FFFF00',
    '#FF00FF',
    '#00FFFF',
    '#C0C0C0',
  ];
  const [pageControlSwipePos, setPageControlSwipePos] = React.useState(0);

  const handleScrollManager = (event) => {
    const newPos = Math.round(event.nativeEvent.contentOffset.x / windowWidth);
    if (pageControlSwipePos !== newPos) {
      setPageControlSwipePos(newPos);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <View style={styles.pageControlsContainer}>
        <PageControls nodes={colorsArr.length} pos={pageControlSwipePos} />
      </View>
      <FlatList
        data={colorsArr}
        horizontal
        pagingEnabled
        onScroll={handleScrollManager}
        renderItem={({ item }) => {
          return (
            <View
              style={{
                height: 200,
                width: Dimensions.get('window').width - 16,
                backgroundColor: item,
              }}
            />
          );
        }}
      />
    </View>
  );
};

export default App;

Props

• nodes: The total number of pages.
• pos: Function to call when the date/time slot is pressed.
• inverse: (Optional) Boolean for inverse theme colors for the dots.

StylishDivider Component

The StylishDivider is a component that creates a horizontal divider with customizable text and icons on either side. It's commonly used to separate sections or content with a stylish visual element.

Usage

import React from 'react';
import {
  StylishDivider,
  StylishDividerTextType,
  StylishDividerIcon,
} from 'rn-central-dls';

const App = () => {
  return (
    <View>
      <StylishDivider
        leftText={{ text: 'Section', type: StylishDividerTextType.BOLD }}
        rightText={{ text: 'Divider', type: StylishDividerTextType.REGULAR }}
      />
    </View>
  );
};

export default App;

Props

• leftText: (Mandatory) Text configuration for the left side.
  • text: (Mandatory) The text content to display.
  • type: (Mandatory) The text style type (BOLD or REGULAR).
• rightText: (Mandatory) Text configuration for the right side.
  • text: (Mandatory) The text content to display.
  • type: (Mandatory) The text style type (BOLD or REGULAR).
• leftIcon: (Optional) Icon to display on the left side. Defaults to StylishDividerIcon.STAR.
• rightIcon: (Optional) Icon to display on the right side. Defaults to StylishDividerIcon.STAR.
• style: (Optional) Additional styles for the container.