@optisolbusiness/react-native-text-input
TypeScript icon, indicating that this package has built-in type declarations

0.0.11 • Public • Published

react-native-text-input

@optisolbusiness/react-native-text-input

Installation

npm i @optisolbusiness/react-native-text-input

Usage

import { InputTextComponent } from '@optisolbusiness/react-native-text-input';

// ...

<InputTextComponent
  title={'first_name'}
  isMandatory={true}
  value={name}
  placeholder={'Enter Your Name'}
  inputStyle={{ color: 'blue'}}
  textBoxContainerStyle={{ marginTop: 10 , borderRadius: 20,  height: 45,}}
  isError={false}
  isErrorOutline={false}
  keyboardType="default"
  returnKey={'next'}
  errorMessage={'invalid name'}
  onChangeText={(item) => updateTextValue(item, 'name')}
  onFocus={() => updateButtonValue('blur')}
/>

Example for Usage of imagePosition and imageComponent

export default function App() {
  const [showPassword, setShowPassword] = useState(true);

  const renderEyeIcon = () => {
    return (
      <TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
        {!showPassword && <Image
          source={require('./assets/images/eyeUnhide.png')}
        />}
        {showPassword && <Image
          source={require('./assets/images/eyeHide.png')}
        />}
      </TouchableOpacity>
    );
  };

  return (

      <InputTextComponent
        secureText={showPassword}
        imagePosition={true}
        imageComponent={() => renderEyeIcon()}
      />
  )
}

Props and Methods

Prop Type Description
showTitle boolean Optional. Enable to show title for textinput
title String Optional. TextInput title (heading)
titleStyle Style Optional. text input title (heading) style
isMandatory boolean Optional. to show mandatory symbol adjacent to text input
mainContainer Style Optional. styling for whole contianer
placeholder String Optional. placeholder for textinput
disabled boolean Optional. If you do not wish to allow editing in the text field, you can set the value to false.
value String Optional. Specify the value to be displayed in the text input field
secureText boolean Optional. make true for sensitive text like passwords to stay secure
keyboardType String Optional. Determines which keyboard to open
returnKey String Optional. Determines how the return key should look
inputStyle Style Optional. styling for text input
onChangeText Function Mandatory. Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler
onFocus Function Optional. Callback that is called when the text input is focused
onBlur Function Optional. Callback that is called when the text input is blurred
onSubmitting Function Optional. Callback that is called when the text input's submit button is pressed.
onEndEditting Function Optional. Callback that is called when text input ends
maxLength Number Optional. Limits the maximum number of characters that can be entered
multiline boolean Optional. If true, the text input can be multiple lines. The default value is false

Note: It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.

Prop Type Description
numberOfLines Number Optional. Use it with multiline set to true to be able to fill the lines
blurOnSubmit boolean Optional. If true, the text field will blur when submitted
onPressIn Function Optional. Callback that is called when a touch is engaged
inputRef Function Optional. reference of text input
testID String Optional. testID of text input
isErrorOutline boolean Optional. enable to show bordercolor for textinput when there is error
isErrorBorderColor color Optional. border color to text input when there is error must make isErrorOutline to true to use isErrorBorderColor prop
notErrorBorderColor String Optional. border color to text input when there is no error default is black
textBoxContainerStyle Style Optional. Specify the styling properties for the outer container of a text box, such as borderRadius and borderWidth.
errorMessage Style Optional. styling of text box outer container like borderRadius, bordrWidth...
isError boolean Optional. to show error message
errorTextStyle Style Optional. error text style
errorMessage String Optional. error message text
imagePosition boolean Optional. To position an image, such as an eye icon or a calendar icon, on the right corner of a text input,
imageComponent Function Optional. To show icon on the right corner of the text input and when pressed, you can implement a functionality, Must make imagePosition to true

To enable a pop-up to appear when hovering over an icon, you would need to install the "react-native-popup-menu" library. This pop-up menu will be displayed adjacent to a text input field, and its primary function is to provide additional information relevant to that particular input.

Installation

npm i react-native-popup-menu

If using iOS please remember to install cocoapods by running: npx pod-install

Wrap your application inside MenuProvider and then simply use Menu component where you need it. Below you can find a simple example.

import { MenuProvider } from 'react-native-popup-menu';

export const App = () => (
      <MenuProvider>
        <YourApp />
      </MenuProvider>
);
      <InputTextComponent
      infoEnable={true}
      menuTriggerImageComponent={ () => <Image
          source={require('./assets/images/icon.png')}/>}
      triggerText={'Text to be shown'}
      triggerTextStyle={{color: 'pink'}}
      triggerStyle={{marginLeft: 10}}
      optionsContainerStyle={{borderColor: 'red',borderRadius:2, marginTop: 19}}
      />

Below are props for react-native-popup-menu

Prop Type Description
infoEnable boolean Mandatory. to enable pop-up menu
triggerStyle Style Optional. Define the styles for the triggerWrapper within the MenuTrigger
optionsContainerStyle Style Optional. Define the styles for the optionsContainer within the MenuOptions
triggerTextStyle Style Optional. trigger text style
triggerText String Mandatory. to show trigger text
menuTriggerImageComponent Function Mandatory. To display an image that triggers a pop-up when hovered over

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

Package Sidebar

Install

npm i @optisolbusiness/react-native-text-input

Weekly Downloads

0

Version

0.0.11

License

MIT

Unpacked Size

60.5 kB

Total Files

34

Last publish

Collaborators

  • shyamsundars
  • sujipriya
  • saisushma
  • silambarasan_1996
  • tharmadurai
  • ramprasath.raja