@optisolbusiness/react-native-text-input

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