rn-input-libary v1.1.0

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

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

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

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:

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

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

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

Picker Options

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

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

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

CheckBox Type:

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

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

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

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

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