CustomMobileInputBox

Description

CustomMobileInputBox is a customizable React Native component for mobile number input, supporting country selection, error validation, and theming. This component uses react-native-paper for styling and integrates a modal for selecting country codes.

Installation

Ensure you have react-native-paper installed:

npm install react-native-paper

Then, install the component:

npm install react-native-customtextinput

Usage

Import and use the CustomMobileInputBox component:

import React, { useState } from "react";

import { View, Image } from "react-native";

import CustomMobileInputBox from "react-native-customMobile";

const MyComponent = () => {

const [phoneNumber, setPhoneNumber] = useState("");

const [error, setError] = useState(false);

return (

<View>

  <CustomMobileInputBox

    label="Phone Number"

    phoneNumber={phoneNumber}

    setPhoneNumber={setPhoneNumber}

    Icon={require("./assets/phone.png")}

    error={error}

    setError={setError}

    errorText="Invalid phone number"

    returnKeyType="done"

  />

</View>

);

};

export default MyComponent; |

Props

| Prop | Type | Required | Description | |--------------------|---------------------------------|----------|-------------| | label | string | ✅ | Placeholder label for input. | | phoneNumber | string | ✅ | Current value of the phone number input. | | setPhoneNumber | (text: string) => void | ✅ | Callback function to update the phone number. | | Icon | ImageSourcePropType | ✅ | Icon for the input field. | | error | boolean | ✅ | Indicates whether there is an input error. | | setError | (hasError: boolean) => void | ✅ | Callback to set the error state. | | errorText | string | ❌ | Error message to display when input is invalid. | | returnKeyType | 'done' \| 'next' | ❌ | Defines the return key type on the keyboard. | | onSubmitEditing | () => void | ❌ | Function triggered on submit. | | onSelect | (country: Country) => void | ❌ | Callback triggered when a country is selected. | | forwardRef | Ref<RNTextInput> | ❌ | Reference to the TextInput. |