react-native-common-components

Getting Started

Follow the instruction given bellow

npm install @shreyacn11/react-native-component

or

yarn add @shreyacn11/react-native-component

After run this command you have successfully install this plugin. Now you have to install react-native-vector-icons and react-native-fast-image because we use internally.

npm install --save react-native-vector-icons
npm install --save react-native-fast-image

After installing react-native-vector-icons you have to configure it. Read the configuration process of react-native-vector-icons

Components

• CustomCheckBox
• CustomRadioButton
• CustomCard
• CustomButton
• CustomHeader
• CustomTextInput
• CustomText
• CustomSwitch
• CustomRating
• CustomImage
• CustomAccordian
• CustomDropDown
• CustomAutoComplete
• CustomLine
• Custom OTP Input
• CustomFlatList
• CustomTooltip

Custom CheckBox

Importing the CustomCheckBox component:

import {CustomCheckBox} from 'react-native-component';

Use the CustomCheckbox component in your app:

    const [check, setCheck] = useState(false);

    return (
        <CustomCheckBox
            checked = {check}
            label="Sample Check Box"
            onChange = {(val) => setCheck(val)}
            size = {25}
        >
    )

Properties

| Props | Description | Default | Type | | -------------------- | --------------------------------------------------------------- | --------- | ------------------- | | checked | This is the default value of CheckBox. Props type boolean | false | boolean | | checkedColor | This color show when checked is set to true | '#008000' | string | | uncheckedColor | This color show when checked is set to false | '#808080' | string | | tintColor | Color of check icon. | '#fff' | string | | size | Size of checkBox | 24 | number | | containerStyle | With this you can change the style of checkbox | undefined | StyleProp ViewStyle | | label | This is used for give the lable to the check box | empty | string | | labelStyle | This is used for give style of the lable to the check box | empty | StyleProp TextStyle | | disabled | This is used to show this disbled check box | false | boolean |

Method

| Props | Description | Type | | -------------- | ---------------------------------------------------------------------------------- | ---------------------- | | onChnage | Callback function triggered on checkbox click, returning the updated boolean value | (val: boolean) => void |

Custom RadioButton

Importing the CustomRadio component:

import {CustomRadio} from 'react-native-component';

Use the CustomRadio component in your app:

    const [selected, setSelected] = useState(false);

    return (
        <CustomRadio
            label="Sample Radio"
            selected = {selected}
            onPress = {(val) => setSelected(val)}
            size = {25}
        >
    )

Properties

| Props | Description | Default | Type | | --------------------- | ------------------------------------------------------------------ | --------- | ------- | | label | This is used for give the lable to the radio button | empty | string | | labelStyle | This is used for give style of the lable to radio button | empty | style | | selected | This is the default value of RadioButton. Props type boolean | false | boolean | | selectedColor | This color show when selected is set to true | '#0000FF' | string | | unselectedColor | This color show when selected is set to false | '#808080' | string | | size | Size of RadioButton | 24 | number |

Method

| Props | Description | | ------------- | ---------------------------------------------------------------------------------------- | | onPress | This callback function is called when you click on RadioButton. It returns boolean value |

Custom Card

This is a card with pre-styled and clickable.

Importing the Card component:

import {CustomCard} from 'react-native-component';

Use the CustomCard component in your app:

return (
  <CustomCard
    containerStyle={{marginHorizontal: 20, backgroundColor: '#f3f3f3'}}
    innerStyle={{padding: 20}}
    onPress={() => console.log('Card pressed')}
    disabled={false}>
    <Text>Your custom content here</Text>
  </CustomCard>
);

Properties

| Props | Description | Default | Type | | -------------------- | --------------------- | --------- | --------- | | containerStyle | For styling the card. | undefined | ViewStyle |

And it also support all View and Pressable props.

Custom Button

A customizable button component for React Native, supporting loading states, icons, borders, and dynamic styling based on the device's color scheme.

Importing the CustomButton component:

import CustomButton from 'react-native-component';
import Icon from 'react-native-vector-icons/FontAwesome';

Use the CustomButton component in your app:

<CustomButton
  title="Submit"
  onPress={() => console.log('Button Pressed')} ///FIXME NEED TO pass on screen
  isLoading={false}
  leftIcon={<Icon name="arrow-left" size={20} color="#000" />} ///FIXME NEED TO take from screen
  rightIcon={<Icon name="arrow-right" size={20} color="#000" />}
  border={true}
  borderColor="#FF5733"
  btnStyle={{paddingHorizontal: 20}}
  btnTextStyle={{fontWeight: 'bold'}}
/>

Properties

| Props | Description | Default | Type | | ------------------ | --------------------------------------------------------------------- | ------------------------ | ------------------- | | title | The text to display on the button. | NA | string | | onPress | Callback function to handle button press events | N/A | Function | | btnStyle | This is the default value of RadioButton. Props type boolean | {} | ViewStyle | | btnTextStyle | Custom styles for the button text. | {} | TextStyle | | isLoading | Shows an ActivityIndicator if set to true. | false | boolean | | leftIcon | React element for an icon to display on the left side of the text. | null | Element / Component | | rightIcon | React element for an icon to display on the right side of the text. | null | Element / Component | | border | Enables border styling around the button if set to true. | false | boolean | | borderColor | Sets the color of the button border (applied only if border is true). | Uses theme color if null | string |

Method

| Props | Description | | ------------- | -------------------------------------------------------------------------------------------- | | onPress | This callback function is triggered when the button is pressed, allowing for event handling. |

Custom Header

A customizable header component for React Native, with optional back navigation, title, notification icon with badge, and flexible styling.

Importing the CustomHeader component:

import CustomHeader from 'react-native-component';

Use the CustomHeader component in your app:

const handleBackPress = () => {
  console.log('Back button pressed');
  // Add navigation logic here
};

const handleNotificationPress = () => {
  console.log('Notification bell pressed');
  // Add notification navigation logic here
};
return (
  <CustomHeader
    title="Home"
    headerIcon={true}
    notificationCount={3}
    onLeftPress={handleBackPress}
    onRightPress={handleNotificationPress}
    containerStyle={{backgroundColor: 'grey'}}
    titleStyle={{color: '#333', fontSize: 18}}
    bellColor="red"
    bellColor2="purple"
    onLeftPress={() => console.log('Back button pressed')}
    onRightPress={() => console.log('Notification icon pressed')}
    rightIcon2={<Feather name="settings" size={20} color="purple" />}
    onRightPress2={() => console.log('Settings icon pressed')}
  />
);

Properties

| Props | Description | Default | Type | | ----------------------- | --------------------------------------------------------------------------- | --------- | ------------------- | | title | The title text to display in the center of the header. | NA | string | | headerIcon | Icon should displayed on the right side of the header. | false | Element / Component | | notificationCount | Number to display as a badge on the notification icon if greater than zero. | undefined | number | | containerStyle | Custom styles for the header container. | {} | ViewStyle | | titleStyle | Custom styles for the title text. | {} | TextStyle | | bellColor | Color of the notification bell icon and its border (optional). | green | string |

Method

| Props | Description | | ------------------ | ---------------------------------------------------------------------- | | onLeftPress | Function called when the back button is pressed (optional). | | onRightPress | Function called when the notification bell icon is pressed (optional). |

Custom TextInput

A versatile and customizable text input field component for React Native. This component supports features such as left and right icons, error messages, secure text entry, and multi-line input, as well as adaptability to dark mode.

Importing the CustomTextInput component:

import {CustomTextInput} from 'react-native-component';

Use the CustomTextInput component in your app:

const MyComponent = () => {
  const handleTextChange = (text: string) => {
    console.log('Text changed:', text);
  };

  const handleRightIconPress = () => {
    console.log('Right icon pressed');
  };

  return (

      <CustomTextInput
        label="Enter your label"
        placeholder="Enter your placeholder"
        placeholderColor="#888"
        onChangeText={handleTextChange}
        isLeftImage={true}
        isRightImage={false}
        leftIconImage={<Icon name="eye" size={20} />}
        error={"This field is required"}
        styles={{marginVertical: 10}}
      />
  );

Properties

| Props | Description | Default | Type | | ---------------------- | ----------------------------------------------------------- | --------- | ------------------- | | onChangeText | Function that handles text changes in the input field. | NA | Function | | disabled | Disables the input field when set to true. | false | boolean | | label | Text label for the input field, displayed above the input. | undefined | string | | labelStyle | Custom style for the label text. | {} | TextStyle | | placeholder | Placeholder text for the input field, displayed when empty. | {} | string | | placeholderColor | Color for the placeholder text. | #CCCCCC | string | | leftIconImage | Element to display on the left side of the input field. | undefined | Element / Component | | rightIconImage | Element to display as the right-side icon | undefined | Element / Component | | isRightImage | Shows the right icon when set to true. | false | boolean | | isLeftImage | Shows the left icon when set to true. | false | boolean | | isRightText | Shows text on the right side when set to true. | false | boolean | | secureTextEntry | Enables secure text entry (e.g., for passwords). | false | boolean | | styles | Custom styles for the container of the text input. | {} | ViewStyle | | multiline | Enables multi-line input. | false | boolean | | numberOfLines | Number of lines for multi-line input. | 1 | number | | rightIconOnPress | Function to handle the press event on the right icon. | undefined | Function | | rightText | Text displayed on the right side of the input. | undefined | string | | rightTextOnPress | Function to handle the press event on the right-side text. | undefined | Function | | value | Current value of the input field. | undefined | string | | editable | Controls whether the input field is editable. | true | boolean | | testID | Unique ID for testing purposes. | undefined | string | | error | Error message displayed below the input field in red. | undefined | string | | inputProps | Additional props for the TextInput component. | {} | InputProps |

Custom Text

A reusable CustomText component for React Native that adapts to light and dark themes. This component allows for custom font size, weight, alignment, and color.

Importing the CustomText component:

import CustomText from 'react-native-component';

Use the CustomText component in your app:

<CustomText fontSize={20} weight="bold" align="center" style={{marginTop: 20}}>
  {'Welcome to the App!'}
</CustomText>

Properties

| Props | Description | Default | Type | | -------------- | -------------------------------------------------- | ------- | ------------------- | | children | The text content to display. | NA | Element / Component | | style | Additional custom styles to apply to the text. | {} | Style | | color | Custom color for the text (overrides theme color). | #000 | string | | fontSize | Font size of the text. | 16 | number | | weight | Font weight of the text (e.g., 'bold', 'normal'). | {} | string | | align | Text alignment ('left', 'center', 'right'). | left | string |

Custom Switch

A custom switch component for React Native that can be toggled on and off, with configurable colors, size, and optional disabled state. The switch uses animations to smoothly transition between on and off states.

Importing the CustomSwitch component:

import CustomSwitch from 'react-native-component';

Use the CustomSwitch component in your app:

const [isSwitchOn, setIsSwitchOn] = useState(false);

<CustomSwitch
  value={isSwitchOn}
  onValueChange={setIsSwitchOn}
  size={60}
  onColor="#4CD964"
  offColor="#ddd"
/>;

Properties

| Props | Description | Default | Type | | ------------------- | -------------------------------------------------- | ------- | -------- | | value | Current state of the switch (on or off). | false | boolean | | onValueChange | Callback for toggling the switch state. | N/A | Function | | size | Optional: Adjusts the size of the switch | 50 | number | | onColor | Optional: Background color when the switch is on. | #4CD964 | string | | offColor | Optional: Background color when the switch is off. | #ddd | string | | disabled | Optional: Disables the switch if true. | false | boolean |

Custom Rating

A customizable star rating component for React Native, allowing users to select a rating with support for half-star increments. This component uses react-native-vector-icons for the star icons.

Importing the CustomRating component:

import CustomRating from 'react-native-component';

Use the CustomRating component in your app:

  const [rating, setRating] = useState(0);

      <CustomRating
        rating={rating}
        onRatingChange={newRating => setRating(newRating)}
        size={40}
        color="#FFD700"
        count={5} /
      />

Properties

| Props | Description | Default | Type | | -------------------- | ------------------------------------------------- | ------- | -------- | | rating | Current rating value (supports half stars). | 0 | number | | onRatingChange | Callback for when the rating is changed. | N/A | Function | | size | Optional: Size of the star icons. | 30 | number | | color | Optional: Background color when the switch is on. | #FFD700 | string | | count | Optional: Total number of stars displayed. | 5 | number |

Custom Image

A customizable image component built using react-native-fast-image for efficient image rendering in React Native applications. This component supports loading indicators and adjustable resizing options.

Importing the CustomImage component:

import CustomImage from 'react-native-component';

Use the CustomImage component in your app:

<CustomImage
  sourceImage={{uri: 'https://example.com/image.jpg'}} // Remote or local image source
  resizeMode="cover" // Optional: 'cover', 'contain', 'stretch', 'center'
  imageStyle={styles.image} // Optional: custom style for the image
/>;

const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: 'center', alignItems: 'center'},
  image: {width: 100, height: 100, borderRadius: 50},
});

Properties

| Props | Description | Default | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ---- | | sourceImage | Required. Image source object, typically with a uri for remote images or local asset reference.0 | | imageStyle | Style object for custom styling (e.g., size, border). If not provided, a default style will be used. | { width: 50, height: 50, borderRadius: 25 } | | resizeMode | Optional string defining how the image should fit its container. Accepted values are: "contain", "stretch", "center", "cover". | "cover" |

Custom Accordian

A customizable and theme-aware Accordian component for React Native. This component supports light and dark themes, with smooth expand/collapse animations for each section, enabled by LayoutAnimation.

Importing the CustomAccordian component:

import CustomAccordian from 'react-native-component';

Use the CustomAccordian component in your app:

const sections = [
  {title: 'Section 1', content: 'Content for section 1'},
  {title: 'Section 2', content: 'Content for section 2'},
  {title: 'Section 3', content: 'Content for section 3'},
];

<View style={{flex: 1, padding: 10}}>
  <CustomAccordian sections={sections} />
</View>;

Properties

| Props | Description | Default | Type | | -------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------ | | sections | Required. Array of sections, each containing a title and content to be displayed. | NA | Array | | renderHeader | Optional custom function to render the header of each section. Parameters: section, index, and isExpanded. | Default title and chevron icon | Element/Components | | renderContent | Optional custom function to render the content of each section. Parameters: section and index. | Default text-based content | Element/Components | | containerStyle | Optional style object for the accordion container. | { marginVertical: 5 } | Style |

Custom Dropdown

Overview

The CustomDropdown component is a versatile dropdown for React Native applications, allowing users to select either a single or multiple options. It supports dark and light themes, with customizable styles and optional label displays.

Features

• Single or Multiple Selection: Allows either single or multiple item selection.
• Theming Support: Automatically adapts to light and dark themes.
• Customizable Styles: Flexible styling for dropdown items, text, container, etc.
• Dynamic Positioning: Dropdown opens below or above the button based on screen space.
• Tags Display for Multi-select: Shows selected items as removable tags for multiple selection.

Importing the CustomDropdown component:

import {CustomDropdown, DropDownType} from 'react-native-component';

Use the CustomDropdown component in your app for the single select:

<CustomDropdown
  label="Select Item"
  options={[
    {label: 'Item 1', value: 1},
    {label: 'Item 2', value: 2},
  ]}
  selectedValue={{label: 'Item 1', value: 1}}
  placeholderText="Choose an item"
  type={DropDownType.SINGLE}
  onSelect={selected => console.log('Selected:', selected)}
/>

Use the CustomDropdown component in your app for the multi-Select:

<CustomDropdown
  label="Select Items"
  options={[
    {label: 'Item 1', value: 1},
    {label: 'Item 2', value: 2},
  ]}
  selectedValues={[{label: 'Item 1', value: 1}]}
  placeholderText="Choose items"
  type={DropDownType.MULTIPLE}
  onMultiSelect={selectedOptions => console.log('Selected:', selectedOptions)}
/>

Properties

| Props | Description | Default | Type | | -------------------------------- | ------------------------------------------------- | ------- | --------------------- | | containerStyle | Custom style for the main container. | {} | ViewStyle | | label | Optional label displayed above the dropdown. | N/A | string | | labelStyle | Custom style for the label text. | {} | TextStyle | | type | Dropdown selection type: SINGLE or MULTIPLE. | SINGLE | DropDownType | | options | List of options, each containing label and value. | [] | ICustomDropdownItem[] | | selectedValue | Selected value for single selection. | [] | ICustomDropdownItem | | selectedValues | Selected values for multiple selection. | [] | ICustomDropdownItem[] | | placeholderText | Placeholder text when no selection is made. | NA | Style | | dropdownContainerStyle | Style for the dropdown button container. | {} | Style | | dropdownContainerTextStyle | Style for the text inside the dropdown button. | {} | Style | | dropdownItemContainerStyle | Style for the dropdown items container. | {} | Style | | dropdownItemStyle | Style for each dropdown item. | {} | Style | | dropdownItemTextStyle | Style for each dropdown item's text. | {} | Style | | dropdownContainerStyle | Style for the dropdown button container. | {} | Style |

Methods

| Props | Description | Default | | ------------------- | -------------------------------- | ------- | | onSelect | Callback for single selection. | N/A | | onMultiSelect | Callback for multiple selection. | N/A |

Custom AutoComplete

Overview

CustomAutocomplete is a React Native component that provides a customizable autocomplete input field. It allows users to search and select from a list of suggestions with the flexibility to customize its appearance and behavior.

Features

• Fully customizable styles for the container, input, modal, and list items.
• Ability to render custom list items via a renderItem prop.
• Automatically filters and displays suggestions based on user input.

Importing the CustomAutocomplete component:

import {CustomAutocomplete} from 'react-native-component';

Use the CustomAutocomplete component in your app:

const sampleData = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

const handleSelect = (item: string) => {
  console.log('Selected item:', item);
};

<CustomAutocomplete
  placeholder="Search fruits"
  data={data}
  onSelect={handleSelect}
/>;

Properties

| Props | Description | Default | Type | | -------------------- | -------------------------------------------------------------------------------------------- | --------- | ---------------------- | | data | Array of suggestions to display. | [] | string[] | | onSelect | Callback function triggered when an item is selected. | N/A | (item: string) => void | | containerStyle | Custom styles for the container of the autocomplete component. | {} | ViewStyle | | inputStyle | Custom styles for the text input field. | {} | ViewStyle | | modalStyle | Custom styles for the modal containing the suggestion list. | [] | ViewStyle | | itemStyle | Custom styles for individual suggestion items in the list. | [] | ViewStyle | | renderItem | Function to render custom list items. Passes the item and onSelect function for flexibility. | [] | function | | placeholder | Placeholder text for the input field | Type here | string |

Custom Line

Overview

The CustomLine component is a reusable React Native component designed to render a horizontal line that can be styled with solid or dashed patterns, custom thickness, and colors.

Features

• Supports solid or dashed lines.
• Allows customization of color and thickness.
• Accepts additional styles via the style prop.

Importing the CustomLine component:

import {CustomLine} from 'react-native-component';

Use the CustomLine component in your app:

<CustomLine color="gray" thickness={1} isDashed />

Properties

| Props | Description | Default | Type | | --------------- | ------------------------------------ | ------- | --------- | | color | The color of the line. | '#000' | string | | thickness | Thickness of the line in pixels. | 1 | number | | style | Additional styles for the line. | {} | ViewStyle | | isDashed | If true, renders the line as dashed. | false | boolean |

Custom Spacing

Overview

The CustomSpacing component is a lightweight and reusable React Native component designed to create space between elements. It allows you to define custom widths and heights dynamically.

Features

• Easily add horizontal or vertical spacing.
• Fully customizable using width and height props.
• Keeps code clean and avoids repetitive inline styles.

Importing the CustomSpacing component:

import {CustomSpacing} from 'react-native-component';

Use the CustomSpacing component in your app:

<CustomSpacing height={10} width={20} />

Properties

| Props | Description | Default | Type | | ------------ | ------------------------------------------- | ------- | ------ | | width | Specifies the horizontal space (in pixels). | 0 | number | | height | Specifies the vertical space (in pixels). | 0 | number |

Custom OTP Input

Overview

The CustomOtpInput is a customizable React Native component for handling OTP (One-Time Password) inputs. It allows users to input OTPs seamlessly with automatic navigation between input fields and support for backspace handling.

Features

• Dynamically set the number of OTP input fields.
• Automatic focus movement to the next/previous field.
• Handles backspace for seamless user experience.
• Fully customizable styles and behavior.

Importing the CustomOtpInput component:

import {CustomOtpInput} from 'react-native-component';

Use the CustomOtpInput component in your app:

const App = () => {
  const [otp, setOtp] = useState('');

  return (
    <View style={{padding: 20}}>
      <Text>Enter OTP:</Text>
      <CustomOtpInput length={6} value={otp} onChange={setOtp} />
      <Text>Entered OTP: {otp}</Text>
    </View>
  );
};

Properties

| Props | Description | Default | Type | | -------------- | -------------------------------------------- | ------- | -------- | | length | The number of OTP input fields. | 0 | number | | value | The current OTP value as a string. | 0 | string | | onChange | Callback invoked when the OTP value changes. | 0 | function |

Custom FlatList

Overview

The CustomFlatList is a versatile and reusable React Native component that wraps the FlatList to provide additional features like pull-to-refresh, load-more functionality, horizontal/vertical list orientation, and customizable styles, while keeping the implementation clean and modular.

Features

• Supports vertical and horizontal lists.
• Pull-to-refresh functionality.
• Infinite scrolling with a load-more callback.
• Customizable styles for the list and its content container.
• Grid-like layout with multiple columns.
• Easily extendable via flatListProps.

Importing the CustomFlatList component:

import {CustomFlatList} from 'react-native-component';

Use the CustomFlatList component in your app:

const App = () => {
  const data = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  const renderItem = ({item}: {item: string}) => (
    <View>
      <Text>{item}</Text>
    </View>
  );

  return (
    <CustomFlatList
      data={data}
      renderItem={renderItem}
      handleLoadMore={() => console.log('Load more...')}
      isPullToRefreshEnable={true}
      handlePullToRefresh={() => console.log('Refreshing...')}
      flatListProps={{
        initialNumToRender: 10,
        showsVerticalScrollIndicator: false,
      }}
    />
  );
};

Properties

| Props | Description | Default | Type | | --------------------------- | ---------------------------------------------------------------------------- | --------- | -------- | | data | The data array that will be rendered in the list. | null | ArrayLike | | renderItem | Function to render each item in the list. | undefined | ListRenderItem | | handleLoadMore | Callback to load more data when the end of the list is reached. | undefined | function | | isPullToRefreshEnable | Flag to enable or disable pull-to-refresh functionality. | false | boolean | | isRefreshing | Flag indicating whether the list is currently being refreshed. | false | boolean | | handlePullToRefresh | Callback to handle the pull-to-refresh action. | undefined | function | | horizontal | Flag to render the list horizontally. Defaults to vertical if not specified. | false | boolean | | style | Style object for the list container | undefined | ViewStyle | | contentContainerStyle | Style object for the content container within the list. | undefined | ViewStyle | | numColumns | Number of columns for grid-like layout. | 1 | number | | flatListProps | Additional props to pass directly to the underlying FlatList component. | undefined | any |

Custom Tooltip

Overview

The CustomTooltip component is a reusable and flexible tooltip implementation designed for React Native. It allows developers to display contextual information when users interact with the UI elements.

Features

• Customizable styles for tooltip text and the tooltip wrapper itself.
• Flexible layout handling to ensure the tooltip adjusts based on screen dimensions.
• Supports embedding various React Native components (e.g., Text, Button, TouchableOpacity) as children.
• Calculates tooltip position dynamically to prevent clipping or overlap, adjusting its placement (top, bottom, left, right) relative to the screen bounds.
• Tooltips appear on interaction (e.g., press) and disappear when the background or close event is triggered.

Importing the CustomTooltip component:

import {CustomTooltip} from 'react-native-component';

Use the CustomTooltip component in your app:

//Basic Tooltip
<CustomTooltip tooltipText="This is a tooltip">
  <Text>Press on me</Text>
</CustomTooltip>

//Custom Styling
<CustomTooltip
  tooltipText="Styled Tooltip"
  tooltipTextStyle={{ color: 'red', fontSize: 16 }}
  tooltipStyle={{ borderWidth: 2, borderColor: 'blue' }}>
  <View style={{ padding: 10 }}>
    <Text>Custom Style</Text>
  </View>
</CustomTooltip>

//Interactive Components
<CustomTooltip tooltipText="Tooltip for button">
  <TouchableOpacity onPress={() => alert('Button clicked')}>
    <Text>Click Me</Text>
  </TouchableOpacity>
</CustomTooltip>

Properties

| Props | Description | Required | Type | | ---------------------- | -------------------------------------------------------------------------------------------------------------- | -------- | --------------- | | tooltipText | The content of the tooltip that will be displayed. | Yes | string | | tooltipTextStyle | Style object for customizing the appearance of the tooltip text (e.g., font size, color). | No | TextStyle | | tooltipStyle | Style object for customizing the appearance of the wrapper around the target element (e.g., padding, borders). | No | ViewStyle | | children | The child elements (React components) that the tooltip will be attached to. | Yes | React.ReactNode |