rn-input-libary

'rn-input-library' is a versatile and customizable React Native component library designed to streamline mobile development. It offers a set of reusable, props-driven UI components that can be easily integrated and styled to meet a wide variety of mobile application requirements. The library is lightweight, flexible, and highly extendable, making it a great solution for developers looking to enhance their mobile apps with efficient and scalable UI elements.

RnView

RnView is a highly customizable wrapper around the standard View component in React Native, designed to make it easier to apply layout and styling properties, especially for common patterns like padding, margin, flexbox layout (row and col), and alignment (justifyCenter, justifyStart, etc.). It simplifies using these properties in your app by passing them as props, and it applies the necessary styles to the View component based on those props.

Example

<RnView
     row={true}
     justifyCenter={true}
     justifyStart={false}
     justifyEnd={false}
     justifyBetween={false}
     col={false}
     full
     border
     padding
     paddingHorizontal={20}
     paddingVertical={30}
     paddingTop={10}
     paddingBottom={10}
     paddingLeft={5}
     paddingRight={5}
     margin
     marginHorizontal={15}
     marginVertical={25}
     marginTop={10}
     marginBottom={10}
     marginLeft={10}
     marginRight={10}
   >
     <Text>Hello, World!</Text>
   </RnView>

Properties

Prop	Type	Description	Mandatory	Default Value
row	boolean	Defines a horizontal layout. If true, the children of the View will be displayed in a row (horizontal).	No	FALSE
col	boolean	Defines a vertical layout. If true, the children of the View will be displayed in a column (vertical).	No	FALSE
justifyCenter	boolean	Centers the children of the View along the main axis (horizontal for row, vertical for col).	No	FALSE
justifyStart	boolean	Aligns the children of the View to the start of the main axis (horizontal for row, vertical for col).	No	FALSE
justifyEnd	boolean	Aligns the children of the View to the end of the main axis (horizontal for row, vertical for col).	No	FALSE
justifyBetween	boolean	Distributes the children of the View evenly along the main axis with space between them.	No	FALSE
padding	boolean	number	Applies padding to all sides. If true, it applies the default padding value. If a number is passed, it applies that value as padding.	10
paddingHorizontal	boolean	number	Applies horizontal padding (left and right). If true, it applies the default padding. If a number is passed, it applies that value.	10
paddingVertical	boolean	number	Applies vertical padding (top and bottom). If true, it applies the default padding. If a number is passed, it applies that value.	10
paddingTop	boolean	number	Applies padding to the top side. If true, it applies the default padding. If a number is passed, it applies that value.	10
paddingBottom	boolean	number	Applies padding to the bottom side. If true, it applies the default padding. If a number is passed, it applies that value.	10
paddingLeft	boolean	number	Applies padding to the left side. If true, it applies the default padding. If a number is passed, it applies that value.	10
paddingRight	boolean	number	Applies padding to the right side. If true, it applies the default padding. If a number is passed, it applies that value.	10
margin	boolean	number	Applies margin to all sides. If true, it applies the default margin value. If a number is passed, it applies that value as margin.	10
marginHorizontal	boolean	number	Applies horizontal margin (left and right). If true, it applies the default margin. If a number is passed, it applies that value.	10
marginVertical	boolean	number	Applies vertical margin (top and bottom). If true, it applies the default margin. If a number is passed, it applies that value.	10
marginTop	boolean	number	Applies margin to the top side. If true, it applies the default margin. If a number is passed, it applies that value.	10
marginBottom	boolean	number	Applies margin to the bottom side. If true, it applies the default margin. If a number is passed, it applies that value.	10
marginLeft	boolean	number	Applies margin to the left side. If true, it applies the default margin. If a number is passed, it applies that value.	10
marginRight	boolean	number	Applies margin to the right side. If true, it applies the default margin. If a number is passed, it applies that value.	10
border	boolean	Adds a border around the View. If true, the border defined in commonStyles.border is applied.	No	FALSE
full	boolean	Makes the View occupy the full available space (100% width and height). If true, the View will stretch to fill its container.	No	FALSE

---

RnText

RnText is a customizable text component built on top of the standard Text component in React Native. It provides several props to easily manage common text styling needs such as font weight, alignment, padding, margin, and special text styles like note, title, and banner. This component supports a wide range of customization options that allow you to apply padding, margin, font weight, and more to your text content.

Example

<RnText
     fontWeight={600}
     italic
     note={false}
     title
     textAlignCenter
     padding
     paddingHorizontal={20}
     paddingVertical={15}
     margin
     marginTop={10}
     marginLeft={15}
     style={styles.customStyle}
   \>
     Hello, React Native!
   </RnText\>

Properties

Prop	Type	Description	Mandatory	Default Value
italic	boolean	Applies italic style to the text.	No	FALSE
note	boolean	If true, sets a smaller font size suitable for notes.	No	FALSE
light	boolean	If true, applies a light text color.	No	FALSE
title	boolean	If true, applies styles suitable for a title, like a larger font size and different color.	No	FALSE
banner	boolean	If true, applies special font styles for a banner, such as a different font family.	No	FALSE
textAlignCenter	boolean	If true, aligns the text to the center horizontally.	No	FALSE
textAlignLeft	boolean	If true, aligns the text to the left.	No	FALSE
textAlignRight	boolean	If true, aligns the text to the right.	No	FALSE
full	boolean	If true, allows the text to take up the full available space (100% width).	No	FALSE
padding	boolean	number	If true, applies padding to all sides. If a number is passed, it applies that value as padding.	10
paddingHorizontal	boolean	number	If true, applies horizontal padding (left and right). If a number is passed, it applies that value.	10
paddingVertical	boolean	number	If true, applies vertical padding (top and bottom). If a number is passed, it applies that value.	10
paddingTop	boolean	number	If true, applies padding to the top side. If a number is passed, it applies that value.	10
paddingBottom	boolean	number	If true, applies padding to the bottom side. If a number is passed, it applies that value.	10
paddingLeft	boolean	number	If true, applies padding to the left side. If a number is passed, it applies that value.	10
paddingRight	boolean	number	If true, applies padding to the right side. If a number is passed, it applies that value.	10
margin	boolean	number	If true, applies margin to all sides. If a number is passed, it applies that value as margin.	10
marginHorizontal	boolean	number	If true, applies horizontal margin (left and right). If a number is passed, it applies that value.	10
marginVertical	boolean	number	If true, applies vertical margin (top and bottom). If a number is passed, it applies that value.	10
marginTop	boolean	number	If true, applies margin to the top side. If a number is passed, it applies that value.	10
marginBottom	boolean	number	If true, applies margin to the bottom side. If a number is passed, it applies that value.	10
marginLeft	boolean	number	If true, applies margin to the left side. If a number is passed, it applies that value.	10
marginRight	boolean	number	If true, applies margin to the right side. If a number is passed, it applies that value.	10

---

RnButton

RnButton is a customizable button component built on top of React Native’s TouchableOpacity. It provides a variety of styling and functional props to handle button size, appearance, icon placement, and user interaction. This component is designed to be flexible, allowing you to create buttons with custom themes, icons, padding, margins, and text styles.

Example

<RnButton
     text="Submit"
     primary
     large
     iconLeft={<Icon name="check" />}
     padding
     marginVertical={10}
     onPress={() => console.log('Button Pressed')}
   />

Properties

Prop	Type	Description	Mandatory	Default Value
text	string	The text to display inside the button.	No	""
textStyles	TextStyle	Custom styles to apply to the button's text.	No	{} (empty object)
large	boolean	If true, applies a large size to the button (larger padding, font size, height).	No	FALSE
small	boolean	If true, applies a small size to the button (smaller padding, font size, height).	No	FALSE
transparent	boolean	If true, makes the button transparent (no background color).	No	FALSE
outline	boolean	If true, makes the button an outline (border with no background color).	No	FALSE
iconLeft	JSX.Element	Custom icon component to display on the left side of the button.	No	null
iconRight	JSX.Element	Custom icon component to display on the right side of the button.	No	null
icon	JSX.Element	Custom icon to be displayed within the button.	No	null
primary	boolean	If true, applies the primary theme to the button (background, border, text color).	No	FALSE
secondary	boolean	If true, applies the secondary theme to the button.	No	FALSE
warning	boolean	If true, applies the warning theme to the button.	No	FALSE
success	boolean	If true, applies the success theme to the button.	No	FALSE
danger	boolean	If true, applies the danger theme to the button.	No	FALSE
neutral	boolean	If true, applies a neutral theme to the button.	No	FALSE
justifyStart	boolean	If true, aligns the button content to the left.	No	FALSE
justifyEnd	boolean	If true, aligns the button content to the right.	No	FALSE
justifyBetween	boolean	If true, applies space-between alignment to the button's content (spacing between elements inside).	No	FALSE
padding	boolean	number	If true, applies padding to all sides. If a number is passed, applies that value as padding to all sides.	No
paddingHorizontal	boolean	number	If true, applies padding to the left and right sides. If a number is passed, applies that value as horizontal padding.	No
paddingVertical	boolean	number	If true, applies padding to the top and bottom sides. If a number is passed, applies that value as vertical padding.	No
paddingTop	boolean	number	If true, applies padding to the top side. If a number is passed, applies that value to the top side.	No
paddingBottom	boolean	number	If true, applies padding to the bottom side. If a number is passed, applies that value to the bottom side.	No
margin	boolean	number	If true, applies margin to all sides. If a number is passed, applies that value as margin to all sides.	No
marginHorizontal	boolean	number	If true, applies margin to the left and right sides. If a number is passed, applies that value as horizontal margin.	No
marginVertical	boolean	number	If true, applies margin to the top and bottom sides. If a number is passed, applies that value as vertical margin.	No
marginTop	boolean	number	If true, applies margin to the top side. If a number is passed, applies that value to the top side.	No
marginBottom	boolean	number	If true, applies margin to the bottom side. If a number is passed, applies that value to the bottom side.	No
marginLeft	boolean	number	If true, applies margin to the left side. If a number is passed, applies that value to the left side.	No
marginRight	boolean	number	If true, applies margin to the right side. If a number is passed, applies that value to the right side.	No
onPress	() => void	A function that is called when the button is pressed.	No	null
isActionDone	boolean	If true, it disables the button after the action is completed to prevent multiple presses.	No	FALSE
disabled	boolean	If true, disables the button and prevents any interaction with it.	No	FALSE

---

RnIcon

RnIcon is a customizable icon component that allows you to easily use icons from various icon libraries like MaterialIcons, FontAwesome, FontAwesome5, FontAwesome6, Feather, Entypo, EvilIcons, Ionicons, and AntDesign. This component provides several props to manage icon properties such as type, size, and color.This component supports a wide range of customization options, allowing you to choose from multiple icon types and control the size and color of the icon.

Example

<RnIcon
     type="FontAwesome"
     name="home"
     size={30}
     color="blue"
     style={{ margin: 10 }}
   />

Properties:

Prop	Type	Description	Mandatory	Default Value
type	MaterialIcons'	"FontAwesome"	"FontAwesome5"	"FontAwesome6"
name	string	The name of the icon to display.	Yes	'
color	string	The color of the icon.	No	rnConstants.TEXT_COLOR
size	number	The size of the icon.	No	rnConstants.ICON_SIZE
style	ViewStyle	Custom styles to apply to the icon container.	No	{} (empty object)

---

RnSearchComponent

RnSearchComponent is a customizable search bar component designed to handle text input and search functionality. It allows users to filter data based on their input and provides options such as displaying a cancel button, customizing search filters, and managing search state. This component supports several customization options to fit different use cases.

Example

<RnnSearchComponent
     searchObject={\[{ name: 'Apple' }, { name: 'Banana' }\]}
     keyFilter={\['name'\]}
     updateState={(filteredData) => console.log(filteredData)}
     title="Search fruits"
     focus={true}
     cancelSearch={() => console.log('Search canceled')}
   />

Properties

Prop	Type	Description	Mandatory	Default Value
searchObject	any[]	The data to be filtered based on the search text.	No	[]
keyFilter	string[]	An array of keys used for filtering the searchObject.	No	[]
updateState	Function	A function to update the filtered state after search.	No	undefined
title	string	Placeholder text for the search input field.	No	Search'
searchText	string	The current search text.	No	'
changeSearchText	Function	A function called whenever the search text changes.	No	undefined
cancelSearch	Function	A function called when the search is canceled.	No	undefined
focus	boolean	If true, automatically focuses the search input field.	No	FALSE
customSearchFilter	Function	A custom filter function that can be used to filter the data based on custom logic.	No	undefined
hideCancel	boolean	If true, hides the cancel button in the search bar.	No	FALSE

---

RnInput

RnInput is a customizable input field component built on top of React Native's TextInput. It supports various features like secure text entry (for passwords), customizable icons, error handling, and additional pre-text support. It also includes options for customizing icon colors, managing focus states, and toggling between different icon types, such as an eye icon for password visibility or a swap icon for special functionality.

Example

<RnInput
     placeholder="Enter your text"
     error="This field is required"
     eyeIcon={true}
     iconColor="gray"
     preText="Pre-text"
     disabled={false}
     multiline={false}
     onChangeText={(text) => console.log(text)}
   />

Properties

Prop	Type	Description	Mandatory	Default Value
error	string	The error message to display below the input field.	No	undefined
preText	string	Text to display before the main input text.	No	undefined
icon	any	The name of the icon to display inside the input field.	No	undefined
multiline	boolean	If true, allows the input to be multiline.	No	FALSE
iconColor	string	The color of the icon inside the input field.	No	#000 (default text color)
eyeIcon	boolean	If true, allows toggling between secure text (password) with an eye icon.	No	FALSE
swapIcon	boolean	If true, adds a swap icon inside the input field.	No	FALSE
disabled	boolean	If true, disables the input field.	No	FALSE
placeholderTextColor	string	The color of the placeholder text when the input is empty.	No	#999 (default text color)

---

RnPicker

RnPicker is a customizable dropdown component that allows users to select from a list of options. It supports a variety of features, such as search filtering, displaying custom render options, validation checks, and a placeholder option. The picker also offers the ability to display a "None" option, toggle visibility via modal, and customize the styling of the dropdown and its text.

Example

<RnPicker
     label="Select Option"
     showLabel={true}
     selectedOption={1}
     data={data}
     onSelect={(item) => console.log(item)}
     placeHolder="Please select"
     required={true}
   />

Properties

Prop	Type	Description	Mandatory	Default Value
label	string	The label displayed above the picker.	Yes	undefined
showLabel	boolean	Controls whether the label should be shown above the picker.	Yes	TRUE
pickerStyles	StyleProp	Custom styles for the picker container.	No	undefined
pickerTextStyles	StyleProp	Custom styles for the picker text inside the dropdown.	No	undefined
selectedOption	string	number	The value of the selected option in the picker.	Yes
data	RnPickerOption[]	Array of options to be displayed in the picker.	Yes	[]
disabled	boolean	If true, disables the picker.	No	FALSE
onSelect	(item: RnPickerOption & { index?: number }) => void	Callback function invoked when an option is selected.	Yes	undefined
required	boolean	If true, marks the picker as required for validation purposes.	No	FALSE
triggerValidation	boolean	If true, triggers validation for the selected option (used with required).	No	FALSE
placeholder	string	The placeholder text to display when no option is selected.	No	undefined
customOptionRender	(item, index) => JSX.Element	Custom render function for each option in the list.	No	undefined
showModal	boolean	If true, shows the options in a modal dialog.	No	TRUE
hideSearch	boolean	If true, disables the search bar inside the dropdown modal.	No	FALSE
arrowColor	string	The color of the dropdown arrow icon.	No
showNoneOption	boolean	If true, adds a "None" option at the beginning of the picker list.	No	FALSE
changeSearchText	Function	Callback to handle the change in search text when filtering options.	No	undefined

Picker Options

Prop	Type	Description	Mandatory	Default Value
value	string	number	The value of the option.	Yes
label	string	number	The label of the option.	No
color	string	The color of the option, typically used for highlighting.	No	undefined
hide	boolean	If true, hides the option from the dropdown list.	No	FALSE
id	string	Unique identifier for the option.	No	undefined
extraData	string	Additional data associated with the option.	No	undefined
checked	string	Marks the option as checked if necessary.	No	undefined
dataT (Generic)	T	Additional data for the option, where T is a generic type.	No	undefined

---

RnMultiSelect

RnMultiSelect is a customizable multi-select dropdown component for React Native. It allows users to select multiple options from a list, with support for search functionality, custom option rendering, and modal management. It also provides features like displaying selected options at the top, validating required selections, and customizing the appearance of the dropdown.

Example

<RnMultiSelect
       label="Select Options"
       options={options}
       showSelectedTop={true}
       onChange={(selectedOptions) => console.log(selectedOptions)}
       selectedValues="Option 1, Option 3"
     />

Properties

Prop	Type	Description	Mandatory	Default Value
label	string	The label to display for the multi-select dropdown.	Yes	N/A
options	RnMutliSelectOption[]	List of options to display in the dropdown. Each option should be an object containing name and id properties.	Yes	N/A
disabled	boolean	Disables the dropdown if set to true.	No	FALSE
showSelectedTop	boolean	If true, displays selected items at the top of the options list.	No	TRUE
required	boolean	If true, indicates that the selection is required (can trigger validation).	No	FALSE
triggerValidation	boolean	If true, triggers validation when the dropdown is used.	No	FALSE
selectedValues	string	A comma-separated string of selected option names to display initially in the input box.	No	"" (empty string)
closeFunction	Function	A callback function to close the multi-select modal when invoked.	No	undefined
inputBoxStyles	ViewStyle	Custom styles for the input box that opens the modal.	No	undefined
customOptionRender	(item, index) => JSX.Element	A function to render each option with custom JSX (allows customizing the option display).	No	undefined
onChangeFunction	Function	A callback function triggered when the selection changes. It receives the selected items as input.	No	undefined
onClickFunction	Function	A callback function triggered when the dropdown button is clicked.	No	undefined
changeSearchText	Function	A callback function triggered when the search text is changed.	No	undefined

RnMultiSelectOption

RnMutliSelectOption = {  
name: string,    id: string,    selected?: boolean,    disabled?: boolean,    isLabel?: boolean    tagColor?: string }

---

RnCheckbox

RnCheckbox is a customizable checkbox component for React Native, allowing users to select or deselect options. It supports various customization features such as size, color, border styling, and display of validation messages. It is fully accessible for form usage with built-in support for required validation.

Example

     <RnCheckbox
       label="Agree to terms"
       checked={checked}
       onChange={handleCheckboxChange}
       required={true}
       disabled={false}
       size={24}
       checkBoxCheckedColor="green"
       checkBoxUnCheckedBorderColor="gray"
     />

Properties

Prop	Type	Description	Mandatory	Default Value
label	string	The label to display next to the checkbox.	No	N/A
size	number	The size of the checkbox.	No	20
checked	boolean	Indicates whether the checkbox is checked or not.	No	FALSE
disabled	boolean	Disables the checkbox if set to true.	Yes	N/A
circle	boolean	If true, the checkbox will be circular, else it will have a square shape.	Yes	FALSE
onChange	(checked: boolean) => void	Callback function triggered when the checkbox is toggled.	Yes	N/A
styles	TouchableOpacityProps['style']	Custom styles for the checkbox container.	No	undefined
required	boolean	If true, indicates that the checkbox is required (used for validation purposes).	No	FALSE
triggerValidation	boolean	If true, triggers validation when the checkbox is required but not checked.	No	FALSE
checkBoxCheckedColor	string	The color of the checkmark when the checkbox is checked.	No	rnConstants.SECONDARY_COLOR
checkBoxCheckedFilledColor	string	The background color of the checkbox when checked.	No	rnConstants.TRANSPARENT_COLOR
checkBoxUnCheckedFilledColor	string	The background color of the checkbox when unchecked.	No	rnConstants.TRANSPARENT_COLOR
checkBoxUnCheckedBorderColor	string	The border color of the checkbox when unchecked.	No	rnConstants.SECONDARY_COLOR
checkBoxCheckedBorderColor	string	The border color of the checkbox when checked.	No	rnConstants.PRIMARY_COLOR

---

RnCheckboxGroup

RnCheckboxGroup is a customizable group of checkboxes for React Native that allows users to select one option from a list. It supports features such as custom labels, required validation, and dynamic state updates. The group can be customized with different fields and values, offering flexibility in form design.

Example

<RnCheckboxGroup
       value={selectedValue}
       label="Choose your option"
       fields={\[
         { label: "Option 1", value: "option1" },
         { label: "Option 2", value: "option2" },
         { label: "Option 3", value: "option3" }
       \]}
       required={true}
       disable={false}
       onChange={handleCheckboxGroupChange}
     />

Properties

Prop	Type	Description	Mandatory	Default Value
value	string	The currently selected value from the checkbox options.	Yes	N/A
label	string	The label to display above the group of checkboxes.	No	N/A
fields	RnPickerOption[]	An array of options for the checkbox group. Each option should contain a label and value.	Yes	N/A
disabled	boolean	Disables the entire checkbox group if true.	Yes	FALSE
required	boolean	If true, marks the checkbox group as required for validation purposes.	Yes	FALSE
onChange	(value: string) => void	Callback function that is triggered when the selected value changes.	Yes	N/A

CheckBox Type:

Prop	Type	Description	Mandatory	Default Value
label	string	The label text to display next to the checkbox.	Yes	N/A
value	string	The unique value for the checkbox.	Yes	N/A
isSelected	boolean	Whether the checkbox is currently selected or not.	Yes	N/A

---

RnChip

RnChip is a customizable component for displaying small, interactive elements such as tags or labels. It allows for icons on either side, customizable text, heading, and the ability to delete the chip. The chip can be styled with a custom color and border radius.

Example

 <RnChip
       text="Sample Chip"
       heading="Chip Heading"
       onDelete={handleDelete}
       iconLeft={<MaterialIcons name="remove-circle" size={20} />}
       iconRight={<MaterialIcons name="close" size={20} />}
       chipColor="#E0E0E0"
       radius={12}
     />

Properties

Prop	Type	Description	Mandatory	Default Value
text	string	The main text displayed inside the chip.	Yes	N/A
textStyle	TextStyle	Custom styles for the text inside the chip.	No	N/A
heading	string	Optional heading to display above the chip text.	No	N/A
headingStyle	TextStyle	Custom styles for the heading text.	No	N/A
iconLeft	JSX.Element	Optional icon to display on the left side of the chip.	No	N/A
iconRight	JSX.Element	Optional icon to display on the right side of the chip.	No	N/A
onDelete	Function	Optional callback function when the delete icon is pressed.	No	N/A
radius	number	The border radius of the chip, allowing for rounded corners.	No	rnConstants.CHIP_RADIUS
keyProp	number	A unique key for the chip component.	No	N/A
type	string	An optional type to categorize the chip (e.g., "info", "warning").	No	N/A
chipColor	string	Custom background color for the chip.	No	rnConstants.LIGHT_PRIMARY_COLOR

---

RnProgressBar

RnProgressBar is a simple component that displays a horizontal progress bar. It allows you to visually track the completion of a task by filling the progress bar based on the provided progress value.

Example

<RnProgressBar progress={0.5} />

Properties

Prop	Type	Description	Mandatory	Default Value
progress	number	The progress value, where 0 is 0% completion and 1 is 100%.	No	0

---

RnSlider

RnSlider is a component that allows users to interact with a range of values. It supports both single and range sliders with adjustable boundaries and initial values.

Example

     <RnSlider
       minBoundary={0} maxBoundary={99}
       min\_initVal={12} max\_initVal={88}
       rangeSlider={true}
       onValueChange={(data: { minValue: number, maxValue: number }) => {
         console.log("Selected Range:", data)
       }}
     />

Properties

Prop	Type	Description	Mandatory	Default Value
minBoundary	number	The minimum boundary of the slider.	No	0
maxBoundary	number	The maximum boundary of the slider.	Yes	N/A
min_initVal	number	The initial value for the minimum slider.	No	0
max_initVal	number	The initial value for the maximum slider.	Yes	N/A
rangeSlider	boolean	If true, the slider allows selecting a range (min and max values).	Yes	N/A
onValueChange	(data: { minValue: number, maxValue: number }) => void	Callback function that returns the selected range of values.	No	N/A

---

RnDatePicker

RnDatePicker is a customizable date picker component that allows users to select single dates or ranges, with various customization options including color schemes, date disabling, pinned dates, and more. It supports both dialog and sheet types, making it flexible for different use cases.

Example

<RnDatePicker
       selectedOrStartDate={selectedDate}
       onChange={handleDateChange}
       disable={false}
       dateRange={false}
       pinnedDates={{
         "2024-11-25": {
           color: "red",
           events: \[{ title: "Event 1", description: "Description of event 1" }\]
         }
       }}
       primaryColor="#FF6347"
       secondaryColor="#FFFFFF"
     />

properties

Prop	Type	Description	Mandatory	Default Value
type	`'dialog'	sheet'`	The type of date picker, either a dialog or a sheet.	No
alignItem	`'center'	end'`	Controls the alignment of the date picker. Can be 'center' or 'end'.	No
calendarStyles	{ [key: string]: any }	Custom styles for the calendar.	No	{}
onChange	Function	Callback function to handle date changes. Receives the selected date as a parameter.	Yes	N/A
selectedOrStartDate	string	Date	The selected date or the start date for date range selection.	Yes
disabled	boolean	If true, disables the date picker.	Yes	FALSE
calendarInputStyles	{ [key: string]: any }	Custom styles for the input field of the calendar.	No	{}
primaryColor	string	The primary color for the calendar.	No	undefined
secondaryColor	string	The secondary color for the calendar.	No	undefined
dateRange	boolean	If true, the date picker will allow selecting a range of dates.	Yes	FALSE
disableBeforeDays	boolean	If true, disables dates before the selected date.	Yes	FALSE
disableAfterDays	boolean	If true, disables dates after the selected date.	Yes	FALSE
minDateToDisable	string	Date	The minimum date to disable. Can be a string (e.g., "YYYY-MM-DD") or a Date object.	No
maxDateToDisable	string	Date	The maximum date to disable. Can be a string (e.g., "YYYY-MM-DD") or a Date object.	No
endDate	string	Date	The end date for date range selection.	No
pinnedDates	{ [key: string]: { color?: string, events: { title: string, description: string }[] } }	A list of pinned dates with optional events and colors. The key should be in the format "YYYY-MM-DD".	Yes	{}
monthPicker	boolean	If true, the picker will only allow month and year selection.	No	FALSE
startDateChangeDetect	boolean	If true, triggers the onChange function when the start date is selected (for range date picker).	No	FALSE
showDateRangeLabel	boolean	If true, shows a label indicating the selected date range.	No	FALSE
highlighted	boolean	If true, highlights the selected date.	No	FALSE
showModal	boolean	If true, displays the modal for date selection.	No	TRUE
dateRangeSeparator	string	The separator for the start and end dates in date range mode.	No	- '
dateStyles	{ [key: string]: any }	Custom styles for specific dates (e.g., pinned dates).	No	{}
calendarIconColor	string	The color for the calendar icon.	No	undefined
onClose	Function	Callback function that is called when the date picker modal is closed.	No	undefined
formatDate	string	The format in which the date will be displayed.	No	undefined

---

RnTimePicker

RnTimePicker is a customizable time picker component that allows users to select a specific time. It includes options for styling the input box, validation triggers, and the picker icon color.

Example

<RnTimePicker
       label="Select Time"
       initialTime={selectedTime}
       onChange={handleTimeChange}
       required={true}
       pickerIconColor="#FF6347"
     />

Properties

Prop	Type	Description	Mandatory	Default Value
label	string	The label displayed next to the time picker input field.	Yes	N/A
initialTime	string	The initial time value displayed in the input field (in 12-hour format, e.g., "12:00 PM").	Yes	N/A
onChange	Function	A callback function that is triggered when the selected time changes. Receives the updated time as a string.	Yes	N/A
inputBoxStyles	ViewStyle	Custom styles for the input box where the time is displayed.	No	{}
required	boolean	If true, marks the time picker as a required field, typically used in form validation.	No	FALSE
triggerValidation	boolean	If true, triggers validation when the time is selected.	No	FALSE
disable	boolean	If true, disables the time picker, making it non-interactive.	No	FALSE
pickerIconColor	string	The color of the icon displayed next to the time picker input.	No	undefined